晴海小常识分享

晴海小常识分享

当前位置：首页 > 编程笔记 > 正文
已解决

【JavaScript】DOM 节点操作

来自网友在路上 157857提问 提问时间：2023-11-06 05:14:42阅读次数： 57

最佳答案 问答题库578位专家为你答疑解惑

DOM 节点

插入节点

如下代码演示：

<body><h3>插入节点</h3><p>在现有 dom 结构基础上插入新的元素节点</p><hr><!-- 普通盒子 --><div class="box"></div><!-- 点击按钮向 box 盒子插入节点 --><button class="btn">插入节点</button><script>// 点击按钮，在网页中插入节点const btn = document.querySelector('.btn')btn.addEventListener('click', function () {// 1. 获得一个 DOM 元素节点const p = document.createElement('p')p.innerText = '创建的新的p标签'p.className = 'info'// 复制原有的 DOM 节点const p2 = document.querySelector('p').cloneNode(true)p2.style.color = 'red'// 2. 插入盒子 box 盒子document.querySelector('.box').appendChild(p)document.querySelector('.box').appendChild(p2)})</script>
</body>

结论：

  • createElement 动态创建任意 DOM 节点
  • cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
  • appendChild 在末尾（结束标签前）插入节点

再来看另一种情形的代码演示：

<body><h3>插入节点</h3><p>在现有 dom 结构基础上插入新的元素节点</p><hr><button class="btn1">在任意节点前插入</button><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><script>// 点击按钮，在已有 DOM 中插入新节点const btn1 = document.querySelector('.btn1')btn1.addEventListener('click', function () {// 第 2 个 li 元素const relative = document.querySelector('li:nth-child(2)')// 1. 动态创建新的节点const li1 = document.createElement('li')li1.style.color = 'red'li1.innerText = 'Web APIs'// 复制现有的节点const li2 = document.querySelector('li:first-child').cloneNode(true)li2.style.color = 'blue'// 2. 在 relative 节点前插入document.querySelector('ul').insertBefore(li1, relative)document.querySelector('ul').insertBefore(li2, relative)})</script>
</body>

结论：

  • createElement 动态创建任意 DOM 节点
  • cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
  • insertBefore 在父节点中任意子节点之前插入新节点

删除节点

<body><!-- 点击按钮删除节点 --><button>删除节点</button><ul><li>HTML</li><li>CSS</li><li>Web APIs</li></ul><script>const btn = document.querySelector('button')btn.addEventListener('click', function () {// 获取 ul 父节点let ul = document.querySelector('ul')// 待删除的子节点let lis = document.querySelectorAll('li')// 删除节点ul.removeChild(lis[0])})</script>
</body>

结论：removeChild 删除节点时一定是存在父子关系。

查找节点

父子关系
<body><button class="btn1">所有的子节点</button><!-- 获取 ul 的子节点 --><ul><li>HTML</li><li>CSS</li><li>JavaScript 基础</li><li>Web APIs</li></ul><script>const btn1 = document.querySelector('.btn1')btn1.addEventListener('click', function () {// 父节点const ul = document.querySelector('ul')// 所有的子节点console.log(ul.childNodes)// 只包含元素子节点console.log(ul.children)})</script>
</body>

结论：

  • childNodes 获取全部的子节点，回车换行会被认为是空白文本节点
  • children 只获取元素类型节点
<body><table><tr><td width="60">序号</td><td>课程名</td><td>难度</td><td width="80">操作</td></tr><tr><td>1</td><td><span>HTML</span></td><td>初级</td><td><button>变色</button></td></tr><tr><td>2</td><td><span>CSS</span></td><td>初级</td><td><button>变色</button></td></tr><tr><td>3</td><td><span>Web APIs</span></td><td>中级</td><td><button>变色</button></td></tr></table><script>// 获取所有 button 节点，并添加事件监听const buttons = document.querySelectorAll('table button')for(let i = 0; i < buttons.length; i++) {buttons[i].addEventListener('click', function () {// console.log(this.parentNode); // 父节点 td// console.log(this.parentNode.parentNode); // 爷爷节点 trthis.parentNode.parentNode.style.color = 'red'})}</script>
</body>
兄弟关系
<body><ul><li>HTML</li><li>CSS</li><li>JavaScript 基础</li><li>Web APIs</li></ul><script>// 获取所有 li 节点const lis = document.querySelectorAll('ul li')// 对所有的 li 节点添加事件监听for(let i = 0; i < lis.length; i++) {lis[i].addEventListener('click', function () {// 前一个节点console.log(this.previousSibling)// 下一下节点console.log(this.nextSibling)})}</script>
</body>

结论：

  • previousSibling 获取前一个节点，以相对位置查找节点。
  • nextSibling 获取后一个节点，以相对位置查找节点。
查看全文

99%的人还看了

相似问题

猜你感兴趣

版权申明

本文"【JavaScript】DOM 节点操作"：http://eshow365.cn/6-33350-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！

推荐回答

网站内容来自网络，如有侵权请联系我们，立即删除！粤ICP备2023082154号