文本内容颜色标注含义:绿色:内容需要了解;红色:内容重要需要熟记,因编写内容时会遇到;
天蓝色:常用的几种案例;深蓝色:在现在的市场上运用到的较少;粗黑:需要留意这种写法或者是使用方式;橙色:常用的是与前面几种案例合并;
节点至少拥有三个属性:nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值),元素节点:nodeType:1,属性节点:nodeType:2,文本节点:nodeType:3
1,node.parentNode,返回某节点的父节点,返回最近一个父节点,如果没有父节点返回null。
<div class="demo">
<div class="box"></div>
</div>
<script>
var box = document.querySelector(".box");
console.log(box.parentNode);//返回父级节点
</script>
2,childNodes返回包含指定节点的子节点的集合,返回所有子节点,包括文本节点,元素节点。
<div class="demo">
<div class="box">文本节点</div>
</div>
<script>
var demo = document.querySelector(".demo");
console.log(demo.childNodes);
console.log(demo.childNodes[0].nodeType);
</script>
3, children 只返回所有的子元素节点,其余节点不返回(例如:文本节点)。
<div class="demo">
<div class="box">文本节点</div>
<div class="box">文本节点</div>
<div class="box">文本节点</div>
</div>
<script>
var demo = document.querySelector(".demo");
console.log(demo.children);
</script>
4, firstChild 返回第一个子节点,找不到返回null,包含所有节点。
<script>
var demo = document.querySelector(".demo");
console.log(demo.firstChild);
</script>
5,firstChild 返回最后一个子节点,找不到返回null,包含所有节点。
<script>
var demo = document.querySelector(".demo");
console.log(demo.lastChild);
</script>
6, firstElementChild 返回第一个子元素节点,找不到返回null。Ie9以上支持。
<script>
var demo = document.querySelector(".demo");
console.log(demo.firstElementChild);
</script>
7,lastElementChild 返回最后一个子元素节点,找不到返回null。Ie9以上支持。8
<script>
var demo = document.querySelector(".demo");
console.log(demo.lastElementChild);
</script>
8, 二级菜单(完整版)
<div class="nav">
<ul>
<li>
<a href="">微博</a>
<div>
<a href="">私信</a>
<a href="">评论</a>
<a href="">我的</a>
</div>
</li>
</ul>
<div class="c"></div>
</div>
<script>
var nav = document.querySelector(".nav ul");
var lis = nav.children;//获得子节点
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
this.children[1].style.display = "block";
}
lis[i].onmouseout = function(){
this.children[1].style.display = "none";
}
}
</script>
9, nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
var nav = document.querySelector(".nav");
console.log(nav.nextSibling);
console.log(nav.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(nav.nextElementSibling);
console.log(nav.previousElementSibling);
第二种获得元素节点有兼容问题,封装一个函数获得下一个元素节点:
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
10, document.createElement(‘tagName’) 创建指定的HTML元素
<ul></ul>
<script>
var li = document.createElement("li");//先创建节点
var ul = document.querySelector("ul");
ul.appendChild(li);//在添加节点到指定元素的末尾
li.innerHTML="123";
lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);//添加一个元素在指定子元素之前
</script>
11, node.removeChild() 方法从 node节点中删除一个子节点,返回删除的节点
<input type="button" name="" value="删除节点"/>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var btn = document.querySelector("input");
var ul = document.querySelector("ul");
btn.onclick = function(){
if(ul.children.length==0){
this.disabled = true;
}else{
ul.removeChild(ul.children[0]);
}
}
</script>
12, node.cloneNode();克隆节点括号为空或false为浅拷贝,只复制标签不复制内容,括号为true为深拷贝,复制标签也复制内容。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>