您的位置：首页 > Web前端 > JavaScript

JS 中DOM节点的访问关系

2017-02-16 15:44 267 查看

节点的访问关系，是以属性的方式存在的。DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

一、关系

1、父节点 parentNode

调用者就是节点。一个节点只有一个父节点。调用方式：节点.parentNode

2、兄弟节点

nextSibling

nextElementSibling

previousSibling

previousElementSibling

nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。

nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。

总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling

下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling

previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。

previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。

总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。

下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

3、子节点

firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。

firstElementChild:在火狐谷歌IE9都指的第一个元素节点。

第一个子节点=父节点.firstElementChild || 父节点.firstChild

lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。

lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。

第一个子节点=父节点.lastElementChild|| 父节点.lastChild

4、所有字节点

childNodes

children

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点   （

火狐谷歌等高本版会把换行也看做是子节点

nodeType==1时才是元素节点(标签)

      nodeType == 1 表示的是元素节点   记住  元素就是标签

      nodeType == 2 表示是属性节点   了解

      nodeType == 3 是文本节点   了解

子节点数组 = 父节点.childNodes;   获取所有节点。

children：非标准属性，它返回指定元素的子元素集合。

但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

children在IE6/7/8中包含注释节点

在IE678中，注释节点不要写在里面。

子节点数组 = 父节点.children;   用的最多。

节点自己.parentNode.children[index];随意得到兄弟节点。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不要的</title>
</head>
<body>

<div id="box1">

<div id="box2" ></div>
<div id="box3"></div>
<div dir="box4"></div>
<div dir="box5"></div>

</div>

<script type="text/javascript">

// 获取 box2结点
var  box2=document.getElementById('box2');

// 根据 parentNode  获取 box1结点
var box1=box2.parentNode;

//兄弟节点 获取下一个节点
var box3=box2.nextElementSibling;
console.log(box3);

//获取box3上一个节点
var  newbox2=box3.previousElementSibling;
console.log(newbox2);

//子节点
//获取box1 第一个子节点
var firstbox=box1.firstElementChild;
console.log(firstbox);
//获取 box2最后一个子节点
var lastbox=box1.lastElementChild;
console.log(lastbox);

//所有子节点
var  allchild=box1.childNodes;
console.log('allchild='+allchild);
var  all=box1.children;
console.log('all='+all);

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航