一、子节点
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);
};
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');
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';
}
oUl. childNodes[ i]. style. background= 'red';
}
}
};
</script>
3、children获取元素节点
实例03
html代码
<
ul
id=
"ul1"
>
< li >
<!-- 子节点只算第一层的，在这里 span 是 li 的子节点，而不是 ul 的子节点 -->
< span > 子节点 </ span >
</ li >
< li ></ li >
< 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';
}
};
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 >
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 >
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 >
< 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 >
/* 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 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 >
< 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 >
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
