夏日博客

A-A+

js 子节点 childNodes 学习笔记

2016年06月23日 前端设计 评论 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.net  
  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.net  
  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. 爱杂侃 2016年06月23日 下午 5:39  -199楼  回复

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

    • smiling 2016年06月23日 下午 11:41  地下1层  回复

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

给我留言