JavaScript Dom操作-增删改节点1

一、Dom操作

文档对象模型DOM：一套定义、规范、准则为了能够让程序JavaScript去操作页面中的元素节点而定义的一套标准

DOM会把文档看作是一棵树，页面中的每个元素就是树上的一个一个节点；同时DOM定义了很多方法、属性等来操作这棵树中的每一个元素（节点）——每个节点称为DOM节点。

1. 节点.children —— (没有兼容性问题：只包含元素节点) 获取第一级子元素

childNodes 获取第一级子元素有兼容性问题（标准浏览器文本和元素视为节点，非标准浏览器只把元素视为节点），nodeType属性判断：

元素节点 ELEMENT_NODE：1

属性节点 ATTRIBUTE_NODE ：2

文本节点 TEXT_NODE：3

2 firstChild \ firstElementChild 获取子元素里的最后一个

（1）元素.firstChild：只读属性第一个子节点（有兼容性问题）。标准下：firstChild会包含文本类型的节点；非标准下：只包含元素节点

（2）元素.firstElementChild：只读属性（有兼容性问题）。标准下获取第一个元素类型节点的子节点；非标准浏览器不支持

//兼容性写法:

if (元素.firstElementChild){

元素.firstElementChild.style.background = 'red';

} else {

元素.firstChild.style.background = 'red';

}

//兼容性写法:

var oFirst = 元素.firstElementChild || 元素.firstChild; //兼容写法

//兼容性写法:

var oFirst = 元素.children[0]

3 元素.lastElementChild || 元素.lastChild 获取子元素里的第一个

var oLast = 元素.lastElementChild || 元素.lastChild ;

Var oLast =children[元素.length-1]

4. 元素.nextElementSibling || 元素.nextSibling

5元素.parentNode： 只读, 属性 ,只有一个, 当前节点的父级节点

6元素.attributes

元素.attributes：只读属性属性列表集合

7元素.offsetParent：只读属性离当前元素最近的一个有定位的父节点

8Dom操作：

（1）document.createElement(标签名); 注意：

动态创建元素不会直接显示在页面当中，前面必须是document，不能是其他

（2）父级.appendChild(要追加的元素) //在指定父级子节点最后一个后面追加子元素

（3）父级.insertBefore(新的元素，指定的已有子元素);

在父级的指定子元素前面插入一个新元素(注意：先判断如果第二个参数的节点是否存在)

（4）元素.cloneNode(true) 或者元素.cloneNode(false) //深克隆（负值标签、标签属性、标签里面内容）浅克隆（负值标签、标签属性不复制标签里面内容）

（5）父级.removeChild(已有子元素);

（6）父级.replaceChild(新的元素节点，原有元素节点);

二、实例

JavaScript Dom操作-增删改节点1

Html代码：

<body>


<input class="btn" type="button" value="增加一条，放在前面"/>

<input class="btn"  type="button" value="删除最后一条"/>

<input  class="btn"  type="button" value="修改最后一条"/>

<input  class="btn"  type="button" value="复制第一条"/>


<input  class="btn"  type="button" value="设置样式"/>
<table border="1" cellspacing="0" cellpadding="10" >
    <thead>
    <tr>
        <th>书籍</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody id="bookCon">
    <tr>
        <td id="tr1">第八条猎狗</td>
        <td>¥22</td>
    </tr>
    <tr>
        <td>不抱怨的世界</td>
        <td>¥22</td>
    </tr>
    </tbody>
</table>

</body>

JavaScript Dom操作：

 var arrInputBtn = document.getElementsByClassName( "btn") ;
    var bookCon =  document.getElementsByTagName("tbody")[0] ;

    //add    增加一条，放在倒数第二的位置即放在length-1的前面
    arrInputBtn[0].onclick = function(){
        var newTr =document.createElement("tr");
        newTr.innerHTML="  <td>活着</td>   <td>¥22</td> " ;
        bookCon.insertBefore( newTr,  bookCon.children[0] )
    }

    //del 删除最后一个即删除tr下标为length-1
    arrInputBtn[1].onclick = function(){
        if( bookCon.children[bookCon.children.length-1] )
            bookCon.removeChild(  bookCon.children[ bookCon.children.length -1]  )
    }

    //修改最后一个 ：下标为length-1
    arrInputBtn[2].onclick = function(){
        if( bookCon.children[bookCon.children.length-1] )
        {
            var newTr = document.createElement("tr");
            newTr.innerHTML="  <td>走着走着就老了</td>   <td>¥22</td> " ;
            bookCon.replaceChild( newTr   , bookCon.children[ bookCon.children.length -1]  )
        }
    }

    //复制第一条 下标为0
    arrInputBtn[3].onclick = function(){
        if  ( bookCon.children[0] ){
            var newTr =  bookCon.children[0].cloneNode( true ) ;
            bookCon.insertBefore( newTr,  bookCon.children[bookCon.children.length-1] )
        }

    }

    //样式
    var colors=["#faa","orange","#ffa","greenyellow","#ccc","#949","#fff"];
    var i =0;
    arrInputBtn[4].onclick = function(){
        i%=colors.length ;
        document.getElementsByTagName("table")[0].children[0].children[0].style.background=colors[i];
        i++;
    }

秒客网

JavaScript Dom操作-增删改节点1

6元素.attributes

相关文章