js之节点操作，为什么要学习节点操作

获取元素的方式

1.DOM方式

逻辑性不强，繁琐

woshi1
    woshispan
    

        
我是Li
        
我是Li
        
我是Li
        
我是Li
    
    

        
    

我们要一个个获取 比如获取var ul = document.querarySelector('div'),然后获取ul里面的li,我们还要写var lis = ul.querySelectorAll('li'),比较繁琐

2.利用节点的层次关系，父子兄

逻辑性强，但是兼容性较差

节点

页面中的所有内容都是节点

节点至少有nodeType(节点类型）、nodeName(节点名称）、nodeValue(节点值）

元素节点nodeType为1，属性节点2，内容节点3，我们主要操作元素节点。

节点操作-父节点parentNode

返回最近的父节点，找不到返回null

节点操作-子节点

childNodes得到所有的(亲）子节点，包括元素节点和文本节点属性节点等

  

        
woshi1i
        
woshi1i
        
woshi1i
        
woshi1i123
    
  // Dom
        var ul = document.querySelector('ul');
        // var lis = document.querySelectorAll('li');//之前
        //子节点 childNodes得到所有的子节点，包含元素节点和文本节点等等
        console.log(ul.childNodes);

 

 

如果只想获得元素节点，需要专门处理(通过判断nodeType是否等于1），所以一般不提倡使用childNodes。

只想获得元素节点，用children(非标准），常用的

ul.children

节点操作-第一个子元素和最后一个子元素 

firstChild第一个子节点不管是什么节点，firstElementChild和lastElementChild可以获得第一个子元素节点和最后一个子元素节点，但是都具有兼容性。

实际开发中，我们常用ul.children[0]来返回第一个子元素节点，ul.children[ul.children.length-1]最后一个子元素节点，这样没有兼容性。

节点操作-兄弟节点

nextSibling下一个兄弟节点（所有都包括）

previousSibling，nextElementSibling，previousSibling都有兼容性问题

节点操作-创建和添加节点

1.document.createElement('tagName')

2.添加到哪里去？

node.appendChild(child)，node后面追加元素。node.insertBefore(child，指定元素)

node是父级，child是子级

    

        
123
    
    

节点操作-删除节点

node.removeChild(child)

阻止a链接跳转，href="javascript:;"或者javascript:void(0)

案例：简单版留言板

    
    发布
    

        
    
    

案例：动态生成表格

    
    
    
    
    



    
动态生成的 不需要有
            

        

            

                
姓名
                
科目
                
成绩
                
操作