JavaScript学习笔记之DOM基础操作实例小结
(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )
本文实例讲述了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程序设计有所帮助。
下一篇:如何解决webpack-dev-server代理常切换问题