节点操作
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 })
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战