JS DOM 常用节点操作 (上）

最新推荐文章于 2022-07-21 20:45:36 发布
最新推荐文章于 2022-07-21 20:45:36 发布
阅读量296 收藏 1
点赞数 1
分类专栏： # ECMAScript 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ares5kong/article/details/118385772
版权

关联：

JS DOM 常用节点操作（下）

目录

DOM 概念

DOM 操作

条件查找

1. 根据 id 属性查找元素

2. 根据元素类型查找元素

3. 根据 class 属性查找元素

4. 根据选择器查找第一个命中的元素

5. 根据选择器查找全部命中的元素

6. 查找页面根元素或Body元素

爬树查找

1. 查找父节点

2. 查找子节点 - 元素节点、注释节点、文本节点

3. 查找子节点 - 元素节点

4. 获取第一个和最后一个节点

5. 查找前一个兄弟节点

6. 查找后一个兄弟节点

添加节点

移除节点

复制节点

操作元素值

操作元素属性

DOM 概念

将 HTML 文档中的标签、标签属性、标签文本转换为一个个对象, 并按照标签之间的关系, 将这些对象以树形结构的形式保存在内存中, 然后可以用操作对象的方式对实际元素进行修改。

DOM树：

DOM 操作

条件查找

根据条件进行查找 如, 想查找某个类型的元素、查找指定 ID 的元素、查找使用了指定样式的元素等，条件查找时，返回的都是 HTMLElement 对象（ Node对象的子类 ）

1. 根据 id 属性查找元素

<body>
<div id='container'></div>
<script>
  document.getElementById('container')
</script>
</body>

2. 根据元素类型查找元素

<body>
<div></div>
<div></div>
<script>
  let elementArray = document.getElementsByTagName('div')
  for(let i = 0 ; i < elementArray.length; i++){
    elementArray[i].innerText = `我是第${i + 1}个div`
  }
</script>
</body>

3. 根据 class 属性查找元素

<body>
<style>
  .font-red {
    color: red;
  }
</style>
<div class="font-red"></div>
<div class="font-red"></div>
<script>
  let elementArray = document.getElementsByClassName('font-red')
  for (let i = 0; i < elementArray.length; i++) {
    elementArray[i].innerText = `我是第${i + 1}个div`
  }
</script>
</body>

4. 根据选择器查找第一个命中的元素

<body>
<div></div>
<p class="font-red"></p>
<div class="font-red"></div>
<script>
  // 使用标签选择器
  console.dir(document.querySelector('div'))
  // 使用类选择器
  console.dir(document.querySelector('.font-red'))
  // 使用更详细的类选择器
  console.dir(document.querySelector('div.font-red'))
</script>
</body>

5. 根据选择器查找全部命中的元素

<body>
<div></div>
<div></div>
<script>
  let elementArray = document.querySelectorAll('div')
  for (let i = 0; i < elementArray.length; i++) {
    elementArray[i].innerText = `我是第${i + 1}个div`
  }
</script>
</body>

6. 查找页面根元素或Body元素

<script>
  // 获取 body 元素
  console.dir(document.body)
  // 获取根元素
  console.dir(document.documentElement)
  
  // 不同浏览器或浏览器版本，在获取滚动条的滚动距离时，可能会有兼容问题
  // 解决兼容问题
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
</script>

爬树查找

按照树形结构中的关系进行查找, 如, 父节点、子节点、兄弟节点等，爬树查找时，返回的都是 Node 对象。

DOM 树的节点有不同的类型, Node 对象中由 nodeType 属性对其类型进行区分

常见的节点类型有：

节点类型nodeTypenodeNamenodeValue
元素节点1元素名null/undefined
属性节点2属性名属性值
文字节点3text文本内容
注释节点8comment注释内容

1. 查找父节点

<body>
<div id="grandpa">
  <div id="parent">
    <div id="inner"></div>
  </div>
</div>
<script>
  let innerDiv = document.querySelector('#inner')
  console.log(innerDiv.parentNode)
</script>
</body>

2. 查找子节点 - 元素节点、注释节点、文本节点

<body>
<div id="outer">
  文本<!-- 注释节点 -->
  <div id="son">节点值
    <div id="grandson"></div>
  </div>
</div>
<script>
  let innerDiv = document.querySelector('#outer')
  let children = innerDiv.childNodes
  console.log(`一共有${children.length}个子节点`)
  for (let i = 0; i < children.length; i++) {
    console.log(`第${i + 1}个节点, 节点名为：${children[i].nodeName}`)
    console.log(`第${i + 1}个节点, 节点类型为：${children[i].nodeType}`)
    console.log(`第${i + 1}个节点, 节点值为：${children[i].nodeValue}`)
  }
  /**
   * 第一个节点: 是文本节点，既 <div id="outer"> 后的 换行符 + 空格 + 文本
   * 第二个节点: 是注释节点，既 <!-- 注释节点 -->
   * 第三个节点: 是文本节点，既 <!-- 注释节点 --> 后的 换行符 + 空格
   * 第四个节点: 是元素节点，既 <div id="son"> </div> 部分
   * 第五个节点: 是文本节点，既 <div id="son"> </div> 后的 换行符
   */
</script>
</body>

3. 查找子节点 - 元素节点

<body>
<div id="outer">
  文本<!-- 注释节点 -->
  <div id="son">
    <div id="grandson"></div>
  </div>
</div>
<script>
  let innerDiv = document.querySelector('#outer')
  // 只获取元素节点，既 <div id="son"> </div> 部分
  let children = innerDiv.children
  console.log(innerDiv.children.length) // 结果：1
  for (let i = 0; i < children.length; i++) {
    console.log(children[i])
  }
</script>
</body>

4. 获取第一个和最后一个节点

<body>
<div id="outer">
  <div id="son"></div>
  <div id="daughter"></div>
</div>
<script>
  let innerDiv = document.querySelector('#outer')

  // 查找第一个和最后一个节点（可能是元素节点、文本节点、注释节点）
  console.log(innerDiv.firstChild)
  console.log(innerDiv.lastChild)

  // 查找第一个和最后一个元素节点查找第一个和最后一个元素节点，有浏览器兼容问题
  console.log(innerDiv.firstElementChild)
  console.log(innerDiv.lastElementChild)

  // 查找第一个和最后一个元素节点，最优方案
  console.log(innerDiv.children[0])
  console.log(innerDiv.children[innerDiv.children.length - 1])
</script>
</body>

5. 查找前一个兄弟节点

<body>
<div id="outer">
  <div id="sibling"></div>
  <div id="current"></div>
</div>
<script>
  /*
   * previousSibling - 查找前一个兄弟节点（文本类型、元素类型、注释类型）
   * previousElementSibling - 查找前一个元素类型的兄弟节点
   */
  let currentDiv = document.querySelector('#current')
  console.log(currentDiv.previousSibling) // 结果: 文本类型节点，既 <div id="sibling"></div> 后的换行和空格
  console.log(currentDiv.previousElementSibling) // 结果: 元素类型节点，既<div id="sibling"></div>
</script>
</body>

6. 查找后一个兄弟节点

<body>
<div id="outer">
  <div id="current"></div>
  <div id="sibling"></div>
</div>
<script>
  /*
   * nextSibling - 查找后一个兄弟节点（文本类型、元素类型、注释类型）
   * nextElementSibling - 查找后一个元素类型的兄弟节点
   */
  let currentDiv = document.querySelector('#current')
  console.log(currentDiv.nextSibling) // 结果: 文本类型节点，既 <div id="current"></div> 后的换行和空格
  console.log(currentDiv.nextElementSibling) // 结果: 元素类型节点，既<div id="sibling"></div>
</script>
</body>

添加节点

1. document.createElement，创建元素对象（只是创建元素对象, 并不会添加到页面）

2. node.appendChild(element)，页面添加元素 - 末尾添加

3. node.insertBefore(element, targetElement)，页面添加元素 - 添加位置取决于第二个参数

4. createElement 应与 appendChild 或 insertBefore 联合使用

insertBefore 的第二个参数传 null 则在节点末尾添加, 第二个参数传节点对象，则在节点对象前添加

<body>
<div id="container">
  <h2 id="target">中间的元素</h2>
</div>
<script>
  let target = document.getElementById('target')
  let container = document.getElementById('container')

  // 在 container 内 target 前，添加元素
  let before = document.createElement('h2')
  before.innerText = '添加到开头的元素'
  container.insertBefore(before, target)

  // 在 container 的末尾添加元素
  let last = document.createElement('h2')
  last.innerText = '添加到后面的元素'
  container.appendChild(last)
</script>
</body>

移除节点

移除指定元素内的指定节点

<body>
<div id="container">
  <h2 id="target">会被移除的元素</h2>
</div>
<script>
  let target = document.getElementById('target')
  let container = document.getElementById('container')
  container.removeChild(target)
</script>
</body>

复制节点

浅拷贝：实参为 false 或 不传, 只拷贝节点本身, 哪怕下级是文本节点也不会拷贝

<body>
<div id="container">
  <h2 id="target">这是内部节点</h2>
</div>
<script>
  let container = document.querySelector('#container')
  let target = document.querySelector('#target')
  let copy = target.cloneNode()
  // 不会拷贝文本节点, 所以要自己设置文字, 不然画面啥都不显示
  copy.innerText = '这是复制出来的内部节点'
  container.appendChild(copy)
</script>
</body>

深拷贝：实参为 true，拷贝节点本身和下级节点

<body>
<div id="container">
  <h2 id="target">这是内部节点</h2>
</div>
<script>
  let container = document.querySelector('#container')
  let target = document.querySelector('#target')
  let copy = target.cloneNode(true)
  container.appendChild(copy)
</script>
</body>

操作元素值

value：用在表单元素中，设置和获取表单元素的值, 和表单元素中的的 value 属性对应

innerText：设置和获取元素标签对儿中的文字文本, 并会自动忽略文本的前后空格和换行符

innerHTML：设置和获取元素标签对儿中的内容（包括 html 标签），赋值时如果内容为 html 标签，页面则会自动识别成 html 元素

<body>
<!-- innerHtml -->
<div id="innerHTMLCase">
  <h2> 这是 innerHTML 取值 </h2>
</div>
<!-- innerText -->
<div id="innerTextCase">
  <h2> 这是 innerText 取值 </h2>
</div>
<!-- value -->
<input id="valueCase" type="text" value="这是文本框值">

<script>
  /*
   * innerHTML
   */
  let innerHTMLCase = document.querySelector('#innerHTMLCase')
  // 取值
  console.log(innerHTMLCase.innerHTML) // 结果： \n  <h2> 这是 innerHTML 取值 </h2>
  // 赋值
  innerHTMLCase.innerHTML = '<h2 id="target"> 这是 innerHTML 赋值 </h2>' // 画面看效果

  /*
   * innerText
   */
  let innerTextCase = document.querySelector('#innerTextCase')
  // 取值
  console.log(innerTextCase.innerText) // 结果：这是 innerText 取值
  // 赋值
  innerTextCase.innerText = '<h2 id="target"> 这是 innerText 赋值 </h2>' // 画面看效果

  /*
   * value
   */
  let valueCase = document.querySelector('#valueCase')
  // 取值
  console.log(valueCase.value) // 结果：这是文本框值
  // 赋值
  valueCase.value = '这是修改后的文本框值' // 画面看效果
</script>
</body>

操作元素属性

常用操作：

getAttribute ( 属性名 )获取元素属性
setAttribute ( 属性名, 属性值 )设置元素属性
removeAttribute ( 属性名 )删除元素属性
element.className设置和获取元素类名
element.属性名设置和获取元素属性

① 属性操作配合自定义属性

<body>
<div id="defineProp" prop="自定义属性"></div>
<script>
  let defineProp = document.querySelector('#defineProp')
  console.log(defineProp.getAttribute('prop')) // 获取自定义属性值
  defineProp.setAttribute('index', '1') // 设置自定义属性
  defineProp.removeAttribute('prop') // 删除自定义属性
  defineProp.style = 'width: 100px; height: 100px; border: 1px solid black' // 设置元素属性
</script>
</body>

② H5 规范了自定义属性要用 data- 开头,  然后统一从元素对象的 dataset 属性中获取, 获取时不用写 data-

<body>
<div id="singleton" data-singleton="自定义属性, 普通属性名"></div>
<div id="camelCase" data-camel-case="自定义属性, 驼峰属性名"></div>
<script>
  // 普通属性名
  let singleton = document.querySelector('#singleton')
  console.log(singleton.dataset.singleton) // 方式一
  console.log(singleton.dataset['singleton']) // 方式二
  singleton.dataset.no = '1' // 通过 js 也可以为 html 元素设置自定义属性

  // 驼峰属性名
  let camelCase = document.querySelector('#camelCase')
  console.log(camelCase.dataset.camelCase) // 方式一
  console.log(camelCase.dataset['camelCase']) // 方式二

  // 移除属性时, 不能省略 data- 
  camelCase.removeAttribute('data-camel-case')
</script>
</body>

「已注销」
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 常用的DOM节点
joys_wkx的博客
12-08 194
DOM 常用的API DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。 解析过程 HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。 DOM可以做什么 找对象...
JS-DOM常用节点类型
caoxinjian423的博客
02-10 209
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM常用节点类型</title> </head> <body> <ul id=".
js给html标签 赋值
小樓東風的专栏
10-28 2万+
textarea 标签 -- 代表HTML表单多行输入域 textarea标签是成对出现的,以开始,以结束 属性: Common -- 一般属性 cols -- 多行输入域的列数 rows -- 多行输入域的行数 alt -- 代表表单的提示文字,当鼠标停留时 accesskey -- 表单的快捷键访问方式 disabled -- 输入域
html h2标签可以加id吗,如何使用javascript获取id为另一个div内的div的h2标签值
weixin_30700095的博客
06-22 488
我有一个带有id的div，其中有一些没有id的div。有些事情：oneHello One!!twoHello Two!!threeHello Three!!在我的javascript中，我循环遍历上面的div，如：var divLists = document.getElementById('mainDiv').firstChild.childNodes;for (var i = 0; i &lt...
JavaScript DOM常用操作代码汇总
10-15
- 对于JavaScript来说，DOM提供了一系列API，使得JavaScript能够识别并操作HTML页面中的元素。 - HTML文档经过浏览器解析后形成DOM树，其中每个HTML元素、属性和文本都是一个DOM节点。 - 通过DOM，JavaScript可以...
jQuery DOM删除节点操作指南
12-01
在JavaScript的世界里，jQuery库提供了一系列简便的API用于操作DOM（文档对象模型）。这篇指南将深入探讨jQuery中删除DOM节点的几种方法，包括`remove()`, `detach()`, 和 `empty()`，并结合实例来解释它们的工作...
原生js实现针对Dom节点的CRUD操作示例
01-19
本文实例讲述了原生js实现针对Dom节点的CRUD操作。分享给大家供大家参考，具体如下： 知识点，依然会遗忘。我在思考到底是什么原因。想到研究生考试准备的那段岁月，想到知识体系的建立，知识体系分为正向知识体系和...
浅析JS操作DOM的一些常用方法
11-22
在本文中，我们将深入探讨一些常用的JS操作DOM的方法。 1. **getElementById()**: 这个方法是获取页面上具有唯一ID的元素的最直接方式。例如，`document.getElementById('myID')`将返回ID为'myID'的元素。由于ID在...
jquery给h1和span赋值
热门推荐
nyist327的专栏
04-04 2万+
1. jquery给h1赋值 按照html标准，每个页面只允许一个“”标签。 项目一 $('h1').html(); //取值$('h1').html('Hello'); //赋值   2. jquery给span赋值 id="lbName">名称 $('#lbName').html(); //取值$('#lbName').html('Hel
js标签的取值与赋值总结
u010446936的博客
11-08 5837
1.获取chockbox中的值和赋值        var  autoNoramlizer=$('[name="name"]').prop("checked");         if(autoNoramlizer==true){             autoNoramlizer=1;          }else{              autoNoramlizer=0;
性能优化之从URL到页面展示
weixin_43392568的博客
12-21 213
本文发于微信公众帐号: 一界码农(The_hard_the_luckier) 无需授权即可转载； 甚至无需保留以上版权声明…今天从性能优化的角度再来看看从URL到页面展示，前两...
如何优雅渲染dom节点
张鹏~IT~少年人的博客
12-21 2156
let container = document.getElementById('container') // 创建一个DOM Fragment对象作为容器 let content = document.createDocumentFragment() for(let count=0;count<10000;count++){ // span此时可以通过DOM API去创建 let ...
前端性能优化
weixin_33806300的博客
04-14 66
CDN优化 将CDN的域名与主域名区分开来，由于cookie会不分青红皂白的跟随域名，而CDN主要是请求静态资源，根本不需要验证信息。通过区分域名，就可以大大提升效率 服务端渲染 服务端渲染主要解决首屏加载体验问题和SEO问题。即服务器直接返回dom树，但是浏览器客户端很多，但是服务器很少，还是尽量少用服务端渲染 基于渲染流程的 CSS 优化建议 css解析是从右往左的 避免使用通配符，只对需要...
DOM常用节点类型
CSDN前端知识共享
08-04 2022
DOM常用节点类型 Node Types 文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。 存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点： 节点类型 描述 子节点 1 Element 代表元素 Element, Text, Comment, ProcessingInstruct
js原生操作Dom树上节点
yan_gogo的博客
08-01 1745
  DOM (Document Object Model)： 用来表示文档中对象的标准模型就称为DOM 节点： 页面中的所有内容都是节点 节点类型： 元素节点 Node.ELEMENT_NODE(1) ​ 属性节点 Node.ATTRIBUTE_NODE(2) ​ 文本节点 Node.TEXT_NODE(3)​ ​ 注释节点 Node.COMMENT_NODE(8) 节点类型的属性：...
DOM有哪些常用节点类型
weixin_43765747的博客
06-27 1622
1.元素节点 元素节点element对应网页的HTML标签元素。 2.特性节点 元素特性节点attribute对应网页中HTML标签的属性。 3.文本节点 文本节点text代表网页中的HTML标签内容。 4.文档节点 文档节点document表示HTML文档，也称为根节点，指向document对象。 ...
玩转CSS3(一)----CSS3实现页面布局
weixin_30724853的博客
04-07 149
版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/u012116457/article/details/28710173 ...
DOM之12种节点
最新发布
weixin_47075145的博客
07-21 3107
DOM是javascript操作网页的接口，全称为文档对象模型(DocumentObjectModel)。，从而可以使用javascript对网页进行各种操作(比如增删内容)。。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值