节点操作
作者:互联网
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