`

原生JS之lastChild和lastElementChild、childNodes和children区别

阅读更多

【前言】

    最近讲课讲到DOM操作和遍历,之前讲课只讲了普通获取节点方法,今天又讲了个升级版。这里备注下,以后再讲课强调下

 

【主体】

(1)原生JS遍历时操作如下

childNodes 获取所有子节点(包括包括文本节点、注释节点即回车、换行、空格、文本等等)
firstChild 获取第一个子节点(可以为注释节点)
lastChild 获取最后一个子节点(与firstChild类似)
parentNode 返回给定节点的父级节点
nextSibling 返回给定节点的下一个节点
previousSibling 返回给定节点的上一个节点

注意:上面写法是IE8之前旧版本写法,也可以在IE8以上及IE9+正常运行。但随着更新,出现新方法选取子节点,同时可以进行过滤,只获取元素节点。

 

(2)新方法--兼容IE9+

children 返回元素子节点(元素节点)
firstElementChild 返回第一个子节点(元素节点)
lastElementChild 返回最后一个子节点(元素节点)
parentElement 父节点(元素节点)
nextElementSibling 返回元素的上一个兄弟元素节点(不包括文本节点、注释节点)
previousElementSibling 返回元素的下一个兄弟元素节点(不包括文本节点、注释节点)

 注意: 空格、回车也会看作文本,以文本节点对待

 

(3)previousSibling 模拟 previousElementSibling:

 

                        <div id="box">
			    <ul id="ul">
			        <li>第一个</li>
			        <li id="one">第二个</li>
			        <li>第三个</li>
			    </ul>
			    <p>我是第二个子节点</p>
			</div>
			function myPre(ele){
			    if(ele.previousElementSibling !== undefined){
			        return ele.previousElementSibling;
			    }else{
			        var item = ele.previousSibling;
			        while(item && item.nodeType !=1){
			            item = item.previousSibling;
			        }
			        return item;
			    }
			}
			var oNe = document.getElementById("one");
			console.log(myPre(oNe));
 

 

(4)firstChild,lastChild兼容方案1

<ul><li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
    var ul = document.getElementsByTagName('ul')[0];
    ul.firstChild.style.background = '#ff0000';  
    // IE8/7/5兼容, IE9+及其它browser不兼容,获取的是空白文本节点

    ul.firstElementChild.style.background = '#ff0000'; 
    // IE8/7/5不兼容,IE9+及其它browser兼容
</script>

兼容方案:

function firstChild(obj) {
    return obj.firstElementChild ? obj.firstElementChild : obj.firstChild;
}
function lastChild(obj) {
    return obj.lastElementChild ? obj.lastElementChild : obj.lastChild;
}
var ul = document.getElementsByTagName('ul')[0];
firstChild(ul).style.background = '#ff0000';
lastChild(ul).style.background = '#00ff00';

 

(5)firstChild,lastChild兼容方案2

   firstChild与lastChild 兼容Ie6,7,8    返回指定节点的首个子节点与返回指定节点的最后一个子节点

   firstElementChild与lastElementChild 不兼容低版本的浏览器

var first=e.firstElementChild||e.firstChild;
var last=e.lastElementChild||e.lastChild;
var pre=e.previousElementSibling || e.previousSibling;
var next=e.nextElementSibling || e.nextSibling;

 

.

分享到:
评论

相关推荐

    50款原生js案例(绝美整合)

    本资源“50款原生js案例(绝美整合)”集合了五十个精心设计的JavaScript示例,旨在帮助开发者深入理解和掌握JavaScript的核心特性。通过这些案例,我们可以学习到JavaScript在实际应用中的各种技巧和最佳实践。 1....

    一些常用且实用的原生JavaScript函数.docx

    在JavaScript编程中,掌握一些常用且实用的原生函数能够极大地提高开发效率和代码质量。以下是一些关于原生JavaScript函数的关键知识点: 1. **getElementById 的简写**: `document.getElementById` 是用于获取ID...

    05-DOM基础.pptx

    6. lastChild和lastElementChild:返回最后一个子节点和最后一个元素子节点。 7. nextSibling和nextElementSibling:返回当前节点的下一个兄弟节点和下一个元素兄弟节点。 8. previousSibling和...

    dom-living-examples:一些原生JS操作DOM实例

    6. **遍历DOM树**:`childNodes`、`children`、`parentElement`等属性可以帮助我们遍历和理解DOM树结构。`firstChild`和`lastChild`分别指向第一个和最后一个子节点,`nextSibling`和`previousSibling`则指向相邻的...

    学习javascript必须掌握的基础知识.pdf

    - `firstChild/firstElementChild`、`lastChild/lastElementChild`、`nextSibling/nextElementSibling`、`previousSibling/previousElementSibling`:用于遍历和访问兄弟节点。 - `parentNode`:获取父节点。 - `...

    解析dom中的children对象数组元素firstChild,lastChild的使用

    本篇将解析在DOM操作中,如何使用`children`、`firstChild`和`lastChild`这几个属性。 ### `children`属性 `children`属性返回一个HTMLCollection对象,它是一个包含所有子元素的动态集合(实时更新)。这个集合只...

    原生JavaScript实现的无缝滚动功能详解

    在网页设计中,无缝滚动是一种常见的效果,通常用于展示多张图片或内容,让用户感觉内容是连续流动的,提供一种平滑且不...总之,原生JavaScript实现无缝滚动功能提供了极大的灵活性,可以根据项目需求进行定制和优化。

    原生js实现针对Dom节点的CRUD操作示例

    选择元素后,可以进一步使用`innerHTML`、`outerHTML`、`textContent`等属性访问元素内容,或者使用`children`、`firstChild`、`lastChild`、`nextSibling`、`previousSibling`等属性获取元素与其它DOM节点间的关系...

    JavaScript原生节点操作小结

    前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下。 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持。不包含文本节点. 注意:在IE中,children包含注释节点。 ...

    js-xml.rar_javascript_javascript xml_js xml_js解析xml_xml js

    例如,使用`getElementsByTagName()`, `querySelector()`, `querySelectorAll()`等方法查找特定元素,`childNodes`, `firstChild`, `lastChild`等属性获取子节点,`innerHTML`, `textContent`等属性读写元素内容,`...

    Js中节点的遍历和操作

    - `oLis = oUl.childNodes`和`oLis = oUl.children`分别用于获取`&lt;ul&gt;`元素的所有子节点,前者包含文本节点,后者仅包含元素节点,然后通过循环打印它们的innerHTML。 4. 节点操作: - `document.createElement(...

    javascript DOM笔记 1

    `firstChild`和`lastChild`分别获取第一个和最后一个子节点,但它们可能不区分元素节点和文本节点,因此在某些浏览器中可能需要使用`firstElementChild`和`lastElementChild`来确保只获取元素节点。 对于元素的属性...

    课题-js和jquery获取父级元素、子级元素、兄弟元素的方法.docx

    在网页开发中,JavaScript(简称JS)和jQuery库是两个常用的工具,用于操作DOM(文档对象模型)。本文将详细阐述如何使用JS和jQuery获取父级元素、子级元素以及兄弟元素。 首先,让我们看看JS获取这些元素的方法。...

    原生js实现给指定元素的后面追加内容

    综上所述,原生JavaScript并没有提供一个直接的方法来实现给指定元素的后面追加内容,但通过结合使用父节点的appendChild方法和insertBefore方法,我们可以自定义一个函数来实现这一功能。这个自定义函数insertAfter...

    js获取HTML DOM节点详解

    - **高级应用**:如 Prototype 和 MooTools 这样的 JavaScript 框架扩展了 JavaScript,提供了更简洁的语法 `$` 来替代 `document.getElementById()`。例如 `$('id')` 使得获取元素更加方便快捷。 2. **`document....

    经典之作javascript dom编程艺术源码

    8. **遍历DOM**:`element.childNodes`返回元素的所有子节点,`element.firstChild`和`element.lastChild`分别指向第一个和最后一个子节点,`element.nextSibling`和`element.previousSibling`则指向相邻的兄弟节点...

    JS中出现的兼容性问题的总结.pdf

    在IE6-8中,firstChild和lastChild获取的是第一个或最后一个元素节点,但在IE9+、Firefox和Chrome中,它们获取的是第一个或最后一个节点,可能是空白文本节点。为了兼容,我们可以使用firstElementChild和...

Global site tag (gtag.js) - Google Analytics