节点兼容

<ul id="ul">    <li>111</li>    <li>222</li>    <li id="li">333</li>    <li>444</li></ul><script>    var li=document.getElementById("li");

    function getNextElement(element){        if(element.nextElementSibling){            //火狐谷歌            return  element.nextElementSibling;        }else{            //IE8及早期浏览器            var node=element.nextElementSibling;//得到下一个节点,节点有可能是文本节点,有可能是标签节点            while(node&&node.type!=1){                //继承等于当前元素的下一个节点                node=node.nextSibling;            }            return node;        }    }    getNextElement(li).style.backgroundColor="red";</script>
时间: 2024-10-19 12:04:45

节点兼容的相关文章

JavaScript封装节点兼容代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="uu"> <li>第一个</li> <li>第二个</li> <li>第三个&

从零开始学 Web 之 DOM(四)节点

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.节点 1.节点的概念 页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点. 2.节点相关的属性 2.1.节点分类 标签节点:比如 div 标签,p 标签等.

javascript 兼容总结

1 大多数兼容性问题可通过 if(){-}else{-} 来解决 2 this 的指向问题 3 1)构造函数中的 this 指 "."前的对象 4 2)new 出来的对象,this 指当前对象 5 3)回调函数中的 this 指 window 6 4)给当前元素添加事件 this 指当前元素 7 8 JS中出现的兼容性问题的总结 9 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 10   我们都知道js通过style不可以获取行

js Dom(三)节点、元素创建3种方式、为元素绑定多个事件addEventListener、attachEvent

目录: 1.节点的概念    2.节点的属性(nodeType,nodeName,nodeValue)    3.父节点(父元素)    4.获取子节点或子元素    5.获取节点.元素的方法(12行代码)    6.案例:div标签里面的p标签背景高亮(使用子节点或子元素的方式)    7.封装节点兼容代码    8.案例:切换背景图片    9.案例:全选.全不选    10.元素创建的第一种方式  document.write("<p>文本</P>"); 

DOM操作HTML元素属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作HTML元素属性</title> </head> <body> <ul> <li></li> <li></li> <li></li> <

DOM,BOM

1.DOM:文档对象模型(Document Object Model) 1)子节点:只是这一代的后代,不会计算后代的后代  1.childNodes:获取子节点,    --IE6-8:获取的是元素节点,正常    --高版本浏览器:但是会包含文本节点和元素节点(不正常) 2.nodeType:节点的类型    --nodeType=3-->文本节点    --nodeTyPE=1-->元素节点    所以获取元素节点兼容的方法:      for(var i=0;i<oUL.child

8.1.2 CSS3选择器 —— 结构性伪类

1.1 E:nth-child(n):表示E父元素的第n个子节点 p:nth-child(odd){ background: red } /* 匹配奇数行 */ p:nth-child(even){ background: red } /* 匹配偶数行 */ p:nth-child(2n){ background: red } /* 自定义行数 */ 1.2 E:nth-last-child(n):表示E父元素的第n个子节点,从后向前计算 2.1 E:nth-of-type(n):表示E父元素中

javascript基础07

1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有12种 标准下:包含了文本节点和元素节点,也会包含非法嵌套的子节点 非标准下:包含元素节点,ie7以下不会包含非法包含的嵌套的子节点 非标准就是IE7以下 常用文本节点.元素节点 空节点也是文本节点 判断节点的类型:元素.nodeType : 只读 属性 当前元素节点的类型返回值为1.2.3.4.51:元素节点2:属性节点3:文

javascript——DOM之firstChild,lastChild,NextSibling,previousSibling

元素.firstChild : 只读 属性 第一个子节点 标准下:firstChild会包含文本类型的节点 非标准下:只包含元素节点 元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点 兼容标准和非标准浏览器的写法: HTML代码: <ul id="ul1"> <li>11111</li> <li>22222</li> <li>33333</li> <li&