您的位置：首页 > 编程语言 > Java开发

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

2016-05-24 19:35 267 查看

一、子节点
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.onload=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html dom

相关文章推荐

新的分享

章节导航