JavaScript DOM 节点操作

Posted 2021-06-26 YuLong~W

文章目录

• 节点基础
• • 节点分类
  • 节点层级
  • 获取节点
  • • 获取父节点
    • 获取子节点
    • 案例：下拉菜单(使用children方法)
    • 获取兄弟节点
• 节点操作
• • 创建节点
  • 添加节点
  • 删除节点
  • • 综合案例：留言板内容的添加和删除（运用创建、添加、删除操作）
  • 复制节点

节点基础

节点分类

HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性

• 元素节点，nodeType为1 （节点操作主要操作的是元素节点）
• 属性节点，nodeType为2
• 文本节点，nodeType为3，文本节点包含文字、空格、换行等

节点层级

节点的层级关系如下：

• 根节点：标签是整个文档的根节点，有且仅有一个
• 父节点：指的是某一个节点的上级节点
• 子节点：指的是某一个节点的下级节点
• 兄弟节点：两个节点同属于一个父节点

获取节点

获取父节点

使用parentNode属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回为 null
语法格式为：obj.parentNode，obj是一个DOM对象

获取子节点

方法	返回	说明
childNodes（标准）	返回的是NodeList对象的集合，该集合为即时更新的集合。	返回值里面包含了指定节点的所有子节点，如元素节点、文本节点等其他类型的节点 。想获得里面的元素节点，则需要专门处理
children（推荐）	返回HTMLCollection对象集合。	返回值里包含所有子元素节点，集合只返回子元素节点，其余节点不返回。推荐使用
firstChild（lastChild）	返回第一个（最后一个）子节点	返回值里包含第一个（最后一个）子元素节点，如果找不到则返回null
firstElementChild（lastElementChild）	返回第一个（最后一个）子元素节点	返回值只包括最后一个子元素节点，其余元素节点不返回。兼容性问题，IE9以上支持

用childNodes方法获取子元素节点（复杂）：

//获取ul里的所有li元素
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {    // ul.childNodes[i] 是元素节点
    console.log(ul.childNodes[i]);}
}

用children方法获取第一个子或最后一个子元素节点：

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

案例：下拉菜单(使用children方法)

JS核心代码：

//获取元素
var nav=document.querySelector('.nav');
var lis=nav.children;//得到4个li
//注册事件
for(var i=0;i<lis.length;i++){
    lis[i].onmouseover=function(){
        this.children[1].style.display='block'; //this.children[1]是nav下的ul this[0]是标签a
    }
    lis[i].onmouseout=function(){
        this.children[1].style.display='none';
    }
}

获取兄弟节点

方法	返回	说明
nextSibling（previousSibling）	返回当前元素的下一个（上一个）兄弟节点，找不到返回null	返回值包含所有的节点
nextElementSibling（previousElementSibling）	返回当前元素下一个（上一个）兄弟元素节点，找不到返回null	兼容性问题

实际开发中通常使用封装函数来处理兼容性

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

节点操作

获取元素通常有两种方式：

• 利用DOM提供的方法获取元素（逻辑性不强、繁琐）
• 利用节点层级关系获取元素（逻辑性强、兼容性差、操作简单）

创建节点

在DOM中，使用document.createElement(‘tagName’) 方法创建由tagName指定的html元素，也称为动态创建元素节点

动态创建元素节点的3种常见方式如下：

• document.write()创建元素，如果页面文档流加载完毕，再调用会导致页面重绘
• element.innerHTML将内容写入某个DOM节点，创建多个元素效率更高（拼接字符串效率低，而采用数组形式拼接效率更高），结构稍微复杂
• document.createElement()创建多个元素效率稍微低一点，但是结构更加清晰

添加节点

在DOM中，提供了 node.appendChild() 和 node.insertBefore() 方法用于添加节点

• appendChild()方法，将一个节点添加到指定父节点的子节点列表末尾
• insertBefore(child,指定元素)方法，将一个节点添加到父节点的指定子节点前面

删除节点

在DOM中，提供了node. removeChild(child) 方法用于删除节点

综合案例：留言板内容的添加和删除（运用创建、添加、删除操作）

JS核心代码：

//获取元素
var btn = document.querySelector('button')
var txt = document.querySelector('textarea')
var ul = document.querySelector('ul')
//注册点击发布事件
btn.onclick = function () {
    if (txt.value == '') {
        alert('没有输入内容')
        return false
    } else {
        var li = document.createElement('li')
        //<a>标签中的href值确保页面不被刷新，执行了一个空的操作
        li.innerHTML = txt.value + '<a href="javascript:;">删除</a>'
        //添加子元素在当前第一个之前
        ul.insertBefore(li, ul.children[0])
        var as = document.querySelectorAll('a')
        //给每一个a元素注册删除事件
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                ul.removeChild(this.parentNode) 
                //this代表的是a元素 因此this.parentNode为li元素
            }
        }
    }
}

• removeChild(child)用于删除节点，该方法从DOM中删除一个子节点，返回删除的节点

复制节点

在DOM中，提供了 node.cloneNode() 方法，参数为true/false，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点

• 参数为空或false，则是浅拷贝，即只复制节点本身，不复制里面的子节点
• 参数为true，则是深拷贝，即会复制节点本身及里面所有的子节点