JavaScript学习笔记之DOM基础操作实例小结
2020-11-27
来源：乌哈旅游
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下：
一、子节点
1、元素节点、文本节点
实例01
html
<body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6</ul> <!--文本节点adsasda--> <!--<span>元素节点 qeqweq</span>--> </body>
javascript
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.childNodes.length);
};
</script>
2、nodeType属性
| 常见节点 | nodeType值 |
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
实例02
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
for(vari=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
};
</script>
3、children获取元素节点
实例03
html代码
<ulid="ul1"> <li> <!--子节点只算第一层的，在这里span是li的子节点，而不是ul的子节点--> <span>子节点</span> </li> <li></li> </ul>
javascript代码
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
//children获取元素节点
//alert(oUl.children.length);
for(vari=0;i<oUl.children.length;i++){
oUl.children[i].style.background='red';
}
};
</script>
二、父节点
实例04
html代码
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};
</script>
javascript代码
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};
</script>
实例05 父节点的应用
html代码
<ulid="ul1"> <li>父节点1<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点2<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点3<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点4<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点5<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点6<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> <li>父节点7<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li> </ul>
javascript代码
<script>
/*window.onload=function(){
varoUl=document.getElementById('ul1');
alert(oUl.parentNode);
};*/
window.onload=function(){
varoA=document.getElementsByTagName('a');
for(vari=0;i<oA.length;i++){
oA[i].onclick=function(){
this.parentNode.style.display='none';
};
}
};
</script>
三、firstChild
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<script>
window.onload=function(){
varoUl=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>
<ulid="ou1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
四、通过class类获取元素、以及函数封装
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<script>
functiongetByClass(oParent,sClass){
varaResult=[];
varaEle=oParent.getElementsByTagName('*');
for(vari=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
returnaResult;
}
window.onload=function(){
varoUL=document.getElementById('ul1');
varaBox=getByClass(oUL,'box');
for(vari=0;i<aBox.length;i++){
aBox[i].style.background='red';
}
};
</script>
</head>
<body>
<ulid="ul1">
<liclass="box"></li>
<liclass="box"></li>
<li></li>
<li></li>
<liclass="box"></li>
<li></li>
</ul>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
显示全文