javascript--explication DOM-js tutoriel-php.cn

DOM (Document Object Model) est une API (Application Programming Interface) pour les documents HTML et XML. Le DOM représente une arborescence de nœuds changeant hiérarchiquement qui permet aux développeurs d'ajouter, de supprimer et de modifier des parties d'une page.

1. Hiérarchie des nœuds

Dans les pages HTML, les éléments du document sont toujours des éléments.

1. Type de nœud

Tous les types de nœuds en JavaScript héritent du type Node, donc tous les types de nœuds partagent les mêmes propriétés et méthodes de base.
(1) attribut nodeType : utilisé pour indiquer le type de nœud.

常量	值
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

Il convient de noter que les constantes

if(someNode.nodeType === 1){    // 不使用Node.ELEMENT_NODE
    console.log("node is an element");
}123

Copier après la connexion

(2) nodeName et nodeValue

if(someNode.nodeType === 1){    var name = someNode.nodeName,   // 元素的标签名        value = someNode.nodeValue; // null
    console.log(name, value);
}12345

Copier après la connexion

ne sont pas prises en charge dans IE . (3) Relation entre les nœuds
Il existe l'une ou l'autre relation entre tous les nœuds du document. Diverses relations entre les nœuds peuvent être décrites par des relations familiales traditionnelles, plutôt que de comparer l'arborescence du document à un arbre généalogique.

属性	说明
childNodes	直接子元素；nodeList对象，保存一组有序节点，可通过位置访问
parentNode	文档树中的父节点
previousSibling	前一个兄弟节点
nextSibling	后一个兄弟节点
firstChild	第一个子节点
lastChild	最后一个子节点
ownerDocument	整个文档的文档节点Document

Remarque :

hasChildNodes() renvoie true si le nœud contient un ou plusieurs nœuds enfants
L'objet NodeList a un attribut de longueur, mais ce n'est pas une instance de Array ; c'est le résultat d'une requête dynamique basée sur la structure DOM, donc les modifications dans la structure DOM peuvent être automatiquement reflétées dans l'objet NodeList. Les nœuds de la NodeList sont accessibles via des crochets ou en utilisant la méthode item().

Exemple :

<div id="content">    <p>李刚</p>    <p>ligang</p>    <p>http://www.php.cn</p></div>12345

Copier après la connexion

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

Copier après la connexion

(4) Nœud d'opération
car le pointeur de relation est en lecture seule, donc DOM fournit certaines méthodes pour faire fonctionner les nœuds.

方法	说明
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

Copier après la connexion

var div = document.getElementById("content"),
    p = document.getElementById("blog");div.appendChild(p);123

Copier après la connexion

<!-- 执行后 --><div id="content">    <p>李刚</p>    <p id="blog">http://www.php.cn</p></div>12345

Copier après la connexion

说明：如果传入到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

Copier après la connexion

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

Copier après la connexion

<!-- 执行后 --><div id="content">    <p>李刚</p>    <p id="blog">http://www.php.cn</p>    <p id="company">ptmind</p></div>123456

Copier après la connexion

（5）其他方法

方法	说明
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

Copier après la connexion

技巧：由于跨域安全限制，来自不同子域的页面无法通过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

Copier après la connexion

上述两种方式都可以通过[]代替。在后台，对数值索引会调用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

Copier après la connexion

存在实现与规范不一致的情况，所以建议除了检测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

Copier après la connexion

在文档加载结束后再调用document.write()，输出的内容将会重写整个页面。
write()、writeln()可以动态包含外部资源，需注意不能直接包含"</script>"，因为其会被解释为脚本块的结束。

document.write("<script type=\"text/javascript\" src=\"file.js\"><\/script>"); // ligang1

Copier après la connexion

3. Element类型

Element类型用于表现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(&#39;la&#39;)}">http://www.php.cn/ligang2585116</a>12

Copier après la connexion

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(&#39;la&#39;)}"1234

Copier après la connexion

设置特性：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

Copier après la connexion

（5）创建元素

document.createElement("元素名/完整元素");1

Copier après la connexion

创建新元素的同时，也为新元素设置了ownerDocument属性。
示例：创建元素并添加到文档树

var a = document.createElement("a");a.href = "http://www.php.cn";a.text = "http://blog.csdn.net/ligang2585116";document.body.appendChild(a);1234

Copier après la connexion

（6）元素的子节点
元素可以有任意数量的子节点和后代节点。
示例：为了兼容浏览器差异

for(var i = 0, len = element.childNodes.length; i < len; i++){    if(element.childNodes[i].nodeType === 1){        // 执行某些操作
    }
}12345

Copier après la connexion

4. 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); // 212345678910

Copier après la connexion

5. 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);123456789

Copier après la connexion

7. 其他类型

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

Copier après la connexion

示例：动态加载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

Copier après la connexion

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

Copier après la connexion

示例：动态加载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

Copier après la connexion

3. 操作表格

为了方便构建表格，HTML DOM还为<table>、<code><tbody> 和 <code><tr>元素添加了一些属性： <br>为<code><teble></teble>元素添加的属性和方法：

元素的指针元素的指针元素的HTMLCollection元素，放到表格中，返回引用元素，放到表格中，返回引用

属性方法	说明
caption	(若有)保存着对`<caption></caption>`元素的指针
tHead	(若有)保存着对
tFoot	(若有)保存着对
tBodies	一个所有
rows	一个所有行的HTMLCollection
createCaption	创建`<caption></caption>`元素，放到表格中，返回引用
createTHead()	创建
createTFoot()	创建
deleteCaption()	删除`<caption></caption>`元素
deleteTHead()	删除`<thead>元素<tr> <td align="left">deleteTFoot()</td> <td align="left">删除<code><tfoot>元素<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> </tfoot>`

<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>Attributs et méthodes ajoutés aux éléments : <table> <thead><tr class="firstRow"> <th align="left">Méthodes d'attribut</th> <th align="left">Description</th> </tr></thead> <tbody> <tr> <td align="left">cells()</td> <td align="left">Une <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 enregistrée de cellules dans l'élément insertCell(pos) Insérer à la position spécifiée dans la collection de cellules A cellule, renvoie une nouvelle référence de cellule deleteCell(pos) Supprime la cellule à la position spécifiée

Résumé : Les trois collections NodeList, NameNodeMap et HTMLCollection sont toutes dynamiques. Le nombre d'accès à NodeList doit être minimisé car chaque accès à NodeList exécutera une requête basée sur le fichier de contexte. Vous pouvez envisager de mettre en cache les valeurs obtenues depuis NodeList !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!