什么是DOM节点
根据W3C HTML DOM标准，HTML文档中的所有内容都是一个节点：
- 整个文档是一个文档节点 （文档节点）
- 每个HTML元素都是一个元素节点 （元素节点）
- HTML元素内的文本是文本节点 （文本节点）
- 每个HTML属性都是一个（属性节点）（不建议使用）
- 所有注释均为（注释节点）
节点的访问，创建，修改，删除
使用HTML DOM，可以通过JavaScript访问节点树中的所有节点。
可以创建新节点，并且所有节点都可以修改或删除
节点关系
节点树中的节点之间具有层次关系。
术语“父母”，“孩子”和“兄弟姐妹”用于描述关系。
- 在节点树中，顶部节点称为根（或根节点）
- 每个节点只有一个父节点，根节点除外（根节点没有父节点）
- 一个节点可以有多个子节点
- 兄弟姐妹（兄弟姐妹）是具有相同父节点的节点
html代码对应节点关系示例：
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
由上可知:
- html是根节点
- html没有父母节点
- html是head和body的父节点
- head是html的第一个子节点
- body是html的最后一个子节点
- head有一个子节点title
- title有一个子节点（文本节点）：“ DOM Tutorial”
- body有两个子节点h1和p
- h1有一个文本子节点：“ DOM课程一”
- p有一个文本子节点：“世界你好！”
- h1和p是同级兄弟节点
在节点之间导航
您可以使用以下节点属性在JavaScript的节点之间导航：
- parentNode （父节点）
- childNodes[nodenumber] （访问某个索引的子节点）
- firstChild （第一个子节点）
- lastChild （最后一个子节点）
- nextSibling （下一个相邻节点）
- previousSibling（前一个相邻节点）
DOM处理中的一个常见错误是期望元素节点包含文本。
<title id="demo">dom Tutorial</title>
元素节点title（在上面的示例中）不包含文本，不过title元素节点包含一个值为“ DOM Tutorial”的文本节点。文本节点的值可以通过title元素节点的innerHTML属性进行访问
alert(document.getElementById("demo").innerHTML);
访问title元素节点的innerHTML属性与访问title元素节点的第一个子节点的nodeValue相同：
alert(document.getElementById("demo").firstChild.nodeValue);
访问第一个子节点也可以这样进行：
alert(document.getElementById("demo").childNodes[0].nodeValue);
访问节点示例
下面的示例使用三种方式检索h1元素的文本并将其复制到p元素中：
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<hr>
<h1 id="id03">My Second Page</h1>
<p id="id04"></p>
<hr>
<h1 id="id05">My Third Page</h1>
<p id="id06"></p>
<!--javascript-->
<script>
document.getElementById("id02").innerHTML=document.getElementById("id01").innerHTML;
document.getElementById("id04").innerHTML=document.getElementById("id03").firstChild.nodeValue;
document.getElementById("id06").innerHTML=document.getElementById("id05").childNodes[0].nodeValue;
</script>
获取元素的内容推荐使用innerHTML
InnerHTML
In this tutorial we use the innerHTML property to retrieve(检索) the content of an HTML element.
However, learning the other methods above is useful for understanding the tree structure and the navigation of the DOM.
根节点的body属性和documentElement属性
DOM根节点有两个特殊属性允许访问整个文档：
- document.body-文档的正文主体
- document.documentElement-完整文档
alert(document.body.innerHTML);
alert(document.documentElement.innerHTML);
节点属性
节点名称属性
- nodeName属性指定节点的名称。
- nodeName是只读的
- 元素节点的nodeName与标签名称相同
- 属性节点的nodeName是属性名称
- 文本节点的nodeName始终为#text
- 文档节点的nodeName始终为#document
- 注意：nodeName始终包含HTML元素的大写标记名称。
节点值属性
- nodeValue属性指定节点的值。
- 元素节点的nodeValue为null
- 文本节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值
节点类型属性
nodeType属性是只读的。 它返回节点的类型。
常用的节点类型：
- 元素节点
- 文本节点
- 属性节点
- 注释节点
- 文档节点
- 文档类型节点
节点属性代码测试示例：
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
</body>
<!--javascript-->
<script>
document.getElementById("id02").innerHTML=document.getElementById("id01").nodeName+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").nodeValue+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").nodeType+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").firstChild.nodeName+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").firstChild.nodeValue+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").firstChild.nodeType+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").getAttributeNode("id").nodeName+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").getAttributeNode("id").nodeValue+"<br>";
document.getElementById("id02").innerHTML+=document.getElementById("id01").getAttributeNode("id").nodeType+"<br>";
document.getElementById("id02").innerHTML+=document.nodeType+"<br>";
</script>
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
