JavaScript 节点兼容性代码
我们在获取节点时或许会遇到这样的代码
第一个
第二个
第三个
第四个
第五个
在 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
来源: https://www.2cto.com/kf/201808/774805.html