JavaScript Dom操作-增删改节点1

时间:2021-02-15 14:46:03

一、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++;
    }