19、DOM--首尾子节点,兄弟节点的兼容性问题

亦凉 2022-08-23 00:46 138阅读 0赞

1、 DOM节点  
     .首尾子节点  
      - firstChild (IE)  firstElementChild (火狐,谷歌)  
      - lastChild (IE)   lastElementChild (火狐,谷歌)  
       
     .兄弟节点  
      - nextSibling (IE)  nextElementSibling (火狐,谷歌)  
      - previousSibling (IE) previousElementSibling (火狐,谷歌)  
        
     .兼容性问题的解决

var first = 父节点.firstElementChild || 父节点.firstChild;

1.1  html代码

<body>
    		<input id="oValue" />
    		<button type="button" id="oBtn">点击</button>
    		<ul id="oul">
    			<li>111<a href="javascript:void(0);">删除</a></li>
    			<li>222<a href="javascript:void(0);">删除</a></li>
    			<li id="l3">333<a href="javascript:void(0);">删除</a></li>
    			<li>444<a href="javascript:void(0);">删除</a></li>
    			<li>555<a href="javascript:void(0);">删除</a></li>
    		</ul>
    </body>

1.2 JavaScript代码

<script type="text/javascript">
    			//1、firstChild 和 firstElementChild 一起使用，获取第一个子节点信息
    			window.onload = function() {
    				//关于第一个孩子节点和最后一个孩子节点的测试
    				//var oUl = document.getElementById("oul");
    				//1、获取兼容性的第一个子节点元素
    				//				var first = oUl.firstElementChild || oUl.firstChild;
    				//				first.style.backgroundColor = 'red';
    				//2、获取最后一个孩子节点
    				//var last = oUl.lastElementChild || oUl.lastChild;
    				//last.style.backgroundColor = 'red';
    				//关于兄弟节点的测试
    				//3、获取兼容性的下面的第一个兄弟节点
    				var ol = document.getElementById("l3");
    				//var nextSibling = ol.nextElementSibling || ol.nextSibling;
    				//nextSibling.style.backgroundColor = 'red';
    				//4、获取兼容性的上面的第一个兄弟节点
    				var previousSibling = ol.previousElementSibling || ol.previousSibling;
    				previousSibling.style.backgroundColor = 'red';
    			}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS获取子节点、父节点和兄弟节点的方法实例总结

1.js获取子节点的方式 1.通过获取dom方式直接获取子节点 var a = document.getElementById("test").getEle

太过爱你忘了你带给我的痛/ 2023年10月11日 14:01/ 0 赞/ 23 阅读

相关 vue获取节点的父节点、兄弟节点、子节点

<span @click="getClickInfo(event)"> </span> getClickInfo: function (e)

红太狼/ 2023年06月06日 12:04/ 0 赞/ 26 阅读

相关 JavaScript（js)节点--父节点、子节点、兄弟节点

JavaScript（js)节点–父节点子节点一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。

╰半橙微兮°/ 2022年12月22日 09:59/ 0 赞/ 260 阅读

相关 19、DOM--首尾子节点,兄弟节点的兼容性问题

1、 DOM节点 .首尾子节点 - firstChild (IE) firstElementChild (火狐,谷歌) - la

亦凉/ 2022年08月23日 00:46/ 0 赞/ 139 阅读

相关 js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); 　　var paren

た入场券/ 2022年06月17日 04:48/ 0 赞/ 460 阅读

相关 JavaScript DOM 删除子节点

这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。一个元

快来打我*/ 2022年05月21日 06:20/ 0 赞/ 552 阅读

相关 js、jquery 获取父节点、子节点、兄弟节点

一 js 获取父节点,子节点,兄弟节点 var test = document.getElementById("test"); var parent =

缺乏、安全感/ 2022年03月19日 14:34/ 0 赞/ 454 阅读

相关【JavaScript & jQuery】获取元素各个节点 (父节点,子节点,兄弟节点),元素筛选

![在这里插入图片描述][20190428142233854.png] JavaScript原生版： var test = document.getElementB

- 日理万妓/ 2022年02月20日 03:41/ 0 赞/ 354 阅读

相关关于原生js的节点兼容性

关于节点的兼容性： 1：获取元素的子节点　a:　childNodes：获取元素的子节点，空文本，非空文本，注释，获取的比较全面，　　　　　　　　　如果只是想获取元

绝地灬酷狼/ 2021年12月01日 10:56/ 0 赞/ 367 阅读

相关 JS——DOM操作（首尾子节点、兄弟节点【firstChild、previousSibling...】）

（一）首尾子节点：【首】：firstChild、 firstElementChild 【尾】：lastChild、 lastElementChild （首尾两个子节点，

向右看齐/ 2021年11月29日 12:20/ 0 赞/ 311 阅读