JavaScript节点操作

JavaScript节点操作

节点概述

网页中所有的内容都是节点(标签，属性，文本，注释)，在Dom中，节点使用node来表示

HTML DOM树种的所有节点都可以通过js进行访问，所有的节点都可以被修改，也可以创建或者删除

节点拥有 nodeType(节点类型)，nodeName（节点名称），nodeValue(节点值) 这三个基本属性

• 元素节点 nodeType 值为1
• 属性节点 nodeType 值为2
• 文本节点 nodeType 值为3(文本节点包含文字，空格，换行等)

注意:实际开发中，节点操作主要操作的是元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系，创建是父子兄层级关系

父级节点

node.parentNode
//parentNode 属性可以返回某节点的父节点，是最近的一个父节点
//如果指定的节点没有父节点返回null

子节点

所有子节点

parentNode.childNodes (标准)   返回包含指定节点的子节点的集合，该集合为即时更新的集合

注意:返回值里面包含思路所有的子节点，有元素节点，文本节点等
如果只想获取到里面的元素节点，需要专门处理

子元素节点

parentNode.children (非标准)
parentNode.children是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回

虽然children 是一个非标准。得到了各个浏览器的支持

第1个子节点

parentNode.firstChild 返回第一个子节点，找不到返回null，也是包含了所有的节点

最后1个子节点

parentNode.lastChild返回最后一个子节点，找不到返回null，也是包含了所有的节点

第1个子元素节点

parentNode.firstElementChild  返回第一个子元素节点，找不到返回null

最后1个子元素节点

parentNode.lastElementChild返回最后一个子元素节点，找不到返回null

注意：firstElementChild 和lastElementChild 这两个方法有兼容性问题，IE9以上才支持

实际开发中firstChild和lastChild 包含其他节点，操作不方便，firstElementChild 和lastElementChild又有兼容性问题，如何操作呢

解决方案：

如果想要第一个子元素节点 可以使用  parentNode.children[0]
如果想要最后一个子元素节点  parentNode.children[parentNode.children.length-1]

兄弟节点

下一个兄弟节点

node.nextSibling  包含元素节点或者文本节点

上一个兄弟节点

node.previousSibling包含元素节点或者文本节点

下一个兄弟元素节点

node.nextElementSibling  只有元素节点

上一个兄弟元素节点

node.previousElementSibling只有元素节点

兼容问题

 function getNextElementSibling(element) {
        var el = element
        while ((el = el.nextSibling)) {
          if (el.nodeType === 1) {
            return el
          }
        }
        return null
      }

创建节点

document.createElement("tagName")
document.createElement方法创建由tagName指定的HTML元素，这些元素原先不存在
是根据我们的需求动态生成的，  称为动态创建元素节点

添加节点

node.appendChild(child)

node.appendChild 方法 将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素


node.insertBefore()
node.insertBefore 将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素

删除节点

node.removeChild（）  从node节点中删除一个子节点，返回删除的节点

留言板案例

  
    
    
    
    
  
  
    
    发布
    


    
  

动态生成表格案例

  
    
    
    
    
    
  
  
    

      

        

          
姓名
          
科目
          
成绩
          
操作
        
      
      

    

    
  

  

复制节点

node.cloneNode() 返回调用该方法的节点的一个副本，称为克隆节点

**注意：**node.cloneNode() 括号里是空或者false 浅拷贝 只复制标签不复制里面的内容

​ 括号里为true 深拷贝 既赋值标签又复制里面的内容

创建元素的三种方式

document.write() 直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘

element.innerHTML是将内容写入某个dom节点，不会导致页面全部重绘

document.createElement() 创建多个元素效率会低，但是结构更清晰

注意:innerHTML效率要不createElement的高

Dom的总结

文档对象模型(Document Object Model 简称Dom)是处理可扩展标记语言的标准编程接口

W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式.

关于dom操作，主要针对的是元素的操作， 主要有创建，增，删，改，查，属性操作，事件操作

创建
 1：document.write
 2:innerHTML
 3:createElement
 
增加
1：appendChild
2：innerBefore
删
removeChild
改
 主要修改dom的元素属性，dom元素的内容，属性，表单的值
   修改元素的属性  src  href title
   修改普通元素内容  innerHTML  innerText
   修改表单元素   value  type  disabled
   修改元素样式    style  className
查 
  获取查询dom的元素
  1：getElementById  getElementsByTagName
  2：querySelector querySelectorAll
  3：parentNode  children  previousElementSibling   nextElementSibling
属性操作
  自定义属性
  setAttribute  设置dom的属性值
  getAttribute  获取dom的属性值
  removeAttribute  移除属性