在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
一、nodeName 属性: 节点的名称,是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性:节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
获取父节点: Node.prototype.parentNode
获取父节点元素: Node.prototype.parentElement
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
<div id="id1">李雷</div>
<script>
var id1 = document.getElementById("id1");
document.getElementById("id1").parentNode;
document.getElementById("id1").parentNode.parentNode;
document.getElementById("id1").parentNode.parentNode.parentNode;
document.getElementById("id1").parentNode.parentNode.parentNode.parentNode;
</script></body></html>
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
<div id="id1">李雷</div>
<script>
var id1 = document.getElementById("id1");
document.getElementById("id1").parentElement;
document.getElementById("id1").parentElement.parentElement;
document.getElementById("id1").parentElement.parentElement.parentElement;
</script></body></html>
父节点有三种类型: 元素节点(element)、文档节点(document)和文档片段节点(documentfragment), .parentNode 可能返回这三个类型中的一个.
父元素节点排除了document 和 documentfragment, 只会返回元素节点.
注意, 如果对element和documentfragment使用, 则返回null
<div id="dv">
<span>这是div中的第一个span标签</span><p>这是div中的第二个元素,第一个p标签</p><ul id="uu"...>
< /div>
<script src="common.js">< /script>< script>
var ulobj=my$("uu");//uL标签的父级节点
console.log(uLobj.parentNode);//ul标签的父级元素
console.log(ulobj.parentElement);
获取相关的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv {
width:500px;
height:500px;
background-color:red;
}
</style>
</head>
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
//div
// var dvObj=document.getElementById("dv");
// //获取里面的每个子节点
// for(var i=0;i<dvObj.childNodes.length;i++){
// var node=dvObj.childNodes[i];
// /