DOM模型材料与基本操作

 

　　DOM是对HTML布局结构的映射模型，要想按照自己的想法去构建它，原材料与基本步骤是不可少的，有了这些，剩下的就交给你的脑子去天马行空了~

 

---

1.节点类型

　　元素节点（element node），文本节点（text node），属性节点（attribute node），文档节点（document node）......

 

---

2.获取元素（原材料）

　　（1）.根据ID：getElementById('[id名]')

　　（2）.根据标签名：getElementsByTagName('[标签名]')     ——返回一种名为NodeList的DOM对象

　　（3）.根据class：getElementsByClassName('[类名]')    ——返回NodeList

　　　　　　　　　　（ IE9及以上，ff3.0及以上，chrome4.0及以上，opera9.5及以上，Safari3.1及以上支持 ）

　　（4）.根据CSS选择器：querySelectorAll('[选择器名]')    ——返回NodeList

　　　　　　　　　　　　　querySelector('[选择器名]')　　——返回第一个匹配的元素

　　　　　　　　　　　　　（ IE8及以上，ff3.5及以上，chrome1及以上，opera10及以上，Safari3.2及以上支持 ）

　　（5）.从NodeList中获取一个节点：.item([节点下标值])  eg. document.getElementsByTagName('p').item(0);

　　　　　　　　　　　　　　　　　　 使用数组下标    eg.document.getElementsByTagName('p')[0];

 

---

3.处理属性节点

　　（1）.getAttribute('[属性名]')    //获取

　　（2）.setAttribute('[属性名]','[属性值]')    //设置 （取代或创建）

　　（3）.removeAttribute('[属性名]')   //移除

　　（4）.hasAttribute('[属性名]')    //判断拥有

 

---

4.处理文本节点

　　innerHTML   //重置html代码片段

 

---

5.遍历DOM

　　（1）.parentNode

　　（2）.previousSibling

　　（3）.nextSibling

　　（4）.firstChild

　　（5）.lastChild

 

---

6.动态添加删除DOM

　　（1）.createElement()

　　（2）.createTextNode()

　　（3）.appendChild()

　　（4）.removeChild()

  　　一个过程：createElement()->createTextNode()->appendChild()     //创建