根据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有一个子节点titletitle有一个子节点(文本节点):“ DOM Tutorial”body有两个子节点h1和ph1有一个文本子节点:“ 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 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.
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>