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

2019-11-19 12:18:21

字体：大中小

来源：转载

供稿：网友

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：element-ui 时间选择器限制范围的实现（随动）

下一篇：如何解决webpack-dev-server代理常切换问题