一、子节点
1、元素节点、文本节点
实例01
html
<body>
<ul id="ul1">
文本节点1 <li></li>
文本节点2<li></li>
文本节点3<li></li>
文本节点4<li></li>
文本节点5<li></li>
文本节点6</ul>
<!--文本节点 adsasda-->
<!--<span>元素节点 qeqweq </span>-->
</body>
script
<
script
>
window.
onload=
function(){
var
oUl=
document.
getElementById(
'ul1');
alert(
oUl.
childNodes.
length);
};
</script>
2、nodeType属性
常见节点 | nodeType值 |
元素节点 | 1 |
属性节点 | 2 |
文本节点 | 3 |
实例02
<
script
>
window.
onload=
function(){
var
oUl=
document.
getElementById(
'ul1');
for(var i=0;i<oUl.childNodes.length;i++){
if(
oUl.
childNodes[
i].
nodeType==
1){
oUl.
childNodes[
i].
style.
background=
'red';
}
}
};
</script>
3、children获取元素节点
实例03
html代码
<
ul
id=
"ul1"
>
<
li
>
<!--
子节点只算第一层的，在这里
span
是
li
的子节点，而不是
ul
的子节点
-->
<
span
>
子节点
</
span
>
</
li
>
<
li
></
li
>
</ul>
javascript代码
<
script
>
window.
onload=
function(){
var
oUl=
document.
getElementById(
'ul1');
//children
获取元素节点
//alert(oUl.children.length);
for(
var
i=
0;
i<
oUl.
children.
length;
i++){
oUl.
children[
i].
style.
background=
'red';
}
};
</script>
二、父节点
实例04
html代码
<
script
>
window.
onload=
function(){
var
oUl=
document.
getElementById(
'ul1');
alert(
oUl.
parentNode);
};
</
script
>
javascript代码
<
script
>
window.
onload=
function(){
var
oUl=
document.
getElementById(
'ul1');
alert(
oUl.
parentNode);
};
</
script
>
实例05 父节点的应用
html代码
<
ul
id=
"ul1"
>
<
li
>
父节点1
<
a
href=
"javascript:;"
>
隐藏
</
a
></
li
>
<
li
>
父节点2
<
a
href=
"javascript:;"
>
隐藏
</
a
></
li
>
<
li
>
父节点3
<
a
href=
"javascript:;"
>
隐藏
</
a
></
li
>
<
li
>
父节点4
<
a
href=
"javascript:;"
>
隐藏
</
a
></
li
>
<
li
>
父节点5
<
a
href=
"javascript:;"
>
隐藏
</
a
></
li
>
<
li
>
父节点6
<
a
href=
"javascript:;"
>
隐藏
</
a
></
li
>
<
li
>
父节点7
<
a
href=
"javascript:;"
>
隐藏
</
a
></
li
>
</
ul
>
javascript代码
<
script
>
/* window.οnlοad=function(){
var oUl=document.getElementById('ul1');
alert(oUl.parentNode);
};*/
window.
onload=
function(){
var
oA=
document.
getElementsByTagName(
'a');
for(
var
i=
0;
i<
oA.
length;
i++){
oA[
i].
onclick=
function(){
this.
parentNode.
style.
display=
'none';
};
}
};
</
script
>
三、firstChild
<!DOCTYPE html >
< html lang= "en" >
< head >
<
meta charset= "UTF-8" >
<
title ></
title >
<
script >
window. onload=
function(){
var oUl=
document. getElementById(
'ou1');
//IE6-8 //oUl.firstChild.style.background='red'; // 高级浏览器 //oUl.firstElementChild.style.background='red'; // 兼容 if( oUl.
firstElementChild){
oUl.
firstElementChild. style. background= 'red';
}
else{
oUl.
firstChild. style. background= 'red';
}
};
</
script >
</ head >
< body >
<
ul id= "ou1" >
<
li >1
</
li >
<
li >2
</
li >
<
li >3
</
li >
</
ul >
</ body >
</html>
四、通过class类获取元素、以及函数封装
<!DOCTYPE html >
< html lang= "en" >
< head >
<
meta charset= "UTF-8" >
<
title ></
title >
<
script >
function getByClass(oParent,sClass){
var aResult=[];
var aEle=oParent.
getElementsByTagName(
'*');
for( var i=
0;
i<
aEle.
length; i++){
if( aEle[
i].
className==sClass){
aResult.
push(
aEle[
i]);
}
}
return aResult;
}
window. onload=
function(){
var oUL=
document. getElementById(
'ul1');
var aBox=
getByClass(
oUL,
'box');
for( var i=
0;
i<
aBox.
length; i++){
aBox[
i].
style. background= 'red';
}
};
</
script >
</ head >
< body >
< ul id= "ul1" >
<
li class= "box" ></
li >
<
li class= "box" ></
li >
<
li ></
li >
<
li ></
li >
<
li class= "box" ></
li >
<
li ></
li >
</ ul >
</ body >
</ html >
