DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。
dom.gif

1.节点类型：

节点类型 说明 值
元素节点 每个HTML标签都是一个元素节点，如
、

 1
属性节点 元素节点的属性，如id，class, name 2
文本节点 元素节点或属性节点中的文本内容（包括空白和换行） 3
注释节点 表示文档注释，形式为 8
文档节点 表示整个文档（DOM 树的根节点，即document） 9

在DOM里有许多不同类型的节点。每种节点类型都有一个关联的数值，保存在属性nodeType里面

1.语法：nodeObject.nodeType
  1.         <div id="add"></div>
  2.         <script>
  3.               var  add = document.getElementById("add");
  4.               console.log(add.nodeType);
  5.          </script>

2.childNodes 属性

每个节点都有一个childNodes 属性。这个类似数组的属性包含了当前节点全部直接子节点的集合，我们可以访问这些子节点的信息。

语法:nodeObject.childNodes
  1. <body> 
  2. <div id="demo">
  3.         <div>子节点一</div>
  4.         <div>子节点二</div>
  5.         <div>子节点三</div>
  6.     </div>
  7. </body>
  8. <script>
  9.     var demo = document.getElementById("demo");
  10.     console.log(demo.childNodes);   //[text, div, text, div, text, div, text]
  11. </script>

3.firstChild 和 lastChild

获取第一个元素和最后一个元素

语法:nodeObject.firstChild/lastChild
  1. <body>
  2.     <div id="demo">
  3.         <div>子节点一</div>
  4.         <div>子节点二</div>
  5.         <div>子节点三</div>
  6.     </div>
  7. </body>
  8. <script>
  9.     var demo = document.getElementById("demo");
  10.     console.log("第一个子节点" + demo.firstChild);  //第一个子节点[object Text]
  11.     console.log("最后一个子节点" + demo.lastChild); //最后一个子节点[object Text]
  12. </script>

4.parentNode

获取已知节点的父节点

  1. <body>
  2.     <div id="demo"></div>
  3. </body>
  4. <script>
  5.     var demo = document.getElementById("demo");
  6.     console.log("父节点：" + demo.parentNode);   //父节点：[object HTMLBodyElement]
  7. </script>

5.nextSibling 和 previousSibling

兄弟节点是指具有相同父节点的那些节点。
previousSibling来获取上一个兄弟节点，nextSibling来获取下一个兄弟节点，如果不存在相应的节点，就返回 null。

6.节点名称

nodeName属性以字符串形式返回节点的名称

7.节点值

nodeValue属性返回保存在节点里的值，我们一般用它返回文本节点里的内容

获取元素

通过ID获取元素 document.getElementById(id)

通过标签名获取元素 document.getElementByTagName(标签名)

通过类获取元素 document.getElementByClassName(类名）

在HTML5里面新增了

1.document.querySelector(“ “) // 可以获取class id 标签 可以看成是之前版本的结合

  1.         var appa = document.querySelector("#add");  //通过id获取
  2.     var box2 = document.querySelector(".box");  //通过class获取
  3.     var li3 = document.querySelector("li");     //通过标签名获取

2.document.querySelectorAll(“ “) //获得一组元素

  1.  var uls = document.querySelectorAll("ul li");   //获取ul里面所有的li

getAttribute

用来返回指定属性名的属性值

  1. 语法：  
  2.     object.getAttribute(属性名)
  4. <body>
  5.     <div id="demo" title="文本"> </div>
  6. </body>
  7. <script>
  8.     var demo = document.getElementById("demo");
  9.     alert(demo.getAttribute("title"));   //文本
  10. </script>

setAttribute

修改属性节点的值做出修改。
语法： object.setAttribute(属性名，属性值）

  1. 语法：    
  2.     object.setAttribute(属性名，属性值）
  3. <body>
  4.     <div id="demo"></div>
  5. </body>
  6. <script>
  7.     var demo = document.getElementById("demo");
  8.     demo.setAttribute("title", "Hello World");
  9.     alert(demo.getAttribute("title"));   //Hello World
  10. </script>

节点操作

1.创建节点

createElement()创建任何类型的标准HTML元素

  1. var div =document.createElement("div");

createTextNode（）创建HTML元素里面需要的文本内容

  1. var text = document.createTextNode("我是被创建的文本内容");

2.插入节点

appendChild（）可以向指定节点添加新的节点，并将添加的节点放到最后。
insertBefore ( ) 指定一个子节点，然后把新节点插入到它前面
语法：
父节点.insertBefore(要插入的新节点， 当前节点)

  1. <body>
  2. <ul id="uls">
  3.         <li>我是第1个li</li>
  4.         <li>我是第2个li</li>
  5.         <li>我是第3个li</li>
  6.     </ul>
  7. </body>
  8. <script>
  9.     var uls = document.getElementById("uls");
  10.     var li = document.createElement("li");
  11.     var text = document.createTextNode("我是被新创建的li");
  12.     uls.appendChild(li);
  13.     li.appendChild(text);
  14. </script>

![%G68LJ%XV}VHX34~HL6W{O.png
效果图

3.替换节点

replaceChild( ) 实现替换节点
语法：
父节点.replaceChild(新节点 ，旧节点)

  1. <body>
  2. <ul id="uls">
  3.         <li id="li1">我是第1个li</li>
  4.         <li>我是第2个li</li>
  5.         <li>我是第3个li</li>
  6.     </ul>
  7. </body>
  8. <script>
  9.     var uls = document.getElementById("uls");
  10.     var li1 = document.getElementById("li1");
  11.     var li = document.createElement("li");
  12.     var text = document.createTextNode("我是被替换的li");
  13.     uls.replaceChild(li, li1);
  14.     li.appendChild(text);
  15. </script>

VQ2IJG%8B3@6RTUNYQ$(PKP.png

4.删除节点

removeChild() 删除父节点下的某个子节点

  1. <body>
  2. <ul id="uls">
  3.         <li id="li1">我是第1个li</li>
  4.         <li>我是第2个li</li>
  5.         <li>我是第3个li</li>
  6.     </ul>
  7. </body>
  8. <script>
  9.     var uls = document.getElementById("uls");
  10.     var li1 = document.getElementById("li1");
  11.     uls.removeChild(li1);
  12. </script>

![V`[~KG{D8L4YSSKJK}R(SP.png

5.复制节点

cloneNode( )实现复制节点

  1. 语法：
  2.     obj.cloneNode(bool)
  3.  参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
  4.  1.1或true : 表示复制节点本身以及复制该节点下的所有子节点
  5.  2.0或false：表示仅仅复制节点本身，不复制该节点下的子节点。
  7. <body>
  8.      <ul id="uls">
  9.         <li>我是第1个li</li>
  10.         <li>我是第2个li</li>
  11.         <li>我是第3个li</li>
  12.     </ul>
  13. </body>
  14. <script>
  15.     var uls = document.getElementById("uls");
  16.     var clone = uls.cloneNode(true);
  17.     document.body.appendChild(clone);
  18. </script>

![4OE~TT5%`V(P2CY)5%(E)R.png

6.innerHTML 和 innerText

声明元素含有的HTML文本 和 文本内容 

  1. <body>
  2. <div id="p1"><strong>JavaScript</strong></div>
  3. </body>
  4. <script>
  5.     var p1 = document.getElementById("p1");
  6.     alert("innerHTML: " + p1.innerHTML + "\n"   //innerHTML:<strong>JavaScript</strong>
  7.           + "innerText:" + p1.innerText);   //innerText:JavaScript
  8. </script>