首页 > 其他分享> 文章详细

节点操作

2022-05-21 08:33:12 阅读：150 来源： 互联网

标签：img h2 元素操作 div document 节点

DOM 节点

DOM节点

DOM树:将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

DOM树里每一个内容都称之为节点
节点类型
- 元素节点
  
  所有的标签比如 body、 div
  
  html 是根节点
- 属性节点
  
  所有的属性比如 href
- 文本节点
  
  所有的文本（空格、换行、文字）
- 其他

查找节点

父节点查找

属性名：parentNode

返回值：返回最近一级的父节点找不到返回为null

语法：子元素.parentNode

  <div>
    <!-- 注释 -->
    <p>段落</p>
    文字
    <h2>标题</h2>
    <span>span</span>
    <a href="http://www.baidu.com">链接</a>
  </div>

    // 获取p所在的div
    const p = document.querySelector('div p')
    const div = p.parentNode

子节点查找

属性名：childNodes

返回值：一个节点伪数组，包含所有子节点，包括文本节点（空格、换行）、注释节点等,

语法：父元素.childNodes

console.log(div.childNodes)

属性名：children

返回值：一个节点伪数组，包含所有元素节点

语法：父元素.children

console.log(div.children)

兄弟节点查找

属性名：nextElementSibling

返回值：下一个元素兄弟节点

语法：元素.nextElementSibling

属性名：previousElementSibling

返回值：上一个元素兄弟节点

语法：元素.previousElementSibling

属性名：previousSibling/nextSibling

返回值：上一个兄弟节点/下一个兄弟节点

语法：元素.previousSibling

    const h2 = document.querySelector('div h2')
    // 前一个元素兄弟节点
    console.log(h2.previousElementSibling)
    // 前一个兄弟节点
    console.log(h2.previousSibling)
    // 后一个元素兄弟节点
    console.log(h2.nextElementSibling)

增加节点

创建节点

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

创建元素节点方法：document.createElement('标签名')

创建文本节点：document.createTextNode('文本内容')

追加节点

语法：父元素.appendChild(子元素)

作用：在父元素的最后插入一个子元素

语法： 父元素.insertBefore(要插入的子元素，子元素a)

作用：在父元素中子元素a前插入一个子元素

  <input type="button" value="点击">
  <div>
    <h2>标题</h2>
    <img src="./images/tianshi.gif" alt="">
  </div>

    // 点击创建img，放到div
    const btn = document.querySelector('input')
    const div = document.querySelector('div')
    const h2 = document.querySelector('h2')

    btn.addEventListener('click', function () {
      const img = document.createElement('img')
      const node = document.createTextNode('文本节点')

      // 追加元素
      // 追加到父节点内部的最后
      //div.appendChild(img)
      div.appendChild(node)
      // 添加属性
      img.src = './images/tianshi.gif'

      // 插入元素
      div.insertBefore(img, h2)
    })

克隆节点

语法：元素.cloneNode(布尔值)

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

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

  btn.addEventListener('click', function () {
      const re = div.cloneNode(true)
      document.body.appendChild(re)
    })

删除节点

语法：父元素.removeChild(子元素)

注：如不存在父子关系则删除不成功

    btn.addEventListener('click', function () {
      const img = document.querySelector('img')
      
      // 删除节点
      // const div = document.querySelector('div')
      // div.removeChild(img)
      img.parentNode.removeChild(img)
    })

替换节点

语法：父元素.replaceChild(子元素1, 子元素2)

作用：在父元素中，用子元素1替换子元素2

注意：

子元素1可以是父元素中元素，也可以是新建元素（可以看做添加替换）或父元素外的元素（可以看出移动替换）

子元素2为父元素中的元素，执行替换后元素2就不存在了

let h2 = document.querySelector('h2')
    const img = document.querySelector('img')

    btn.addEventListener('click', function () {
      const h5 = document.createElement('h5')
      h5.innerHTML = 'h5标题'
      // div.replaceChild(h5, h2) 
      div.replaceChild(img, h2) 

      // h2被移除
      // h2 = document.querySelector('h2')
      // console.log(h2)//null
    })

标签：img,h2,元素,操作,div,document,节点
来源： https://www.cnblogs.com/yyshow/p/16294354.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9