자바스크립트--DOM 설명
- 巴扎黑원래의
- 2017-08-09 11:31:261356검색
DOM(문서 개체 모델)은 HTML 및 XML 문서용 API(응용 프로그래밍 인터페이스)입니다. DOM은 개발자가 페이지의 일부를 추가, 제거 및 수정할 수 있도록 계층적으로 변경되는 노드 트리를 나타냅니다.
1. 노드 계층
HTML 페이지에서 문서 요소는 항상 요소입니다.
1. 노드 유형
JavaScript의 모든 노드 유형은 노드 유형에서 상속되므로 모든 노드 유형은 동일한 기본 속성과 메서드를 공유합니다.
(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) nodeName 및 nodeValue
if(someNode.nodeType === 1){ var name = someNode.nodeName, // 元素的标签名 value = someNode.nodeValue; // null
console.log(name, value);
}12345(3) 노드 관계
문서의 모든 노드 사이에는 하나 이상의 관계가 있습니다. 노드 간의 다양한 관계는 문서 트리를 가계도와 비교하는 것이 아니라 전통적인 가족 관계로 설명할 수 있습니다.
| Property | Description |
|---|---|
| childNodes | 직접 하위 요소, 순서가 지정된 노드 세트 보유, 위치별로 액세스 가능 |
| parentNode | 문서 트리의 상위 노드 | + 하위 노드
| ownerDocument | Document 노드 전체 문서의 문서 |
| 설명: | |
| hasChildNodes()는 노드에 하나 이상의 하위 노드가 포함된 경우 true를 반환합니다 | |
| 노드리스트 객체에는 길이 속성이 있지만 배열 예제는 아니며 DOM 구조를 기반으로 쿼리를 동적으로 실행한 결과이므로 DOM 구조의 변경 사항이 NodeList 객체에 자동으로 반영될 수 있습니다. NodeList의 노드는 대괄호나 item() 메서드를 사용하여 액세스할 수 있습니다. | |
| Example | : |
Method
- Description
-
childNode 목록 끝에 노드 추가
appendChild(newDom)
inserBefore(newDom, 참조 노드)
참조로 새로 삽입된 노드 node 형제 노드, 삽입된 노드를 반환하는 동안| removeChild(제거할 노드) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 方法 | 说明 |
|---|---|
| cloneNode(boolean) | true：复制节点及整个子节点树；false：只复制节点本身 |
| normalize() | 处理文档树中的文本节点 |
所有节点都有上述方法！
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通信。而通过将每个页面的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()可以动态包含外部资源，需注意不能直接包含""，因为其会被解释为脚本块的结束。
document.write("<script type=\"text/javascript\" src=\"file.js\"><\/script>"); // ligang13. Element类型
Element类型用于表现XML和HTML元素。可以通过nodeName或tagName属性获取元素的标签名。
注意：在HTML中，标签名都以大写字母表示；在XML中，标签名始终与源代码中的保持一致。
（1）HTML元素的标准特性
示例： <div id="myDiv" title="ligang Demo" lang="zh" dir="ltr"></div>class="bd bf">http://www.php.cn<br>
| 属性 | 说明 | 值 |
|---|---|---|
| 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){ // 执行某些操作
}
}123454. Text类型
文本节点由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); // 2123456789105. Comment类型
注释在DOM中是通过Comment类型来表示的。
Comment类型与Text类型继承自相同的基类，因此它拥有除了splitText()之外的所有方法，当然也可通过nodeValue或data属性来取得注释的内容。
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）
相关内容请查看：事件:事件类型-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);
}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还为<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>元素添加的属性和方法：<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">지정된 위치 셀 삭제 </td>
</tr>
요약: 세 가지 컬렉션 NodeList, NameNodeMap 및 HTMLCollection은 모두 동적입니다. NodeList에 대한 각 액세스는 컨텍스트 파일을 기반으로 쿼리를 실행하므로 NodeList에 대한 액세스 횟수를 최소화해야 합니다. NodeList에서 얻은 값을 캐싱하는 것을 고려할 수 있습니다!
위 내용은 자바스크립트--DOM 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!