目录
1.Node类型
(1)属性
<1>nodeName:返回节点名称
代码:
// 1.返回节点名称 nodeName
var ulList=document.querySelector('ul');
var li=document.querySelector('.three');
var ya=document.querySelector('.four');
var btn=document.querySelector('button');
var add=document.getElementsByClassName('btn')[0];
console.log(ulList.nodeName);
运行结果:
<2>parentNode:返回当前节点的父节点
代码:
// 2.返回当前节点的父级节点 parentNode
var ulList=document.querySelector('ul');
console.log(ulList.parentNode.parentNode);
运行结果:
<3>childNodes:返回所有子节点,返回NodeList类数组对象
代码:
// 3.***childNodes*** 返回所有子节点 得到的是类数组
var ulList=document.querySelector('ul');
console.log(ulList.childNodes);
运行结果:
<4>firstChild:返回第一个子节点,没有则返回null
代码:
// 4.返回第一个子节点 firstChild
var ulList=document.querySelector('ul');
console.log(ulList.firstChild);
运行结果:
<5>lastChild:返回最后一个子节点,没有则返回null
代码:
// 5.返回最后一个子节点 lastChild
var ulList=document.querySelector('ul');
console.log(ulList.lastChild);
运行结果:
<6>previousSibling:返回上一个节点,没有则返回null
代码:
// 6.返回上一个节点 previousSibling
var ulList=document.querySelector('ul');
console.log(li.previousSibling);
运行结果:
<7>nextSibling:返回下一个节点,没有则返回null
代码:
// 7.返回下一个节点 nextSibling
var ulList=document.querySelector('ul');
console.log(li.nextSibling);
运行结果:
(2)方法
<1>hasChildNodes():返回布尔值,表示是否有子节点
代码:
// 判断是否有子节点 hasChildNoeds() 得到的是布尔值
var li=document.querySelector('.three');
console.log(li.hasChildNodes());
运行结果:
<2>向当前节点末尾添加子节点
1)document.createElement('节点名称'):创建节点
2)appendChild(新节点):向当前节点末尾添加子节点
代码:
//1.向当前节点末尾添加子节点 appendChild() 父元素.appendChild(新节点)
btn.onclick=function(){
// 1.创建li标签
var newLi=document.createElement('li');
newLi.innerHTML=Math.random();
// 2.向ul添加li标签
ulList.appendChild(newLi);
}
运行结果:
<3>向指定位置添加节点
1)document.createElement('节点名称'):创建节点
2)insertBefore(新节点,参照节点 )
代码:
// 2.向指定位置添加 insertBefore(新节点,参照节点)
add.onclick=function(){
// 1.创建li标签
var newLi=document.createElement('li');
// 1.1丰富li标签内容
newLi.innerHTML=Math.round(Math.random());
// 2.向ul添加li标签
ulList.insertBefore(newLi,li);
}
运行结果:
<4>替换:replaceChild(新节点,替换节点)
代码:
// 二:替换 父元素.replaceChild(新节点,替换节点)
var newl=document.createElement('li');
newl.innerHTML='烤鸡爪';
ulList.replaceChild(newl,ya);
运行结果:
<5>删除:removeChild(子节点)
代码:
// 删除 父元素.removeChild(子节点)
ulList.removeChild(li);
运行结果:
<6>克隆:cloneNode(布尔值):用于克隆节点
(true是克隆子节点,默认flase是不克隆子节点)
代码:
// 克隆 cloneNode(布尔值) true克隆子节点 false不克隆子节点 默认是false
var newThree=li.cloneNode(true);
ulList.appendChild(newThree);
运行结果:
2.DOM扩展知识
(1)childElementCount:返回子元素的个数
代码:
// childElementCount:返回子元素的个数
console.log(ulList.childElementCount);
运行结果:
(2)children:返回元素子节点
代码:
// children:返回元素子节点
console.log(ulList.children);
运行结果:
(3)firstElementChild:指向第一个子元素
代码:
// ***返回第一个子节点*** firstELementChild
console.log(ulList.firstElementChild);
运行结果:
(4)lastElementChild:指向最后一个子元素
代码:
// ***返回最后一个子节点*** lastELementChild
console.log(ulList.lastElementChild);
运行结果:
(5)previousElementSibling:指向上一个同辈元素
代码:
// ***返回上一个节点*** previousElementSibling
console.log(li.previousElementSibling);
运行结果:
(6)nextElementSibling:指向下一个同辈元素
代码:
// ***返回下一个节点*** nextElementSibling
console.log(li.nextElementSibling);
运行结果:
(7)innerHTML:可读写,获取或替换元素所有子节点
(8)innerText:可读写,获取或替换元素所有文本
(9)outerHTML:可读写,获取或替换元素所有子节点(包含自身)
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>烤羊腿</li>
<li>烤猪蹄</li>
<li class="three">烤五花肉</li>
<li class="four">烤鸭</li>
</ul>
<button>添加li</button>
<button class="btn">指定位置添加</button>
</body>
<script>
// ***********************属性**********************
// 1.返回节点名称 nodeName
var ulList=document.querySelector('ul');
var li=document.querySelector('.three');
var ya=document.querySelector('.four');
var btn=document.querySelector('button');
var add=document.getElementsByClassName('btn')[0];
console.log(ulList.nodeName);
// 2.返回当前节点的父级节点 parentNode
console.log(ulList.parentNode.parentNode);
// childElementCount:返回子元素的个数
// console.log(ulList.childElementCount);
// 3.***childNodes*** 返回所有子节点 得到的是类数组
console.log(ulList.childNodes);
// children:返回元素子节点
// console.log(ulList.children);
// 4.返回第一个子节点 firstChild
console.log(ulList.firstChild);
// ***返回第一个子节点*** firstELementChild
// console.log(ulList.firstElementChild);
// 5.返回最后一个子节点 lastChild
console.log(ulList.lastChild);
// ***返回最后一个子节点*** lastELementChild
// console.log(ulList.lastElementChild);
// 6.返回上一个节点 previousSibling
console.log(li.previousSibling);
// ***返回上一个节点*** previousElementSibling
// console.log(li.previousElementSibling);
// 7.返回下一个节点 nextSibling
console.log(li.nextSibling);
// ***返回下一个节点*** nextElementSibling
// console.log(li.nextElementSibling);
// *********************方法*********************
// 判断是否有子节点 hasChildNoeds() 得到的是布尔值
console.log(li.hasChildNodes());
// 创建节点 document.createElement('节点名称')
// var newLi=document.createElement('li');
// 一:添加
//1.向当前节点末尾添加子节点 appendChild() 父元素.appendChild(新节点)
// ulList.appendChild(newLi);
btn.onclick=function(){
// 1.创建li标签
var newLi=document.createElement('li');
newLi.innerHTML=Math.random();
// 2.向ul添加li标签
ulList.appendChild(newLi);
}
// 2.向指定位置添加 insertBefore(新节点,参照节点)
add.onclick=function(){
// 1.创建li标签
var newLi=document.createElement('li');
// 1.1丰富li标签内容
newLi.innerHTML=Math.round(Math.random());
// 2.向ul添加li标签
ulList.insertBefore(newLi,li);
}
// 二:替换 父元素.replaceChild(新节点,替换节点)
// var newl=document.createElement('li');
// newl.innerHTML='烤鸡爪';
// ulList.replaceChild(newl,ya);
// 删除 父元素.removeChild(子节点)
// ulList.removeChild(li);
// 克隆 cloneNode(布尔值) true克隆子节点 false不克隆子节点 默认是false
// var newThree=li.cloneNode(true);
// ulList.appendChild(newThree);
</script>
</html>
运行结果: