DOM (Document Object Model) ist eine API (Application Programming Interface) für HTML- und XML-Dokumente. Das DOM stellt einen sich hierarchisch ändernden Knotenbaum dar, der es Entwicklern ermöglicht, Teile einer Seite hinzuzufügen, zu entfernen und zu ändern.
In HTML-Seiten sind Dokumentelemente immer -Elemente.
Alle Knotentypen in JavaScript erben vom Knotentyp, daher haben alle Knotentypen dieselben grundlegenden Eigenschaften und Methoden.
(1) nodeType-Attribut: Wird zur Angabe des Knotentyps verwendet.
| 常量 | 值 |
|---|---|
| Node.ELEMENT_NODE | 1 |
| Node.ATTRIBUTE_NODE | 2 |
| Node.TEXT_NODE | 3 |
| Node.CDATA_SECTION_NODE | 4 |
| Node.ENTITY_REFERENCE_NODE | 5 |
| Node.ENTITY_NODE | 6 |
| Node.PROCESSING_INSTRUCTION_NODE | 7 |
| Node.COMMENT_NODE | 8 |
| Node.DOCUMENT_NODE | 9 |
| Node.DOCUMENT_TYPE_NODE | 10 |
| Node.DOCUMENT_FRAGMENT_NODE | 11 |
| Node.NOTATION_NODE | 12 |
Es ist zu beachten, dass die Konstanten
if(someNode.nodeType === 1){ // 不使用Node.ELEMENT_NODE
console.log("node is an element");
}123(2) nodeName und nodeValue
if(someNode.nodeType === 1){ var name = someNode.nodeName, // 元素的标签名 value = someNode.nodeValue; // null
console.log(name, value);
}12345 im IE nicht unterstützt werden . (3) Knotenbeziehung
Zwischen allen Knoten im Dokument besteht die eine oder andere Beziehung. Verschiedene Beziehungen zwischen Knoten können durch traditionelle Familienbeziehungen beschrieben werden, im Gegensatz zum Vergleich des Dokumentenbaums mit einem Stammbaum.
| 属性 | 说明 |
|---|---|
| childNodes | 直接子元素；nodeList对象，保存一组有序节点，可通过位置访问 |
| parentNode | 文档树中的父节点 |
| previousSibling | 前一个兄弟节点 |
| nextSibling | 后一个兄弟节点 |
| firstChild | 第一个子节点 |
| lastChild | 最后一个子节点 |
| ownerDocument | 整个文档的文档节点Document |
Hinweis:
hasChildNodes() gibt true zurück, wenn der Knoten einen oder mehrere untergeordnete Knoten enthält
Das NodeList-Objekt hat ein Längenattribut, ist aber keine Array-Instanz; es ist das Ergebnis einer dynamischen Abfrage basierend auf der DOM-Struktur, sodass Änderungen in der DOM-Struktur automatisch im NodeList-Objekt widergespiegelt werden können. Auf Knoten in der NodeList kann über eckige Klammern oder mit der Methode item() zugegriffen werden.
Beispiel :
<div id="content"> <p>李刚</p> <p>ligang</p> <p>http://www.php.cn</p></div>12345
var div = document.getElementById("content");console.log(div.hasChildNodes()); // trueconsole.log(div.ownerDocument);
// #documentvar children = div.childNodes;console.log(children[0]);
// <p>李刚</p> 注意：这里有可能是#text，格式化回车缩进导致！！console.log(children.item(1));
// <p>ligang</p>var p1 = div.firstChild;console.log(p1.parentNode);
// <div id="content">…</div>console.log(p1.previousSibling);
// nullconsole.log(p1.nextSibling);
// <p>ligang</p>123456789101112 (4) Operationsknoten
aufgrund des Beziehungszeigers ist schreibgeschützt, daher bietet DOM einige Methoden zum Betreiben von Knoten.
| 方法 | 说明 |
|---|---|
| appendChild(newDom) | 向childNode列表的末尾添加一个节点 |
| inserBefore(newDom, 参照节点) | 新插入的节点作为参照节点的同胞节点，同时返回该插入节点 |
| replaceChild(newDom, 被替换的节点) | 新插入的节点将占据被替换节点的位置 |
| removeChild(要移除的节点) | 返回被移除的节点，被移除的节点仍然为稳当所有，只是在文档中没有了位置 |
注意：并不是所有节点都有子节点，如果在不支持子节点的节点上调用了上述方法，将会导致错误发生。
示例：将blog元素移动到content中
<!-- 执行前 --><div id="content"> <p>李刚</p></div><p id="blog">http://www.php.cn</p>12345
var div = document.getElementById("content"),
p = document.getElementById("blog");div.appendChild(p);123<!-- 执行后 --><div id="content"> <p>李刚</p> <p id="blog">http://www.php.cn</p></div>12345
说明：如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。
示例：将blog作为content的第一个子元素，将company作为content的最后一个子元素
<!-- 执行前 --><div id="content"> <p>李刚</p></div><p id="blog">http://www.php.cn</p><p id="company">ptmind</p>123456
var content = document.getElementById("content"),
blog = document.getElementById("blog"),
company = document.getElementById("company");content.insertBefore(blog, content.childNodes.item(0));
// content.firstChildcontent.insertBefore(company, null);12345<!-- 执行后 --><div id="content"> <p>李刚</p> <p id="blog">http://www.php.cn</p> <p id="company">ptmind</p></div>123456
（5）其他方法
| 方法 | 说明 |
|---|---|
| cloneNode(boolean) | true：复制节点及整个子节点树；false：只复制节点本身 |
| normalize() | 处理文档树中的文本节点 |
所有节点都有上述方法！
JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性。
document.documentElement; // 获取对<html>的引用document.body; // 获取对<body>的引用/* 以本人blog为例 */document.title; // 获取页面title信息："李刚的学习专栏 - 博客频道 - CSDN.NET"document.URL; // 获取页面完整的URL："http://www.php.cn"document.domain; // 获取页面的域名："blog.csdn.net" document.referrer; // 获取链接到当前页面的那个页面的URL：直接访问为空！1234567
技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。例如，在www.xxx.com中嵌入了一框架，框架内页面加载自report.xxx.com；两者不能进行访问。可以将两个页面的document.domain值都设置为xxx.com，就可以互相访问了。
需要注意的是，浏览器对domain有一限制，即如果域名开始时松散的(xxx.com)，那么不能将它再设置为紧绷的(www.xxx.com)。
（1）查找元素
| 方法 | 说明 |
|---|---|
| getElementById() | 只返回文档中第一次出现的元素；如果不存在带有相应id的元素，则返回null |
| getElementsByTagName() | 返回的是包含零或多个元素的HTMLCollection对象 |
| getElementsByName() | 返回带有指定name特性的所有元素 |
var images = document.getElementsByTagName("img");images.item(0);images.namedItem("myImage");123上述两种方式都可以通过[]代替。在后台，对数值索引会调用item()，对字符串索引会调用namedItem()。
（2）特殊集合
| 属性 | 说明 |
|---|---|
| document.anchors | 包含文档中所有带name特性的元素 |
| document.applets | 包含文档中所有的元素 |
| document.forms | 包含文档中所有的元素 |
| document.images | 包含文档中所有的 |
| document.links | 包含文字所有带href特性的元素 |
（3）DOM一致性检测
document.implementation.hasFeature("名称", "版本号");document.implementation.hasFeature("XML", "1.0"); // true12存在实现与规范不一致的情况，所以建议除了检测hasFeature()之外，还同时使用能力检测。
（4）文档写入
| 方法 | 说明 |
|---|---|
| write() | 原样写入 |
| writeln() | 在字符串末尾添加有一个换行符(\n) |
| open() | 打开网页输出流 |
| close() | 关闭网页输出流 |
示例：
<span>my name is:</span>
document.write("<strong>ligang</strong>"); // my name is: ligangwindow.onload = function(){
document.write("<strong>ligang</strong>"); // ligang};12345在文档加载结束后再调用document.write()，输出的内容将会重写整个页面。 write()、writeln()可以动态包含外部资源，需注意不能直接包含"</script>"，因为其会被解释为脚本块的结束。
document.write("<script type=\"text/javascript\" src=\"file.js\"><\/script>"); // ligang1Element类型用于表现XML和HTML元素。可以通过nodeName或tagName属性获取元素的标签名。
注意：在HTML中，标签名都以大写字母表示；在XML中，标签名始终与源代码中的保持一致。
（1）HTML元素的标准特性
示例： <div id="myDiv" title="ligang Demo" lang="zh" dir="ltr" <br/>class="bd bf">http://www.php.cn<br/></div>
| 属性 | 说明 | 值 |
|---|---|---|
| div.id | 元素在文档中的唯一标识符 | “myDiv” |
| div.title | 附件说明信息，悬停展示 | “ligang Demo” |
| div.lang | 元素内容的语言代码 | “zh” |
| div.dir | 语言方向：ltr左到右；rtly右到左 | “ltr” |
| div.className | CSS类 | “bd bf” |
（2）特性
获取特性：dom.getAttribute("特性名") 如不存在返回null
注意有两类特殊的特性：
style，返回CSS文本，通过属性访问则返回一个对象；
onclick等事件处理程序，返回相应代码的字符串。
示例：
<a href="javscript:;" style="background-color: grey;text-underline: none;"
onclick="function(){console.log('la')}">http://www.php.cn/ligang2585116</a>12var a = document.getElementsByTagName("a")[0];
a.getAttribute("style"); // "background-color: grey;text-underline: none;"a.style; // CSSStyleDeclaration {0: "background-color", all: ""…}
a.getAttribute("onclick"); // "function(){console.log('la')}"1234设置特性：dom.setAttribute("特性名","值")
（3）attributes属性
attributes属性中包含一个NamedNodeMap
| 属性 | 说明 |
|---|---|
| dom.attributes.getNamedItem(name) | 返回nodeName属性等于name的节点 |
| dom.attributes.removeNamedItem(name) | 从列表中移除nodeName属性等于name的节点 |
| dom.attributes.setNamedItem(attr) | 向列表中添加节点，以节点的nodeName属性为索引 |
| dom.attributes.item(pos) | 返回位于数字pos位置处的节点 |
示例：设置属性
// 方式一：示例：setNamedItem
var target = document.createAttribute("target");target.nodeValue = "_blank";a.attributes.setNamedItem(target);// 方式二：setAttribute
a.setAttribute("target", "_blank");123456（5）创建元素
document.createElement("元素名/完整元素");1创建新元素的同时，也为新元素设置了ownerDocument属性。
示例：创建元素并添加到文档树
var a = document.createElement("a");a.href = "http://www.php.cn";a.text = "http://blog.csdn.net/ligang2585116";document.body.appendChild(a);1234（6）元素的子节点
元素可以有任意数量的子节点和后代节点。
示例：为了兼容浏览器差异
for(var i = 0, len = element.childNodes.length; i < len; i++){ if(element.childNodes[i].nodeType === 1){ // 执行某些操作
}
}12345文本节点由Text类型表示，包含纯文本。纯文本可以包含转义后的HTML字符，但不能包含HTML代码。
（1）创建文本节点：document.createTextNode("文本")
（2）规范化文本节点：在一个包含两个或多个文本节点元素上调用normalize()，则将会所有文本节点合并成一个节点。
（3）分割文本节点：将一个文本节点分成两个文本节点，按指定的位置分割nodeValue值。
示例：规范化文本节点
var div = document.getElementById("content");var textNode = document.createTextNode("Hello"),
anotherNode = document.createTextNode("Ligang");div.appendChild(textNode);div.appendChild(anotherNode);console.log(div.childNodes.length);
// 2div.normalize();console.log(div.childNodes.length);
// 1var newNode = div.firstChild.splitText(5);
// "Ligang"console.log(div.childNodes.length); // 212345678910注释在DOM中是通过Comment类型来表示的。
Comment类型与Text类型继承自相同的基类，因此它拥有除了splitText()之外的所有方法，当然也可通过nodeValue或data属性来取得注释的内容。
DocumentFragement类型中没有对应的标记，DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。可以当做“仓库”使用。
示例：
var fragment = document.createDocumentFragment();var li = null;for(var i = 0; i < 5; i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item "+ (i+1)));
fragment.appendChild(li);
}// 文档片段的所有子节点都被删除并转移到<ul>元素中document.getElementById("myUl").appendChild(fragment);123456789CDATASection类型、DocumentType类型很少用到，这里不再赘述。
在元素添加到页面之前，是不会下载外部文件的。（不同于image）
相关内容请查看：事件:事件类型-UI事件
示例：动态加载JavaScript文件
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);}123456示例：动态加载JavaScript代码
function loadScriptString(code){ var script = document.createElement("script");
script.type = "text/javascript"; try{
script.appendChild(document.createTextNode(code));
}catch (e){
script.text = code; // 兼容IE
}
document.body.appendChild(script);
}12345678910同动态加载脚本类似，添加到页面之后才会加载资源。
示例：动态加载CSSt文件
function loadStyle(url){ var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url;
document.head.appendChild(link);
}1234567示例：动态加载CSS代码
function loadStyleString(code){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(code));
}catch (e){
style.stylesheet.cssText = code; // 兼容IE
}
document.head.appendChild(style);}12345678910为了方便构建表格，HTML DOM还为<table>、<code><tbody> 和 <code><tr>元素添加了一些属性： <br>为<code><teble></teble>元素添加的属性和方法：
| 属性方法 | 说明 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| caption | (若有)保存着对<caption></caption>元素的指针 |
||||||||||||||||
| tHead | (若有)保存着对元素的指针
|
<tbody>元素添加的属性和方法：<table>
<thead><tr class="firstRow">
<th align="left">属性方法</th>
<th align="left">说明</th>
</tr></thead>
<tbody><tr>
<td align="left">rows</td>
<td align="left">一个保存着<code><tbody>元素中行的HTMLCollection<tr>
<td align="left">insertRow(pos)</td>
<td align="left">向rows集合中指定位置插入一行，返回新行的引用</td>
</tr>
<tr>
<td align="left">deleteRow(pos)</td>
<td align="left">删除指定位置的行</td>
</tr>
</tbody>
<tr>Zu Elementen hinzugefügte Attribute und Methoden: <table>
<thead><tr class="firstRow">
<th align="left">Attributmethoden</th>
<th align="left ">Beschreibung</th>
</tr></thead>
<tbody>
<tr>
<td align="left">cells()</td>
<td align="left">Eine gespeicherte <table>
<thead><tr class="firstRow">
<th align="left">属性方法</th>
<th align="left">说明</th>
</tr></thead>
<tbody><tr>
<td align="left">cells()</td>
<td align="left">一个保存着<code><tr>元素中的单元格的HTMLCollection</tr>
<tr>
<td align="left">insertCell(pos)</td>
<td align="left">向cells集合中的指定位置插入一个单元格，返回新单元格引用</td>
</tr>
<tr>
<td align="left">deleteCell(pos)</td>
<td align="left">删除指定位置的单元格</td>
</tr>
HTMLCollection der Zellen im Element
Zusammenfassung: Die drei Sammlungen NodeList, NameNodeMap und HTMLCollection sind alle dynamisch. Die Anzahl der Zugriffe auf NodeList sollte minimiert werden, da bei jedem Zugriff auf NodeList eine Abfrage basierend auf der Kontextdatei ausgeführt wird. Sie können erwägen, die von NodeList erhaltenen Werte zwischenzuspeichern!
Das obige ist der detaillierte Inhalt vonJavascript – DOM-Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
