DOM操作 - 节点操作方式

原创 于 2024-05-16 13:46:33 发布
· 286 阅读 · 10 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#网络安全 #web安全 #面试

在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。

需要完整版PDF学习资源

需要体系化学习资料的朋友，可以加我V获取：vip204888 （备注网络安全）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

我们通过 getAttribute 获取的就是元素的属性节点

文本节点

我们通过 innerText 获取到的就是元素的文本节点

获取节点

childNodes
作用：childNodes：获取某一个节点下 所有的子一级节点
语法：元素对象.childNodes

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
      var oDiv = document.querySelector('div')
    
    console.log(oDiv.childNodes) 
    /*
        NodeList(3) [text, p, text]
      0: text
      1: p
      2: text
      length: 3
      __proto__: NodeList
    */
  </script>
</body>

我们会发现，拿到以后是一个伪数组，里面有三个节点

  • 一个 text：从 
     一直到 

    中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点

  • 一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
  • 一个 text：从  一直到  中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点

这个时候就能看到我们有不同的节点类型了

children

作用：children ：获取某一节点下所有的子一级 元素节点
语法：元素对象.children

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
      var oDiv = document.querySelector('div')
    
    console.log(oDiv.children) 
    /*
        HTMLCollection [p]
      0: p
      length: 1
      __proto__: HTMLCollection
    */
  </script>
</body>

我们发现只有一个节点了，因为 children 只要元素节点，div 下面又只有一个元素节点，就是 p，所以就只有一个，虽然只有一个，但是也是一个 伪数组

firstChild

作用：firstChild：获取某一节点下子一级的 第一个节点
语法：元素对象.firstChild

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
      var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstChild) // #text 
  </script>
</body>

这个是只获取一个节点，不再是伪数组了，获取的是第一个，第一个就是 

 一直到 

 的那个换行和空格，是个文本节点。

lastChild

作用：lastChild：获取某一节点下子一级的 最后一个节点
语法：元素对象.lastChild

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
   var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastChild) // #text 
  </script>
</body>

只获取一个节点，不再是伪数组，获取的是最后一个，最后一个就是 

 一直到  之间的换行和空格，是个文本节点。
firstElementChild

作用：firstElementChild：获取某一节点下子一级 第一个元素节点
语法：元素对象.firstElementChild

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
   var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstElementChild) // <p>hello</p>
  </script>
</body>

只获取一个节点，不在是伪数组，获取的是第一个 元素节点，第一个元素节点就是 p 标签，是一个元素节点。

lastElementChild

作用：lastElementChild：获取某一节点下子一级 最后一个元素节点
语法：元素对象.lastElementChild

<body>
  <div>
    <p>hello</p>
    <p>world</p>
  </div>
  
  <script>
    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
   var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastElementChild) // <p>world</p>
  </script>
</body>

只获取一个节点，不在是伪数组，获取的是最后一个 元素节点，最后一个元素节点是

world

，是一个元素节点。

nextSibling

作用：nextSibling：获取某一个节点的 下一个兄弟节点
语法：元素对象.nextSibling

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
   var oLi = document.querySelector('#b')
    
    console.log(oLi.nextSibling) // #text
  </script>
</body>

只获取一个节点，不在是伪数组，获取的是 id=“b” 这个 li 的下一个兄弟节点，因为 id=“b” 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

previousSibling

作用：previousSibling：获取某一个节点的 上一个兄弟节点
语法：元素对象.previousSibling

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
   var oLi = document.querySelector('#b')
    
    console.log(oLi.previousSibling) // #text
  </script>
</body>

只获取一个节点，不在是伪数组，获取的是 id=“b” 这个 li 的上一个兄弟节点，因为 id=“b” 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

nextElementSibling

作用：nextElementSibling：获取某一个节点的 下一个元素节点
语法：元素对象.nextElementSibling

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
   var oLi = document.querySelector('#b')
    
    console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
  </script>
</body>

只获取一个节点，不在是伪数组，获取的是 id=“b” 这个 li 的下一个兄弟元素节点，因为 id=“b” 的下一个兄弟元素节点就是 id=“c” 的 li，是一个元素节点。

previousElementSibling

作用：previousElementSibling：获取某一个节点的 上一个元素节点
语法：元素对象.previousElementSibling

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
   var oLi = document.querySelector('#b')
    
    console.log(oLi.previousElementSibling) // <li id="a">hello</li>
  </script>
</body>

只获取一个节点，不在是伪数组，获取的是 id=“b” 这个 li 的上一个兄弟元素节点，因为 id=“b” 的上一个兄弟元素节点就是 id=“a” 的 li，是一个元素节点。

parentNode

作用：parentNode：获取某一个节点的 父节点
语法：元素对象.parentNode

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
   var oLi = document.querySelector('#b')
    
    console.log(oLi.parentNode) // <ul>...</ul>
  </script>
</body>

只获取一个节点，不在是伪数组，获取的是当前这个 li 的父元素节点，因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

parentElement

作用：parentElement获取某一节点的父元素节点
语法：元素对象.parentElement

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
   var oLi = document.querySelector('#b')
    
    console.log(oLi.parentNode) // <ul>...</ul>
  </script>
