JavaScript学习笔记之DOM基础操作实例小结

更新时间：2020-08-11 09:42:02 作者：startmvc

本文实例讲述了JavaScriptDOM基础操作。分享给大家供大家参考，具体如下：一、子节点1、元

本文实例讲述了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测试上述代码运行结果。