childNodes操作

最新推荐文章于 2024-05-13 13:37:50 发布

卖猹的西瓜君

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量1.5k

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/weixin_36038649/article/details/79394617

版权

js基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
  <! 
  DOCTYPE html 
  > 
 
  <html 
   lang= 
  "en" 
  > 
 
  <head> 
 
  <meta 
   charset= 
  "UTF-8" 
  > 
 
  <meta 
   name= 
  "viewport" 
   content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  <meta 
   http-equiv= 
  "X-UA-Compatible" 
   content= 
  "ie=edge" 
  > 
 
  <title>Document 
  </title> 
 
  </head> 
 
  <body> 
 
  <ul> 
 
  <li>1 
  </li> 
 
  <li>2 
  </li> 
 
  <li>3 
  </li> 
 
  <li>4 
  </li> 
 
  <li>5 
  </li> 
 
  </ul> 
 
  <script> 
 
  var 
  ul 
  = 
  document. 
  getElementsByTagName( 
  'ul')[ 
  0]; 
 
  console. 
  log( 
  ul. 
  childNodes) 
 
  function 
  getElements( 
  node){ 
 
  // 1 获取childNodes 
 
  var 
  nodes 
  = 
  node. 
  childNodes; 
 
  var 
  n 
  = []; 
 
  for( 
  var 
  i 
  = 
  0; 
  i 
  < 
  nodes. 
  length; 
  i 
  ++){ 
 
  if( 
  nodes[ 
  i]. 
  nodeType 
  === 
  1){ 
 
  n. 
  push( 
  nodes[ 
  i]) 
 
   } 
 
   } 
 
  return 
  n; 
 
   } 
 
  console. 
  log( 
  getElements( 
  ul)); 
 
  /* for(var i = 0;i<ul.childNodes.length;i++){ 
 
   alert(ul.childNodes[i].nodeName) 
 
   } */ 
 
  // alert(ul.childNodes.length) 
 
  // console.log(ul.children) 
 
  // alert(ul.children.length) 
 
  // alert(ul.getElementsByTagName('*').length) 
 
  < 
  /script> 
 
  </body> 
 
  </html> 
 
  <!--  
 
   childNodes获取到的是DOM对象下所有的节点（包含文本节点，元素节点，注释节点）  
 
   IE8和主流浏览器获取到的内容不同，不包含文本节点，只包含 元素节点，注释节点 
 
   childNodes中文本节点输出的是换行符，根本原因是HTML结构中的换号导致的 
 
   children获取到元素中element对象集合，但是在IE8中会获取注释节点（解决办法，不在对应的结构中写注释） 
 
   兼容childNodes 
 
   function getElements(node){ 
 
   // 1 获取childNodes 
 
   var nodes = node.childNodes; 
 
   var n = []; 
 
   for(var i = 0;i<nodes.length;i++){ 
 
   if(nodes[i].nodeType === 1){ 
 
   n.push(nodes[i]) 
 
   } 
 
   } 
 
   return n; 
 
   } 
 
   function getEven(arr){ 
 
   var n = []; 
 
   for(var i = 0;i<arr.length;i++){ 
 
   if(!(arr[i] % 2)){ 
 
   n.push(arr[i]); 
 
   } 
 
   } 
 
   return n; 
 
   } 
 
   获取第一个元素节点 
 
   主流浏览器 
 
   firstElementChild 获取到childNodes中的第一个元素节点 
 
   IE8及以下没有该属性（也不需要有） 
 
   firstChild获取的是childNodes中的第一个节点 
 
   lastElementChild 
 
   lastChild 同上，是最后一个 
 
   获取兄弟节点 
 
   nextSibling 
 
   nextElementSibling 
 
   previousSibling 
 
   previousElementSibling 
 
   IE8不存在所有的关于element的查询操作 
 
  -->

卖猹的西瓜君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
childNodes操作

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
复制链接

扫一扫