节点操作
DOM 节点
-
DOM节点
DOM树:将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
DOM树里每一个内容都称之为节点
-
节点类型
-
元素节点
所有的标签 比如 body、 div
html 是根节点
-
属性节点
所有的属性 比如 href
-
文本节点
所有的文本（空格、换行、文字）
-
其他
-
查找节点
父节点查找
属性名：parentNode
返回值：返回最近一级的父节点 找不到返回为null
语法：子元素.parentNode
// 获取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前插入一个子元素
标题
// 点击创建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
})