DOM基础

DOM 是 Document Object Model（文档对象模型）的缩写。

一、DOM 节点

1. 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
   （1）整个文档是一个文档节点
   （2）每个 HTML 元素是元素节点（HTMLElement）
   （3）HTML 元素内的文本是文本节点（textNode）
   （4）每个 HTML 属性是属性节点（attribute）
   （5）注释是注释节点
   方法：是您能够执行的动作（比如添加或修改元素）。
   属性：是您能够获取或设置的值（比如节点的名称或内容）。

2. 节点访问
   （1）节点类型 childNodes NodeList
   访问方式：

   nl[index]
   nl.item(index)      
   

   （2）元素类型 children HtmlCollection
   访问方式：

   hc[index]
   hc["name"]
   hc["id"]
   hc.item(index)      
   hc.item("name")
   hc.item("id")       
   hc.namedItem("name")
   hc.namedItem("id")      
   hc.name     
   hc.id
   

3. 对属性操作的方法
   （1）获取属性的方式：

   attValue obj.getAttribute(‘attName’);获取当前节点指定属性的值。
   

   （2）设定属性的方式：(修改和增加)

   obj.setAttribute(‘attName’,’attValue’):设置当前节点指定属性的值。
   obj.attName = “attValue” 
   var attValue = obj.attName;
   

   （3）删除属性的方式：

   obj.removeAttribute(‘attName’);删除当前节点指定属性的值。
   

   （4）设定或获取CSS属性的方式：

   obj.style.cssAttribute：设置或获取当前元素的css属性值。cssAttribute取消了-，采用换字母大写的方式。
   

   ex:

   //获取style中设置的某种样式，没有设置的话返回null
       var fs = ch1.style.fontSize;
       var bgc = ch1.style.backgroundColor;
   //获取style中设置的全部样式
       var st = ch1.getAttribute("style");
   //设置style中的样式
       ch1.style.fontSize = "100px";
       ch1.style.backgroundColor = "red";
   //用新的样式替代style中设定的样式
       ch1.setAttribute("style", "font-size:10px; background-color:yellow");
   //获取class
       var cn = ch1.className;
   //设置class
       ch1.className = "";
   

二、DOM属性

1. nodeName 属性
   nodeName 属性规定节点的名称。
   nodeName 是只读的

   元素节点的 nodeName 与标签名相同
   属性节点的 nodeName 与属性名相同
   文本节点的 nodeName 始终是 #text
   文档节点的 nodeName 始终是 #document
   

   注释：nodeName 始终包含 HTML 元素的大写字母标签名。

2. nodeValue 属性
   nodeValue 属性规定节点的值。

   元素节点的 nodeValue 是 undefined 或 null
   文本节点的 nodeValue 是文本本身
   属性节点的 nodeValue 是属性值
   

三、节点增删改

1. 添加
   （1）appendChild（newNode）添加到父元素下最后子节点
   parentNode.appendChild(newNode)

   eg.

   <div id="d1">
   <p id="p1">This is a paragraph.</p>
   <p id="p2">This is another paragraph.</p>
   </div>
   
   <script>
   var para=document.createElement("p");
   var node=document.createTextNode("This is new.");
   para.appendChild(node);
   
   var element=document.getElementById("d1");
   element.appendChild(para);
   </script>
   

   （2）insertBefore（newNode，oldNode）添加到指定元素之前
   parentNode.insertBefore(newNode, oldNode)

2. 删除
   parentNode.removeChild(oldNode)
   【提示】：能否在不引用父元素的情况下删除某个元素？

   很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。
   这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
   var child=document.getElementById("p1");
   child.parentNode.removeChild(child);
   

3. 修改
   parentNode.replaceChild(newNode, oldNode)

四、HTML DOM

1. html属性

   innerHTML：设置或获取当前元素内的html。
   innerText：设置或获取当前元素内的文字内容。
   【outerHTML：获取元素的外部html】。