DOM (Document Object Model) は、HTML および XML ドキュメント用の API (Application Programming Interface) です。 DOM は、開発者がページの一部を追加、削除、および変更できるようにする、階層的に変化するノード ツリーを表します。
HTML ページでは、ドキュメント要素は常に 要素です。
JavaScript のすべてのノード タイプは Node タイプを継承するため、すべてのノード タイプは同じ基本プロパティとメソッドを共有します。
(1) nodeType 属性: ノードのタイプを示すために使用されます。
| 定数 | 値 |
|---|---|
| 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 |
IEでは定数がサポートされていないことに注意してください
if(someNode.nodeType === 1){ // 不使用Node.ELEMENT_NODE
console.log("node is an element");
}123(2) ノード名とノード値
if(someNode.nodeType === 1){ var name = someNode.nodeName, // 元素的标签名 value = someNode.nodeValue; // null
console.log(name, value);
}12345(3) ノード関係
ドキュメント内のすべてのノード間には 1 つまたは別の関係があります。ノード間のさまざまな関係は、ドキュメント ツリーを 家系図 と比較するのではなく、従来の家族関係によって説明できます。
| Property | Description |
|---|---|
| childNodes | nodeListオブジェクトは、位置によってアクセス可能な一連の順序付きノードを保持します |
| parentNode | ドキュメントツリー内の親ノード。 | + 子ノード
| ownerDocument | Document ノード ドキュメント全体のドキュメント |
| 説明: | |
| hasChildNodes() は、ノードに 1 つ以上の子ノードが含まれている場合に true を返します | |
| リスト解除オブジェクトには length 属性がありますが、配列の例ではなく、DOM 構造に基づいて動的にクエリを実行した結果であるため、DOM 構造の変更は自動的に NodeList オブジェクトに反映されます。 NodeList 内のノードには、角かっこまたは item() メソッドを使用してアクセスできます。 | |
| 例 | : |
メソッド
appendChild(newDom)
inserBefore(newDom、参照ノード)新しく挿入されたノード参考資料node 兄弟ノード、挿入されたノードを返します
| removeChild(削除されるノード) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
注意：并不是所有节点都有子节点，如果在不支持子节点的节点上调用了上述方法，将会导致错误发生。 <!-- 执行前 --><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）其他方法
所有节点都有上述方法！ 2. Document类型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通信。而通过将每个页面的
var images = document.getElementsByTagName("img");images.item(0);images.namedItem("myImage");123ログイン後にコピー 上述两种方式都可以通过[]代替。在后台，对数值索引会调用item()，对字符串索引会调用
（3）DOM一致性检测 document.implementation.hasFeature("名称", "版本号");document.implementation.hasFeature("XML", "1.0"); // true12ログイン後にコピー 存在实现与规范不一致的情况，所以建议除了检测hasFeature()之外，还同时使用能力检测。
示例： <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("<script type=\"text/javascript\" src=\"file.js\"><\/script>"); // ligang1ログイン後にコピー 3. Element类型Element类型用于表现XML和HTML元素。可以通过nodeName或tagName属性获取元素的标签名。
（2）特性 注意有两类特殊的特性：
示例： <a href="javscript:;" style="background-color: grey;text-underline: none;"
onclick="function(){console.log('la')}">http://www.php.cn/ligang2585116</a>12ログイン後にコピー var 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ログイン後にコピー 设置特性：
示例：设置属性 // 方式一：示例：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ログイン後にコピー 4. Text类型文本节点由Text类型表示，包含纯文本。纯文本可以包含转义后的HTML字符，但不能包含HTML代码。 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ログイン後にコピー 5. Comment类型注释在DOM中是通过Comment类型来表示的。 6. DocumentFragement类型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);123456789ログイン後にコピー 7. 其他类型CDATASection类型、DocumentType类型很少用到，这里不再赘述。 二、DOM操作技术1. 动态脚本在元素添加到页面之前，是不会下载外部文件的。（不同于image） 示例：动态加载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ログイン後にコピー 2. 动态样式同动态加载脚本类似，添加到页面之后才会加载资源。 示例：动态加载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ログイン後にコピー 3. 操作表格为了方便构建表格，HTML DOM还为
|
<tr>元素添加的属性和方法：<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>HTML要素内のセルのコレクション</tr>
<tr>
<td align="left">insertCell(pos)</td>
<td align="left">セルコレクション内の指定された位置にセルを挿入し、新しいセル参照を返します</td>
</tr>
<tr>
<td align="left">deleteCell(pos)</td>
<td align="left">指定された位置のCellを削除します</td>
</tr>
概要: NodeList、NameNodeMap、HTMLCollection の 3 つのコレクションはすべて動的です。 NodeList へのアクセスごとにコンテキスト ファイルに基づいてクエリが実行されるため、NodeList へのアクセス数は最小限に抑える必要があります。 NodeList から取得した値をキャッシュすることを検討できます。
以上がJavaScript--DOMの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
