原生JS操作DOM对象

查看节点

访问指定节点的方法：

通过id

getElementById()

<div id="hei">嘿~</div>

例如想获取这个div

var div =  document.getElementById("hei");

直接访问id就可以实现

通过name

getElementsByName()

<div name="hei">嘿~</div>

还可以通过name获取

var div =  document.getElementsByName("hei");

还请注意这里由于获取的是name，所以是getElementsByName，因为id是唯一的，但name返回的是所有name为指定字符的数组。

通过标签名

getElementsByTagName()

通过标签名获取与通过name一样，返回的是数组，是所有标签名为指定字符的元素。

<div>嘿~</div>

这里不需要指定id或name

var div =  document.getElementsByTagName("div");

直接获取网页上所有div

实际开发中通常使用第一种直接通过id访问节点

查看/修改属性节点

修改（设置）

setAttribute("属性名","属性值")

setAttribute的应用场景很多，可以根据需求来设置获取属性，也可以用属性来传递值。

div.setAttribute("new","yoho~");

查看

getAttribute("属性名")

var a = div.getAttribute("new");

根据层次查找节点

如果只希望访问父节点或子节点，又不知道它的id、name、tagname的时候，可以通过寻找层次关系查找节点。

孩子节点

childNodes 以ul为例

    <ul id = "u">
        <li>fir</li>
        <li>sec</li>
        <li>thir</li>
    </ul>

先获取ul节点，在通过它来访问他的孩子节点。

        var ul = document.getElementById("u");
        var liList = ul.childNodes;
        alert(liList);

返回的是对象数组，即父亲节点下所有的孩子节点，可以用遍历数组的方式遍历它所有的孩子。

父亲节点

parentNode

        var ul = document.getElementById("u");
        //liList[0]是指liList的第一个孩子
        var parent = liList[0].parentNode;
        alert(parent == ul?"ul是父亲节点":"不是父亲节点");

创建和增加节点

创建节点

createElement("标签名")

增加节点

appendChild(变量名)

插入节点包括创建和增加两部分，先用creatElement创建出节点，再用appendChild插入到父亲节点下。

        var ul = document.getElementById("u");
        var four = document.createElement("li");
        four.innerHTML = "我是创建出来滴~";
        ul.appendChild(four);

删除节点

removeChild() 先找到要删除的节点和它的父节点，在父节点的角度删除子节点。

        ul.removeChild(liList[1]);

其中的text节点是空格，因为HTML格式如下： 浏览器会把空格识别成dom的文本对象

浏览器执行HTML代码创建节点的过程

• 浏览器在执行html代码的时候，首先将html代码解析成为一个DOM树
• 浏览器会根据DOM树的结构创建相关的节点对象。每个节点对象都包含属性和接口。节点对象之间存在父子关系。
• 浏览器会为DOM树创建一个根节点称作文档节点。文档节点可以访问整棵DOM树。
• 浏览器通过DOM树的各个节点对象的属性来布局，这样才能显示出一个精美的html页面来。
• 页面显示后，通过在页面上配置事件来执行对应的javascript函数，在javascript中调用文档树节点的API接口，来实现网页的动态效果。

DOM 与 html DOM的关系

• DOM 用于遍历或修改各种结构化的文档，html也是这种结构化的文档。
• 各浏览器的供应商都遵循DOM的标准接口，提供API（例如增删改查html文档上的元素）
• 但是DOM的标准接口应用在html上，不能全部满足开发者的需求，或使用起来不方便。因此各浏览器厂商又针对html的各个标签做了单独的封装，扩充了API，扩充的部分可以称为html dom 或DHTML。
• 所以如果采用DOM接口进行开发，效率低，但是各浏览器兼容，使用html dom效率高，但是程序不兼容。

html 遵照XML的编写格式，但是自身包含有语义的标签，不同标签有各自的使用场景，虽然使用DOM接口可以完成编程，但是增大了实现难度，于是w3c组织公布了HTML DOM 规范，该规范中明确了每一个html元素的接口和属性，浏览器厂商也都按照此规范进行浏览器的开发（基本上可以兼容），但该规范却不能应用于其他的xml文档解析。