认识结点
节点: 一个小小的组成部分
我们的页面就是由若干个节点组成
常见的 DOM 节点:
- 元素节点 特指页面上的所有标签
- 属性节点 书写在标签身上的属性(原生属性 和 自定义属性)
- => 属性节点不作为独立节点出现, 只是用来修饰标签使用的
- 文本节点 所有的文本内容(包含换行和空格)
- 注释节点 所有的注释内容(包含换行和空格)
获取节点
第一类: 获取元素节点
-
获取非常规元素节点
html: document.documentElement head: document.head body: document.body
-
获取常规元素节点
document.getElementById() document.getElementsByClassName() document.getElementsByTagName() document.querySelector()document.querySelector All()
第二类: 获取节点(包括但不限于元素节点)
注意: 全都是属性, 没有方法
-
childNodes
语法: 父节点.childNodes
得到: 该父节点下的所有子一级节点
var ele = document.querySelector('div') // 1. childNodes console.log(ele.childNodes)
-
children
语法: 父节点.chidlren
得到: 该父节点下的所有子一级元素节点
-
firstChild
语法: 父节点.firstChild
得到: 该父节点下的第一个子节点
-
firstElementChild
语法: 父节点.firstElementChild
得到: 该父节点下的第一个字元素节点
- lastChild
语法: 父节点.lastChild
得到: 该父节点下的最后一个子节点\
-
lastElementChild
语法: 父节点.lastElementChild
得到: 该父节点下的最后一个字元素节点
-
previousSibling
语法: 节点.previousSibling
得到: 该节点的上一个兄弟节点(上一个哥哥节点)
-
previouesElementSibling
语法: 节点.previouesElementSibling
得到: 该节点的上一个兄弟元素节点(上一个哥哥元素)
-
nextSibling
语法: 节点.nextSibling
得到: 该节点的下一个兄弟节点(下一个弟弟节点)
-
nextElementSibling
语法: 节点.nextElementSibling
得到: 该节点的下一个兄弟元素节点(下一个弟弟元素)
-
parentNode
语法: 节点.parentNode
得到: 该节点的父节点
-
parentElement
语法: 节点.parentElement
得到: 该节点的父元素节点
-
attributes
语法: 节点.attributes
得到: 该节点的所有属性节点
// 3. firstChild
console.log(ele.firstChild)
// 4. firstElementChild
console.log(ele.firstElementChild)
// 5. lastChild
console.log(ele.lastChild)
// 6. lastElementChild
console.log(ele.lastElementChild)
// 7. previousSibling
console.log(ele.previousSibling)
// 8. previouesElementSibling
console.log(ele.previousElementSibling)
// 9. nextSibling
console.log(ele.nextSibling)
// 10. nextElementSibling
console.log(ele.nextElementSibling)
// 11. parentNode
console.log(ele.parentNode.parentNode.parentNode)
// 12. parentElement
console.log(ele.parentElement.parentElement.parentElement)
// 13. attributes
console.log(ele.attributes)
创建节点
指用 js 创建出一个节点, 但是没有插入到页面
- 创建元素节点
- + 语法: document.createElement(‘标签名’)
- + 返回值: 一个被创建出来的标签
- + 注意: 你可以自定义标签名
- 创建文本节点
- + 语法: document.createTextNode(‘文本内容’)
- + 返回值: 一个文本节点
// 1. 创建元素节点
var createEle = document.createElement('div')
console.log(createEle)
// 2. 创建文本节点
var createText = document.createTextNode('我是一个文本节点')
console.log(createText)
插入节点
指把一个节点放在另一个节点内当做子节点使用
- appendChild()
- + 语法: 父节点.appendChild(子节点)
- + 作用: 把子节点插入到父节点内部, 并且排列在最后一个的位置
- insertBefore()
- + 语法: 父节点.insertBefore(要插入的子节点, 谁的前面)
// 0. 获取元素
var pageDiv = document.querySelector('div')
var pageP = document.querySelector('p')
// 0. 创建几个节点
var creDiv = document.createElement('div')
var creSpan = document.createElement('guoxiang')
var creText = document.createTextNode('我是一段文本节点')
// 1. appendChild()
creDiv.appendChild(creSpan)
creSpan.appendChild(creText)
// 2. insertBeofre()
// 需求: 把 creDiv 插入到 pageDiv 内部并且排列在 p 的前面
pageDiv.insertBefore(creDiv, pageP)
pageDiv.appendChild(creDiv)
删除节点
指把某一个节点从本身位置删除
- removeChild()
- + 语法: 父节点.removeChild(子节点)
- + 作用: 把子节点从父节点内移除
- remove()
- + 语法: 节点.remove()
- + 作用: 把该节点自己干掉(自杀)
// 0. 获取元素
var pageDiv = document.querySelector('div')
var pageSpan = document.querySelector('span')
// 1. removeChild()
pageDiv.removeChild(pageSpan)
// 2. remove()
pageDiv.remove()
替换节点
- replaceChild()
- + 语法: 父节点.replaceChild(换上节点, 换下节点)
- + 作用: 在父节点内使用 换上节点 替换掉 换下节点
// 0. 获取元素
var ulBox = document.querySelector('ul')
var pageSpan = document.querySelector('span')
// 0. 创建一个节点
var creP = document.createElement('p')
creP.innerHTML = '你好 世界 hello world'
// 1. 替换节点
ulBox.replaceChild(creP, pageSpan)
克隆节点
把某一个节点复制一份一模一样的出来
- cloneNode()
-
+ 语法: 节点.cloneNode(参数)
=> 参数默认是 false: 不克隆后代节点
=> 参数选填是 true: 克隆后代节点
-
+ 作用: 把该节点复制一份一模一样的出来
// 0. 获取元素
var ele = document.querySelector('div')
console.log(ele)
// 1. cloneNode()
// var cloneDiv = ele.cloneNode()
var cloneDiv = ele.cloneNode(true)
console.log(cloneDiv)