修炼js 4DOM

DOM是Document Object Model(文档对象模型)的缩写，DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
如何获取DOM?
原生获取方式如下：

// 方式一 根据id获取dom节点
document.getElementById("id");

// 方式二 获取标签名称为参数的dom节点，返回一个数组
document.getElementsByTagName("ul");

//方式三 获取class="hh"的dom节点，返回一个数组
document.getElementsByClassName("hh");

//方式四 #params: 根据id获取dom, .params: 根据class名获取dom 多个相同类名获取首个节点, 
//params:根据标签名称获取dom 多个标签名相同获取首个标签节点
document.querySelector("#params");

document.querySelectorAll("");

个人比较喜欢用第四种，当然如果你需要引入jQuery的话，jQuery有更方便的获取dom的方式，比如：

//#params:根据id获取dom, .params:根据class名获取dom
$("params")

以上就是比较常用的获取dom的方式，那么接下来是操作dom

// 比如html中有一个id 为show的元素
var show = document.querySelector("#show");
    console.log(show.innerHTML) // 获取该节点下的文本及标签
    show.innerHTML = "你好，我是dom"// 当然这里面也可以放置标签
    show.innerHTML ="<p id='showChild' οnclick='changeColor(this)'>点我试试</p>"

    function changeColor(dom){
    
    
        console.log(dom);
        dom.style.background = 'red';
    }

    console.log(show.textContent); // 获取里面的文本

    // 当然你也可以动态的创建节点并添加至dom中
    var virDom = document.createElement('div');
    console.log(virDom);
    virDom.setAttribute("class",'show');
    virDom.textContent = "你好我是dom";
    show.appendChild(virDom);

    // 你能够通过改变dom的className 实现某些简单的动画。
    virDom.className = "red";

    // 删除子节点,就好像他/她从未来过一样。
    show.removeChild(virDom);
    var showChild = document.querySelector("#showChild");
    
    // 还可以让她指定插入到某个节点之前那(要插入的节点,基准节点)
    show.insertBefore(virDom,showChild);

上面就是基本dom操作演示了。记录到此dom也就差不多了，剩下的就是多多练习。