【前言】
最近讲课讲到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;
.
相关推荐
前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下。 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持。不包含文本节点. 注意:在IE中,children包含注释节点。 ...
以下是对dom中的children对象数组元素firstChild,lastChild的使用进行了详细的分析介绍,需要的朋友可以参考下
因为 DOM 的存在,这使我们可以通过 ...element.childNodes/element.children 兄弟关系 element.previousSibling/element.nextSibling element.previousElementSibling/element.nextElementSibling 通过节点直接的关
本文实例讲述了JavaScript遍历DOM元素的常见方式。分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild...
childNodes属性:将返回一个数组,这个数组... node.firstChild等价于node.childNodes[0] 同理 node.lastChild等价于node.childNodes[node.childNodes.length-1] 第五章 javascript编程原则和良好习惯 预留退路 分离
js常见的兼容问题: 1.关于使用 event对象,出现的兼容性问题;阻止冒泡兼容问题解决方法; 2.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题;、 3.关于DOM中 childNodes 获取子节点出现...
document 树结点 parentElement 父元素 parentNode 父结点 childNodes 所有子结点 有s哦 firstChild 第一个子结点 lastChild 最后一个子结点 nextSibling 下一个兄弟结点 previousSibling 上一个兄弟结点
firstchild-lastchild
使用[removed]调用外部的JavaScript(.js文件) 4 如何与老浏览器打交道 4 (2) 把JavaScript代码放到HTML页面不同的位置 4 把JavaScript代码放到HTML<body>部分 4 把JavaScript代码放到HTML<head...
javascript中window.document的属性、方法和事件的总结,有需要的朋友可参考一下本文章。 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 ...
// JavaScript Document DOMhelp={ //Find the last sibling of the current node lastSibling:function(node){ var tempObj = node[removed].lastChild; while(tempObj.nodeType != 1 && tempObj....
children //childNodes childElementCount //childNodes.length firstElementChild //firstChild lastEelmentChild //lastChild nextElementSibling //nextSibling previousElementSibling //previousSibl
接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3 NodeA.childNodes.length = 3 NodeA.childNodes[0]...
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
节点类型 nodeType 以下是一些重要的nodeType的取值: ...lastChild: 等同于childNodes.length-1 同时通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。 操作节点 a
如果父节点没有子节点, 则firstChild和lastChild都为nullparentNode 父节点previousSibling 第一个节点的previ
属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档类型节点(只读) ...
我们已经知道在JavaScript中提供下面的方法获取子、父、兄节点的方法: 常规 通过父节点获取子节点: parentObj.firstChild 获取已知父节点的第一个子节点 parentObj.lastChild 获取已知父节点的最后一个子...
属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6...