通过节点关系查找节点
document.all 获取文档中所有的标签节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue;
示例2：
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
通过节点关系查找节点示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="">
<span id="sp">hehehhehehehe</span>
</div>
<h1>aaaaaaaaaaaaaaaaaa</h1>
<h2>bbbbbbbbbbbbbbbbbbb</h2>
<script type="text/javascript">
var bd = document.body;
var allNodes = bd.childNodes;
var sp = document.getElementById("sp");
var fu = sp.parentNode;
var v = bd.firstChild.nextSibling.nextSibling;
alert(v);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center">阿斯顿发送到发斯蒂芬</h1>
</body>
<script type="text/javascript">
var h1=document.body.firstChild.nextSibling;
alert(h1);
alert(h1.nodeType);
var as=h1.attributes;
alert(as[0].name);
alert(as[0].value);
</script>
</html>
获取节点对象的信息
每个节点都包含的信息的，这些属性是：
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素，例<div>..</div>
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性是所包含的文本。
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
获取元素对象的属性
parentElement 获取当前元素的父元素对象(不会获取到空文本,或者注释)
firstElementChild 获取父元素的第一个标签对象(不会获取到空文本,或者注释)
lastElementChild 获取父亲元素的最后一个标签对象(不会获取到空文本,或者注释)
previousElementSibling; 获取上一个兄弟元素对象(不会获取到空文本,或者注释)
nextElementSibling 获取下一个兄弟元素对象(不会获取到空文本,或者注释)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>
阿斯顿发斯蒂芬
</h1>
<h2>阿斯顿发斯蒂芬</h2>
<div id="d1">
<span id="">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
</div>
</body>
<script type="text/javascript">
var v=document.body.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild;
alert(v);
</script>
</html>
|