JavaScrip学习笔记（四）---DOM基础

致Great

发布于 2023-08-26 18:58:58

2550

文章被收录于专栏：自然语言处理自然语言处理

一、子节点

1、元素节点、文本节点

实例01

html

<body>

<ul id="ul1">

文本节点1 <li></li>

文本节点2<li></li>

文本节点3<li></li>

文本节点4<li></li>

文本节点5<li></li>

文本节点6</ul>

</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 > 子节点 </ 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 >