节点操作

DOM 节点

  1. DOM节点

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

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

    DOM树

  2. 节点类型

    • 元素节点

      所有的标签 比如 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. 子元素1可以是父元素中元素,也可以是新建元素(可以看做添加替换)或父元素外的元素(可以看出移动替换)
  2. 子元素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
})
posted @   丫丫learning  阅读(32)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示