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( "属性名"，“属性值”)      获取 

    setAttribute( "属性名"，"属性值")      设置

    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);