1、DOM节点
什么叫节点:w3c,页面上所有的内容都可以称为节点,DOM的最小单元就是节点
DOM节点的种类:节点包含一共有12种,本节课就认识5种节点DOM节点
-
标签:元素节点:nodeType 1
-
属性:属性节点:nodeType 2
-
文本:文本节点:nodeType 3
-
注释:注释节点:nodeType 8
-
文档:文档节点:nodeType 9
DOM节点的获取 父节点.childNodes 获取父节点中所有的子节点 父节点.firstChild 获取父节点中第一个子节点 父节点.lastChild 获取父节点中最后一个子节点 节点.previousSibling 获取节点的下一个兄弟节点 节点.nextSibling 获取节点的上一个兄弟节点 节点.parentNode 获取节点的父节点
父节点.children 获取父节点中所有的子元素节点 节点.firstElementChild 获取父节点中第一个子元素节点 节点.lastElementChild 获取父节点中最后一个子元素节点 节点.previousElementSibling 获取节点的上一个兄弟元素节点 节点.nextElementSibling 获取节点的下一个兄弟元素节点 节点.parentElementNode 获取节点的父元素节点
2、节点的操作
-
创建节点
-
语法:document.createElement('标签名')
-
返回值:创建好的元素节点
-
-
追加节点
-
语法:父节点.appendChild(子节点)
-
含义:将子节点追加到父节点尾部
-
-
插入节点
-
父节点.insertBefore(新节点,旧节点)
-
-
替换节点
-
语法:父节点.replaceChild(新节点,旧节点)
-
-
删除节点
-
节点.remove()
-
父节点.removeChild()
-
-
克隆节点
-
语法:节点.cloneNode(true/false)
-
作用:克隆出来一个节点
-
true:代表克隆元素本身和元素的子元素及后台
-
false:代表克隆元素本身
-
-
<button>追加节点</button>
<button>删除最后一个节点</button>
<button>替换节点(创建一个节点,把最后一个替换掉)</button>
<button>插入节点(插入到3之前)</button>
<button>克隆节点(克隆全部ul,再追加到页面)</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
var ul = document.querySelector('ul')
var oBtns = document.querySelectorAll('button')
oBtns[0].onclick = function(){
// 创建 + 内容 + 追加
var li = document.createElement('li')
// ul.children 所以的子元素
// ul.children.length 所以子元素的长度
li.innerHTML = ul.children.length + 1;
ul.appendChild(li)
}
oBtns[1].onclick = function(){
// ul.removeChild(ul.lastElementChild)
ul.lastElementChild.remove()
}
oBtns[2].onclick = function(){
var li = document.createElement('li')
li.innerHTML = '替换节点'
ul.replaceChild(li,ul.children[4])
}
oBtns[3].onclick = function(){
var li = document.createElement('li')
li.innerHTML = '插入节点'
ul.insertBefore(li,ul.children[2])
}
oBtns[4].onclick = function(){
var newul = ul.cloneNode(true)
document.body.appendChild(newul)
}