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

最新推荐文章于 2022-09-09 13:38:08 发布

weixin_30326515

最新推荐文章于 2022-09-09 13:38:08 发布

阅读量143

点赞数

原文链接：http://www.cnblogs.com/shadowsmile/p/10541939.html

版权

利用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.要求：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);   //输出：第五个

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

注意事项:

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

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

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

function getInnerText(ele){

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

}


}

3.要求:为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数

注意事项:

　　1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
　　2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

　　3.更坑的是，IE8的事件类型，要加on，所以兼容代码实现如下：

function addEventListener(ele,type,fn){
//判断浏览器是否支持
 if(ele.addEventListener){
      ele.addEventListener(type,fn,false);
    }else if(ele.attachEvent){
      ele.attachEvent("on"+type,fn);
    }else{
      ele["on"+type]=fn;
    } 
    



}

4.要求：为任意的一个元素，解绑对应的事件

　　　注意:用什么方式绑定事件,就应该用对应的方式解绑事件

　　　　 1.解绑事件
　　　　　　对象.on事件名字=事件处理函数--->绑定事件
　　　　　　对象.on事件名字=null;
　　　　2.解绑事件
　　　　　　对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
　　　　　　对象.removeEventListener("没有on的事件类型",函数名字,false);
　　　　3.解绑事件
　　　　　　对象.attachEvent("on事件类型",命名函数);---绑定事件
　　　　　　对象.detachEvent("on事件类型",函数名字);

  //解绑事件的兼容
  //为任意的一个元素,解绑对应的事件
  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }

转载于:https://www.cnblogs.com/shadowsmile/p/10541939.html

weixin_30326515

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js获取节点时各浏览器兼容

利用js获取元素的时候，因为浏览器的不同，所支持的方法也不同，在此总结常用的获取元素节点的兼容方法例：Html页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title><...
复制链接

扫一扫