ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript--DOMの説明
JavaScript--DOMの説明
- 巴扎黑オリジナル
- 2017-08-09 11:31:261356ブラウズ
DOM (Document Object Model) は、HTML および XML ドキュメント用の API (Application Programming Interface) です。 DOM は、開発者がページの一部を追加、削除、および変更できるようにする、階層的に変化するノード ツリーを表します。
1. ノード階層
HTML ページでは、ドキュメント要素は常に 要素です。
1. ノード タイプ
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)
childNodeリストの最後にノードを追加します
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>"); // ligang13. 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>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设置特性：
示例：设置属性 // 方式一：示例：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){ // 执行某些操作
}
}123454. 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); // 2123456789105. 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);1234567897. 其他类型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);
}123456789102. 动态样式同动态加载脚本类似，添加到页面之后才会加载资源。 示例：动态加载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);}123456789103. 操作表格为了方便构建表格，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 サイトの他の関連記事を参照してください。