</body> 

只获取一个节点，不在是伪数组，获取的是当前这个 li 的父元素节点，因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点。

attributes

作用：attributes：获取某一个 元素节点 的所有 属性节点

<body>
  <ul>
    <li id="a" a="100" test="test">hello</li>
  </ul>
  
  <script>
    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
   var oLi = document.querySelector('#a')
    
    console.log(oLi.attributes) 
    /*
     NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
      0: id
      1: a
      2: test
      length: 3
      a: a
      id: id
      test: test
      __proto__: NamedNodeMap
    
    */
  </script>
</body>

获取的是一组数据，是该元素的所有属性，也是一个伪数组，这个 li 有三个属性，id / a / test 三个，所以就获取到了这三个

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性

  • nodeType
  • nodeName
  • nodeValue

我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点，接下来我们就来聊一些各种节点之间属性的区别，我们先准备一段代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div class="box">
        hello
        world
        
    </div>

    <script>
        // 0. 拿到四种节点
        var ele = document.querySelector('div')
        var attr = ele.attributes[0]
        var text = ele.firstChild
        var comment = ele.childNodes[1]

        console.log('元素节点 : ', ele)
        console.log('属性节点 : ', attr)
        console.log('文本节点 : ', text)
        console.log('注释节点 : ', comment)
    </script>
</body>

</html>

nodeType

nodeType：获取节点的节点类型，用数字表示

console.log('元素节点 : ', ele.nodeType) // 1
console.log('属性节点 : ', attr.nodeType) // 2 
console.log('文本节点 : ', text.nodeType) // 3
console.log('注释节点 : ', comment.nodeType) // 8

nodeType === 1 就表示该节点是一个 元素节点

nodeType === 2 就表示该节点是一个 属性节点
nodeType === 3 就表示该节点是一个 文本节点
nodeType === 8 就表示该节点是一个 注释节点

nodeName

nodeName：获取节点的节点名称

console.log('元素节点 : ', ele.nodeName) // DIV
console.log('属性节点 : ', attr.nodeName) // class
console.log('文本节点 : ', text.nodeName) // #text
console.log('注释节点 : ', comment.nodeName) // #comment

元素节点的 nodeName 就是 大写标签名

属性节点的 nodeName 就是 属性名
文本节点的 nodeName 都是 #text
文本节点的 nodeName 都是 #comment

nodeValue

nodeValue： 获取节点的值

console.log('元素节点 : ', ele.nodeValue) // null 
console.log('属性节点 : ', attr.nodeValue) // box
console.log('文本节点 : ', text.nodeValue) // hello world
console.log('注释节点 : ', comment.nodeValue) // 你好 世界

元素节点没有 nodeValue返回的是null

属性节点的 nodeValue 就是 属性值
文本节点的 nodeValue 就是 文本内容
文本节点的 nodeValue 就是 注释内

操作DOM节点

我们所说的操作无非就是 增删改查（CRUD）

  • 创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
  • 向页面中增加一个节点
  • 删除页面中的某一个节点
  • 修改页面中的某一个节点
  • 获取页面中的某一个节点

创建一个节点
createElement：用于创建一个元素节点
语法：document.createElement(‘要创建的标签’)
要创建的标签可以是W3C规范内的标签，也可以的自定义标签

// 创建一个 div 元素节点
var oDiv = document.createElement('div')
console.log(oDiv) // <div></div>

//创建一个自定义元素节点
var newName = document.createElement('hello')
console.log(newName); //<hello></hello>

本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。

最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。

最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！下面就开始进入正题，如何从一个萌新一步一步进入网络安全行业。

需要体系化学习资料的朋友，可以加我V获取：vip204888 （备注网络安全）

学习路线图

其中最为瞩目也是最为基础的就是网络安全学习路线图，这里我给大家分享一份打磨了3个月，已经更新到4.0版本的网络安全学习路线图。

相比起繁琐的文字，还是生动的视频教程更加适合零基础的同学们学习，这里也是整理了一份与上述学习路线一一对应的网络安全视频教程。

网络安全工具箱

当然，当你入门之后，仅仅是视频教程已经不能满足你的需求了，你肯定需要学习各种工具的使用以及大量的实战项目，这里也分享一份我自己整理的网络安全入门工具以及使用教程和实战。

项目实战

最后就是项目实战，这里带来的是SRC资料&HW资料，毕竟实战是检验真理的唯一标准嘛~

面试题

归根结底，我们的最终目的都是为了就业，所以这份结合了多位朋友的亲身经验打磨的面试题合集你绝对不能错过！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

的需求了，你肯定需要学习各种工具的使用以及大量的实战项目，这里也分享一份我自己整理的网络安全入门工具以及使用教程和实战。

项目实战

最后就是项目实战，这里带来的是SRC资料&HW资料，毕竟实战是检验真理的唯一标准嘛~

面试题

归根结底，我们的最终目的都是为了就业，所以这份结合了多位朋友的亲身经验打磨的面试题合集你绝对不能错过！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值