05-节点操作

节点操作

1.为什么要熟悉结点操作

• 利用节点层级关系获取元素
• 逻辑性更强，但是兼容性较差

2.什么是节点

• 网页中的所有内容都是节点（标签，属性，文本，注释的等），在DOM中，节点使用node表示。

• 节点的三个基本属性

  • nodeType（节点类型）
    • 元素节点 nodeType的值为1
    • 属性节点nodeType的值为2
    • 文本节点nodeType的值为3（包括文字，空格，换行等）
  • nodeName（节点名称）
  • nodeValue（节点值）

3.节点层次

• 父节点

  • node.parentNode
  • 此属性返回某节点的父节点，如果没有就返回null

• 子节点

  • node.childNodes（标准）

    • 此属性会返回一个伪数组，包括了元素节点（nodeType值：1）和文本节点（nodeType值：3）。如果没有找到就返回空的伪数组

  • node.children（非标准）----已得到各大浏览器支持，常用

    • 只读属性，返回所有的元素节点。也是一个伪数组，如果没有找到则返回空的伪数组

  • node.firstChild 第一个孩子节点

    • 包括了文本节点在内

  • node.firstElementChild

    • 仅仅是元素节点
    • 但兼容问题

  • node.lastChild 最后一个孩子节点

    • 包括了文本节点在内

  • node.lastElementChild

    • 仅仅是元素节点
    • 但兼容有问题

  注意：实际开发中，为了解决兼容性和文本节点的麻烦，采取下面的写法获得首个孩子节点和末尾孩子节点

  var parentNodes = document.querySelector('.myDiv')
  var fistChild = parentNodes.children[0]//获得第一个孩子节点
  var lastChild = parentNodes.children[parentNodes.children.length - 1]//获得最后一个孩子节点
  

• 兄弟节点

  • node.nextSibling

    • 返回当前元素的下一个兄弟节点，如果找不到则返回null，同样的，也包括了文本节点

  • node.nextElementSibling

    • 同上，但只返回元素节点，且有兼容性问题，ie9以上才支持

  • node,previousSibling 上一个兄弟节点

    • 返回当前元素的上一个兄弟节点，如果找不到则返回null，同样的，也包括了文本节点

  • node.previousElementSibling

    • 同上，但只返回元素节点，且有兼容性问题，ie9以上才支持

4.创建与添加节点

• 创建节点

  • document.createElement('tagName') —有返回值

    • tagName是指需要由上述方法动态创建的标签（元素）节点

  • document.createTextNode('text') –-有返回值

    • text是指需要由上述方法动态创建的文本节点

• 添加节点

  • node.appendChild(child) ----添加到最后面
    • node代表父级节点，child代表子级节点(也是新创建的那个节点)
  • node.insertBefore(child,指定元素) ----添加到最前面
    • node代表父级节点，child代表子级节点(也是新创建的那个节点)，制定元素是node的某个子节点，也就是child要插入之前的那个节点

5.删除节点

• 删除子节点

  • node.removeChild(child) —有返回值
    • node代表父级节点，child代表要被删除的子级节点，并且该方法会返回被删除的子节点

6.复制节点

• node.cloneNode(true/false) —有返回值
  • node代表要被复制的节点
  • 括号内如果是空或者是false，表示浅拷贝，只复制标签(元素)，不复制里面的内容。
  • 括号内如果是true，表示深拷贝，既复制标签(元素)，也复制里面的内容。

7.三种动态创建元素的区别

• document.write()

• element.innerHTML

• document.createElement()

  区别：

• document.write()是直接将内容写入页面的内容流，但是当文档流执行完毕后再调用该方法会导致页面全部重绘。

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

• element.innerHTML与document.createElement()性能比较

  • 前者采用拼接字符串的形式创建多个元素的时候，比之后者，后者的效率高很多。

    • element.innerHTML 拼接字符串形式创建多个元素

    function fun1(){
        //时间1
        var d1 = new Date()
        //动态创建元素
        for(var i=0;i<1000;i++){//字符串拼接
            document.body.innerHTML += '<p>1111111111111111<p>'
        }
        //时间2
        var d2 = new Date()
        console.log(d2-d1)//四位数 1900-2500
    }
    fun1();
    

  • 但当前者采用数组形式拼接来创建多个元素的话，比之后者，前者的效率要高。

    • element.innerHTML 数组拼接形式创建多个元素

    function fun2(){
        //时间1
        var d1 = new Date()
        //创建数组
        var arr = [];
        //动态创建元素
        for(var i=0;i<1000;i++){//数组拼接
            arr.push('<p>1111111111111111<p>')
        }
        document.body.innerHTML = arr.join('')
        //时间2
        var d2 = new Date()
        console.log(d2-d1)//个位数 4/5
    }
    fun2();
    

    • document.createElement() 创建多个元素

    function fun3(){
        //时间1
        var d1 = new Date()
        //动态创建元素
        for(var i=0;i<1000;i++){
            var p = document.createElement('p')
            p.innerHTML = '1111111111111111'
            document.body.appendChild(p)
        }
        //时间2
        var d2 = new Date()
        console.log(d2-d1)//个位数到两位数 10左右
    }
    fun3()