DOM 节点操作 & M端事件

码农阿JAY

已于 2023-11-08 12:18:33 修改

阅读量144

点赞数

分类专栏：前端【# Javascript】文章标签：前端 javascript 开发语言

于 2023-11-06 17:38:25 首次发布

本文链接：https://blog.csdn.net/WJ1178639069/article/details/134247826

版权

前端【# Javascript】专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、什么是 DOM 节点？

1.1、DOM 节点: DOM树 里每一个内容都称之为节点

1.2、DOM节点 的分类：

元素节点 比如 div标签
属性节点 比如 class属性
文本节点 比如标签里面的文字

2、查找节点

DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。

父节点 查找：parentNode 属性，返回最近一级的父节点找不到返回为null
```
子元素.parentNode
```
子节点 查找 :

childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性（重点）
仅获得所有元素节点，返回的还是一个伪 数组 

父元素.children

<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>

兄弟关系 查找：

下一个兄弟节点
nextElementSibling 属性
上一个兄弟节点
previousElementSibling 属性

<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>

3、增加节点

3.1、创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点；
创建元素节点方法：

//创建一个新的元素节点
document.createElement('新标签')

3.2、追加节点

要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:

// 要插入到这个父元素的最后
父元素.appendChild(要插入的元素)

<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>

插入到父元素中某个子元素的前面

// 要插入到某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前)

<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>

3.3、克隆节点

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点
把复制的节点放入到指定的元素内部

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为 true，则代表克隆时会包含后代节点一起克隆
若为 false，则代表克隆时不包含后代节点
默认为 false

4、删除节点

目标：能够具备根据需求删除节点的能力
若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

语法：

父元素.removeChild(要删除的元素)

注：

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从 html中删除节点

M端事件 (移动端)

目标：了解M端常见的事件： M端常见事件

码农阿JAY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录