JS总结——DOM节点

DOM节点

类型

最常用的有三种，分别是元素节点、文本节点以及属性节点。

元素节点：可以理解为HTML标签属性节点：可以理解为html标签里的属性文本节点：就是一对标签之间的内容。文档节点：其实就是document

注意：

还有一个叫做空白文本节点的东西！！！（IE9以下没这个问题，其余浏览器都有）

如果在写html标签时，你使用了回车进行换行，它存在于上一个闭合标签到下一个开始标签。

获取节点

1. getElementById （IE8使用时，name不要和id同名）

2. getElementsByTagName (IE8不支持)

3. getElementsByClassName(IE8不支持)

节点属性

1. nodeType

    元素节点 ：nodeType == 1    属性节点 ：nodeType == 2    文本节点 ：nodeType == 3    文档节点 ：nodeType == 9   

2. nodeName

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

3. nodeValue

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

访问节点

1. 访问子节点

childNodes

语法：

元素节点.childNodes

实例：

<div>  javascript    <p>node</p>  <div>jQuery</div>  <h5>Bootstrap</h5></div>var x=document.getElementsByTagName("div")[0].childNodes;for(var i = 0; i < x.length; i++){    document.write("第"+(i+1)+"个节点的值是："+x[i].nodeValue+"<br  />");     document.write("第"+(i+1)+"个节点的名称是："+x[i].nodeName+"<br  />");     document.write("第"+(i+1)+"个节点的属性是："+x[i].nodeType+"<br  />");    document.write("<br  />");}

使用childNodes一定要注意处理空白节点！！！！

添加nodeType==1进行判断，只选择中元素节点。

children

使用children同样可以访问到子节点，而且不包括文本节点！！！

实例：

<ul id = "ul1">    <li></li>    <li></li></ul>var oUl = document.getElementById("ul1");alert(oUl.children.length);  // 2 

2. 访问父节点

parentNode

语法：

元素节点.parentNode

实例：

点击a标签，隐藏父元素。

<ul id = "ul1">    <li>这是第一个 <a href = "#">隐藏</a> </li>    <li>这是第二个 <a href = "#">隐藏</a> </li>    <li>这是第三个 <a href = "#">隐藏</a> </li></ul>var addA = document.getElementsByTagName('a');for(var i = 0; i < addA.length; i++){    addA[i].onclick = function (){        this.parentNode.style.display = "none";    };}

3. 访问子节点首个和最后一个

语法：

首个父节点.firstChild           IE6-8父节点.firstElementChild    IE9+、现代浏览器   最后一个父节点.lastChild           IE6-8  父节点.lastElementChild    IE9+、现代浏览器   

4. 访问兄弟节点

语法：

下一个节点.nextSibling           IE6-8节点.nextElementSibling    IE9+、现代浏览器   前一个节点.previousSibling           IE6-8  节点.previousElementSibling    IE9+、现代浏览器   

DOM操作元素

操作属性

    getAttribute( "属性名"，“属性值”)      获取     getAttribute( "属性名"，"属性值")      设置    removeAttribute( "属性名"，"属性值")   删除

操作元素

1. 创建

语法：

createElement('标签名')             创建父节点.appendChild(子节点)           追加到末尾处父节点.insertBefore(子节点,在谁之前)  插入到指定位置

它们要配合起来用，才能在页面显示。

实例1：

点击按钮，添加li。

<input id = "btn1" type = "button" value = "创建"><ul id = "ul1"></ul>var oBtn = document.getElementById("btn1");var  oUl = document.getElementById("ul1");oBtn.onclick = function(){    var oLi = document.createElement("li");    oUl.appendChild(oLi);}

实例2：

如果已有li，则通过insertBefore插入；
如果没有，则通过appendChild添加。

<input id = "btn1" type = "button" value = "创建"><ul id = "ul1"></ul>var oBtn = document.getElementById("btn1");var  oUl = document.getElementById("ul1");oBtn.onclick = function(){    var oLi = document.createElement("li");    var aLi = oUl.getElementByTagName("li");    if(aLi.length > 0){        oUl.insertBefore(oLi, aLi[0]);    }else{        oUl.appendChild(oLi);    }}

2. 删除

语法：

父节点.removeChild(子节点)

实例：

<ul id = "ul1">    <li>这是第一个 <a href = "#">删除</a> </li>    <li>这是第二个 <a href = "#">删除</a> </li>    <li>这是第三个 <a href = "#">删除</a> </li></ul>var aA = document.getElementsByTagName("a");var oUl = document.getElementById("ul1");for(var i = 0; i < aA.length; i++){    aA[i].onclick = function(){        oUl.removeChild(this.parentNode);    }}

文档碎片

ps：对现代浏览器来说，提高不了什么性能，反倒有可能负优化，仅作了解之用。

每次创建一个元素，不要急着马上把其直接添加到页面，因为添加元素太多的话，有可能需要渲染几次。

我们可以先把这些元素加到文档碎片当中，最后一次性加到页面中去。


实例：

var oUl = document。getElmentById("ul1");//注意这里,创建文档碎片var oFrag = document.createDocumentFragment();for(var i = 0; i < 10000; i++){    var oLi = document.createElement("li");    //添加到文档碎片    oFrag.appendChild(oLi);//一次性添加完毕oUl.append(oFrag);