DOM节点
节点:页面上所有的内容都可以称为节点,DOM的最小就是节点
(标签:元素节点:nodeType 1)
(属性:属性节点: nodeType 2)
(文本:文本节点:nodeType 3)
(注释:注释节点:nodeType 8)
(文档:文档节点:nodeType 9)
如何获取节点:通过节点关系(父子关系,兄弟关系)来获取
父节点.firstChild:获取父元素的第一个子节点
节点.nextSibling:节点的下一个兄弟节点
节点.perviousSibling:节点的上一个兄弟节点
父节点.lastChild:父节点的最后一个子节点
节点.parentNode:节点的父节点
父节点.childNodes:获取所有的子节点(伪数据)
获取元素节点:
父节点.firstElementChild:获取父元素的第一个元素节点
节点.nextElementSibling:节点的下一个兄弟元素节点
节点.previousElementSibing:节点的上一个兄弟元素节点
父节点.lastElementChild:父节点的最后一个子元素节点
节点.parentElement:节点的父元素节点(兼容性不好,不用这个)
父节点.children:获取所有的子元素节点(伪数组)
DOM节点的操作:
<div id="box">
<p>嘻嘻</p>
<p>哈哈</p>
</div>
1.创建节点:
语法:document.creatElemnt(' 标签名 ')
返回值:创建好的元素节点
代码例子
var oBtn = document.createElement('button');
console.log(oBtn);
oBtn.innerText = '我是按钮'
var oBox = document.getElementById('box')
2.追加节点:
语法:父节点.aappendChild
含义:将子节点追加到父节点的尾部
列子:document.body.appendChild(子节点)
代码例子
oBox.appendChild(oBtn);//把创建好的oBtn添加到oBox中
3.插入节点
语法:父节点.insertBefore(子节点,谁的前面的谁)
含义:将子节点插入到父节点的指定位置
例子:oBox.insertBefore(oBtn,oBox.firstchild);将button插入到oBox的头部
代码例子
//需求:将创建好的button插入到哈哈和嘻嘻中间
插入节点
父节点.children: 数组,所有的标签
oBox.insertBefore(oBtn,oBox.children[1])
4.替换节点
语法:父节点.replaceChild(新节点,旧节点(位置))不常用
代码例子
替换节点 需求:把哈哈替换成btn
oBox.replaceChild(oBtn,oBox.children[1])
5.删除节点
语法:父节点.removeChild(子节点)
节点.remove()最常用
代码例子
删除节点 删除嘻嘻节点
oBox.children[0].remove();
oBox.removeChild(oBox.children[0])
6.克隆节点
语法:节点.cloneNode(true/false)
作用:克隆出来一个节点
true:代表克隆元素本身和元素的子元素以及后台
false:代表克隆元素本身
代码例子
console.log(oBox.cloneNode(false));
console.log(oBox.cloneNode(true));