根据DOM，HTML文档中的每个成分都是一个节点。
整个文档就是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
一、如何获得节点的引用
1.旧的获取节点引用的方式
getELementById();
getElementsByName();
getElementsByTagName();
-----------------
劣势：
1.浪费内存；
2.逻辑性不强。
-----------------
2.通过节点 关系属性获得节点的引用
对象.parentNode 获得父节点的引用
对象.childNodes 获得子节点的集合
对象.firstChild 获得第一个子节点的引用
对象.lastChild 获得最后一个子节点的引用
对象.previousSibling 获得上一个兄弟节点的引用
对象.nextSibling 获得下一个兄弟节点的引用
--------------
劣势：
兼容性不好
--------------
二、节点的信息（属性）
节点类型 节点名字 节点值
nodeType nodeName nodeValue
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
三、兼容性函数
1.获得所有子节点的兼容方法
function getChilds(obj){
var childs=obj.childNodes;
var arr=[];
for(var i=0;i<childs.length;i++){
if(childs[i].nodeType==3 && /^\s+$/.test(childs[i].nodeValue)){
continue;
}else{
arr.push(childs[i]);
}
}
return arr;
}
2.获得最后一个子节点的兼容性方法
funtion getLastChild(obj){
var last=obj.lastChild;
while(last.nodeType==3 && /^\s+$/.test(last.nodeValue)){
last=last.previousSibling;
}
return last;
}
3.获得第一个子节点的兼容性方法
function getFirstChild(obj){
var first=obj.firstChild;
while(first.nodeType==3 && /^\s+$/.test(first.nodeValue)){
first=first.nextSibling;
}
return first;
}
4.获得上一个兄弟节点的兼容性方法
function getPreSibling(obj){
var preSibling=obj.previousSibling;
while(preSibling.nodeType==3 && /^\s+$/.test(preSibling.nodeValue)){
preSibling=preSibling.previousSibling;
}
return preSibling;
}
5.获得下一个兄弟节点的兼容性方法
function getNextSibling(obj){
var nextSib=obj.nextSibling;
while(nextSib.nodeType==3 && /^\s+$/.test(nextSib.nodeValue)){
nextSib=nextSib.nextSibling;
}
return nextSib;
}
四、实例：实现点击切换 隐藏和显示 两种状态
1.dom节点：
<body>
<ul>
<li class="one">第一选项</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
<ul>
<li class="one">第二选项</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
<ul>
<li class="one">第三选项</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
</body>
2.script代码：
<script>
window.onload=function(){
var lis=document.getElementsByClassName('one');
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
if(nextNode(this).style.display==""){
nextNode(this).style.display="none";
}else{
nextNode(this).style.display="";
}
}
}
function nextNode(obj){
var nexts=obj.nextSibling;
while(nexts.nodeType==3){
nexts=nexts.nextSibling;
}
return nexts;
}
}
</script>
网友评论