JavaScript 节点兼容性代码

JavaScript 节点兼容性代码

我们在获取节点时或许会遇到这样的代码

<ul id="uu">

  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>

</ul>

• 在ul的顶部后尾部会有一片空格，或者文字而高版本浏览器我们可以直接用console.log(ulobj.children)，或者console.log(ulobj.firstElementChild)，获取子元素来解决;

• 而低版本浏览器例如ie则无法解析console.log(ulobj.children)，console.log(ulobj.firstElementChild)；这种代码我们只能够通过子节点的方式来获取元素例如我们要在低版本浏览器中获取ul中的li标签

• 在此之前我先看一段实现依据

• nodeType 节点类型： 1–标签 2–属性 3—文本
  nodeName 节点名字： 标签节点–大写的标签名字， 属性节点—小写的属性名字， 文本节点 —#text
  nodeValue 节点值：标签节点—null， 属性节点—属性值， 文本节点—文本内容
  ：而我们下面实现的兼容性代码就是依据nodeType，nodeName ，nodeValue ；来实现的

  那我们是否可以通过一段代码来判断浏览器是不是可以解析代码，从而实现效果呢解决方案如下：

<script>
      function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
      return element.firstElementChild;
    }else{
      var node=element.firstChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.nextSibling;
      }
      return node;
    }
  }
  //获取任意一个父级元素的最后一个子级元素
  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }
</script>

下面输入验证主要是针对ie8：

  console.log(getFirstElementChild(document.element("uu")).innerText);
  console.log(getLastElementChild(document.element("uu")).innerText);

Thank you for reading