A-A+

js 子节点 childNodes 学习笔记

2016年06月23日 web前端设计 评论 2 条 阅读 9 views 次

学习了 js dom 操作,js 的学习就又上了一个层次,今天学到了 dom 操作各个节点,比如涉及到子节点,父节点,相对节点,等等,当然还有较为复杂的兼容问题了,感觉好麻烦的说,暂时先把今天学到的内容做个笔记了,还有关于兼容处理方面的,或许将来能用得到。

js 子节点 childNodes 学习笔记

首先学到的是子节点,是获取某个元素下面的元素,下面的实例是给一个元素的子节点添加上一个红包的背景,实例如下:

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>js 子节点 childNodes 学习笔记</title>  
  6. <script>  
  7.     window.onload = function(){  
  8.         var oU1 = document.getElementById('u1');  
  9.           
  10.         //alert(oUL.childNodes.length); //有几个子节点  
  11.         /*  
  12.         for(var i=0;i<oU1.childNodes.length;i++){  
  13.             if(oU1.childNodes[i].nodeType == 1){  
  14.                 oU1.style.background = 'red';  
  15.             }  
  16.             //alert(oU1.childNodes[i].nodeType);      
  17.             } // 使用 nodeType解决浏览器兼容问题  
  18.         */   
  19.           
  20.         for(var i=0;i<oU1.childNodes.length;i++){  
  21.         oU1.children[i].style.background = 'red';  
  22.         }  //这一句是各种浏览器的兼容,xiariboke.com  
  23. }  
  24. </script>  
  25. </head>  
  26. <body>  
  27. <ul id="u1">  
  28. <li></li>  
  29. <li></li>  
  30. <li></li>  
  31. </ul>  
  32. </body>  
  33. </html>  

js 父节点的应用

js 父节点就是给当前节点的父节点的操作,想要获取当前节点的父节点,直接 oUl.firstChild 就OK了,在教程上面学到的这个小实例蛮有意思的,就是在 html 添加几个 LI 的样式列表,然后里面添加上文字和链接,然后点击链接的时候,当前节点就会消失掉,实例代码如下:

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>js 父节点的应用</title>  
  6. <script>  
  7. window.onload = function()  
  8. {  
  9.     var oA = document.getElementsByTagName('a');  
  10.       
  11.     for(var i=0;i<oA.length;i++){  
  12.           
  13.         oA[i].onclick = function(){  
  14.               
  15.             this.parentNode.style.display = 'none';  
  16.               
  17.         }  
  18.     }  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. <ul id="U1">  
  24.     <li>夏日博客隐藏01  <a href="javascrip:;">隐藏</a></li>  
  25.     <li>夏日博客隐藏02  <a href="javascrip:;">隐藏</a></li>  
  26.     <li>夏日博客隐藏03  <a href="javascrip:;">隐藏</a></li>  
  27.     <li>夏日博客隐藏04  <a href="javascrip:;">隐藏</a></li>  
  28.     <li>夏日博客隐藏05  <a href="javascrip:;">隐藏</a></li>  
  29. </ul>  
  30. </body>  
  31. </html>  

实例图片如下所示:

当点击隐藏按钮的时候,当前行就会隐藏掉,很好玩,也可以应用到网站上面去。

firstChild 当前节点的第一个子节点的引用.

firstChild 当前节点的第一个子节点,跟第一个例子差不多,这个只是操作子节点的第一个,相对应的还有 lastChild,好了,当然这个兼容的问题也是蛮大的,还是以第一个填充背景的实例一样,代码如下:

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>firstChild 当前节点的第一个子节点的引用</title>  
  6. <script>  
  7. window.onload = function(){  
  8.     var oUl = document.getElementById('ul1');  
  9.     if(oUl.firstElementChild){  
  10.         //低版本的IE6-8不能识别标记firstElementChild,但可以识别firstChild  
  11.         oUl.firstElementChild.style.background = 'red';  
  12.     }else{  
  13.         //高版本的浏览器能识别的标记firstElementChild,而不能识别firstChild  
  14.         oUl.firstChild.style.background = 'red';  
  15.     }//xiariboke.com  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20.    <ul id="ul1">  
  21.       <li>1</li>  
  22.       <li>2</li>  
  23.       <li>3</li>  
  24.     </ul>  
  25. </body>  
  26. </html>  

其中将 firstChild 更改为 lastChild 之后,最后一个 li 的背景会变成红色,自己在 html 里面运行一下看看显示结果吧,重点是各个浏览器下面的兼容。

标签:

2 条留言  访客:2 条  博主:0 条

  1. 爱杂侃

    jQuery用多了,原生JS都不怎么会写了

    • smiling

      还没学到 jquery,不知道跟JS有什么本质区别。

给我留言