js获取节点时各浏览器兼容

利用js获取元素的时候，因为浏览器的不同，所支持的方法也不同，在此总结常用的获取元素节点的兼容方法

例：Html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<ul id="ul">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>

要求：1.获取任意一个父级元素的第一个子集元素

　　　2.获取任意一个父级元素的最后一个子级元素

注意事项：

1.第一个节点和第一个元素的获取的代码在IE8中可能不支持
2.element.firstChild--->谷歌和火狐获取的是第一个子几点
3.element.firstChild--->IE8获取的是第一个子元素
4.element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持

思路：1.在IE8中，如果不支持 firstElementChild 则调用该方法返回 Undefined。

　　　2.firstChild 有可能获取的是节点或者元素，所以要再做一次兼容处理

 1   function getFirstElementChild(element) {
 2     if(element.firstElementChild){//true--->支持
 3       return element.firstElementChild;
 4     }else{
 5       var node=element.firstChild;//第一个节点
 6       while (node&&node.nodeType!=1){
 7         node=node.nextSibling;
 8       }
 9       return node;
10     }
11   }
12   //获取任意一个父级元素的最后一个子级元素
13   function getLastElementChild(element) {
14     if(element.lastElementChild){//true--->支持
15       return element.lastElementChild;
16     }else{
17       var node=element.lastChild;//第一个节点
18       while (node&&node.nodeType!=1){
19         node=node.previousSibling;
20       }
21       return node;
22     }
23   }
24 
25 
26   console.log(getFirstElementChild(my$("ul")).innerText);  //输出：第一个
27   console.log(getLastElementChild(my$("ul")).innerText);   //输出：第五个

扫描二维码关注公众号，回复： 5550896 查看本文章

2.要求：获取任意元素的中间的文本内容

注意事项:

　　1.textContent属性,谷歌,火狐支持,IE8不支持

　　2.innerText属性,谷歌,火狐,IE8都支持

　　3.如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
　　4.判断这个属性的类型是不是undefined,就知道浏览器是否支持

function getInnerText(ele){

  if (!ele.textContent)  {
      return ele.innerText;  
}else{
      return ele.textContent    

}


}

js获取节点时各浏览器兼容

猜你喜欢