DOM编程④ -- 操作节点

举报
十八岁讨厌编程 发表于 2022/08/06 01:31:44 2022/08/06
【摘要】 文章目录 什么是节点操作节点概述节点层级父级节点子级节点兄弟节点 创建节点添加节点删除节点复制节点三种动态创建元素区别DOM重点核心创建增删改查属性操作事件操作 什么是节点操作 获...

什么是节点操作

获取元素通常使用两种方式:

①利用 DOM 提供的方法获取元素

  • document.getElementById()
  • document.getElementsByTagName()
  • document.querySelector 等
  • 逻辑性不强、繁琐

②利用节点层级关系获取元素

  • 利用父子兄节点关系获取元素
  • 逻辑性强, 但是兼容性稍差

这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单。

节点概述

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

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。

在这里插入图片描述
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

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

我们在实际开发中,节点操作主要操作的是元素节点

节点层级

利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。

父级节点

node.parentNode

  
 
  • 1
  • parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回 null

子级节点

1. parentNode.childNodes(标准) 

  
 
  • 1

parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。

注意:
返回值里面包含了所有的子节点,包括元素节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。 所以我们一般不提倡使用childNodes

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]);
}
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

也就是要进行一层类型判断(筛选过程)

所以推荐使用:

2. parentNode.children(非标准) 

  
 
  • 1

parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回。

虽然children 是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用

3. parentNode.firstChild

  
 
  • 1

firstChild 返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。

4. parentNode.lastChild 

  
 
  • 1

lastChild 返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。

 5. parentNode.firstElementChild 

  
 
  • 1

firstElementChild 返回第一个子元素节点,找不到则返回null。

6. parentNode.lastElementChild

  
 
  • 1

lastElementChild 返回最后一个子元素节点,找不到则返回null。

注意:这两个方法有兼容性问题,IE9 以上才支持。

实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

解决方案:

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

兄弟节点

1. node.nextSibling

  
 
  • 1

nextSibling 返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。

2. node.previousSibling

  
 
  • 1

previousSibling 返回当前元素上一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。

3. node.nextElementSibling 

  
 
  • 1

nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null

4. node.previousElementSibling

  
 
  • 1

previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null

注意:这两个方法有兼容性问题, IE9 以上才支持。

解决办法:
自己封装一个兼容性的函数

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

创建节点

 document.createElement('tagName')

  
 
  • 1

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

添加节点

1. node.appendChild(child) 

  
 
  • 1

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

2. node.insertBefore(child, 指定元素) 

  
 
  • 1

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

例如:

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
    </script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

我们想要页面添加一个新的元素 :

  1. 创建元素
  2. 添加元素

删除节点

node.removeChild(child) 

  
 
  • 1

node.removeChild() 方法从 DOM 中删除一个子节点,返回删除的节点

复制节点

node.cloneNode() 

  
 
  • 1

node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点

注意:

  • 如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
  • 如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。

三种动态创建元素区别

  • document.write()
  • element.innerHTML
  • document.createElement()

区别:

  1. document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
  2. innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
  3. innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
  4. createElement() 创建多个元素效率稍低一点点,但是结构更清晰

总结:不同浏览器下,innerHTML 效率要比 creatElement高

例如:

        //innerHTML创建元素
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        
        // document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

DOM重点核心

关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

  1. document.write
  2. innerHTML
  3. createElement

  1. appendChild
  2. insertBefore

  1. removeChild

主要修改dom的元素属性,dom元素的内容、属性, 表单的值等

  1. 修改元素属性: src、href、title等
  2. 修改普通元素内容: innerHTML 、innerText
  3. 修改表单元素: value、type、disabled等
  4. 修改元素样式: style、classNam

主要获取查询dom的元素

  1. DOM提供的API 方法: getElementById、getElementsByTagName 古老用法 不太推荐
  2. H5提供的新方法: querySelector、querySelectorAll 提倡
  3. 利用节点操作获取元素: 父(parentNode)、子(children)、兄(previousElementSibling、
    nextElementSibling) 提倡使用

属性操作

主要针对于自定义属性。

  1. setAttribute:设置dom的属性值
  2. getAttribute:得到dom的属性值
  3. removeAttribute移除属性

事件操作

给元素注册事件, 采取 事件源.事件类型 = 事件处理程序
在这里插入图片描述

文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/zyb18507175502/article/details/123743660

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。