Tutoriel de base JavaScript

Objet JavaScript

Fonction JavaScript

JS HTML DOM

BOM du navigateur JS

Tutoriel de base AJAX

Manuel de référence JavaScript

Modèle d'objet navigateur JS Window Modification des attributs des éléments avec JS DOM

Navigation JS DOM

HTML DOM permet à JavaScript de naviguer dans l'arbre des nœuds en utilisant les relations de nœuds.

Nœuds DOM

Selon W3Norme C HTML DOM, tout le contenu du document HTML est un nœud :

L'ensemble du document est un nœud de document
Chaque élément HTML est un nœud d'élément
Le texte dans l'élément HTML est un nœud de texte
Chaque attribut HTML est un nœud d'attribut (déconseillé d'utiliser)
Toutes les annotations sont des nœuds de commentaires

Avec l'HTML DOM, il est possible d'accéder à tous les nœuds de l'arbre des nœuds via JavaScript.

Il est possible de créer de nouveaux nœuds et de modifier ou de supprimer tous les nœuds.

Relations de nœuds

Les nœuds entre l'arbre des nœuds ont des relations hiérarchiques.

Les termes 'parent', 'enfant' et 'frère et sœur' sont utilisés pour décrire les relations.

Dans l'arbre des nœuds, le noeud supérieur est appelé racine (ou noeud racine)
Chaque nœud a un seul noeud parent, à l'exception du noeud racine (le noeud racine n'a pas de noeud parent)
Un nœud peut avoir plusieurs nœuds enfants
Les frères et sœurs (les frères et sœurs) sont des nœuds ayant le même noeud parent

Exemple

<html>
　　<head>
<title>Tutoriel DOM</title>
　　</head>
　　
<h1>Nœuds DOM</h1>
<p>Hello,　World</p>
　　
</html>

À partir de l'HTML ci-dessus, vous pouvez lire :
<html>是根节点，并且没有父节点
<html>是<head>和<body>的父级
<head>是<html>的第一个孩子
<body>是<html>的最后一个孩子
和：
<head>有一个孩子：<title>
<title>有一个孩子（一个文本节点）：“ DOM Tutorial”
<body>有两个孩子：<h1>和<p>
<h1>有一个孩子（一个文本节点）：“ DOM Nodes”
<p>有一个孩子（一个文本节点）：“ Hello，world”
<h1>和<p>是同级

在节点之间导航

您可以使用以下节点属性在具有JavaScript的节点之间导航：

parentNode

childNodes[nodenumber]

访问子节点

Vous pouvez utiliserfirstChildDOM节点的属性来访问节点的第一个直接子节点。

Exemple

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>

测试看看 ‹/›

注意：在上面的示例中，输出将是#text，因为插入了文本节点以维护标记之间的空白。任何空格都会创建一个#text节点，从单个空格到多个空格，返回，制表符等。

但是，如果删除空格，则不会插入#text节点，并且span元素将成为段落的第一个子元素：

Exemple

<p id="para"><span>First span</span>  <b>First Bold</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName);　//　returns SPAN
</script>

Voyons voir‹/›

访问第一个孩子也可以这样进行：

Exemple

para.childNodes[0].nodeName;　//　returns SPAN

Voyons voir‹/›

Vous pouvez utiliserlastChildDOM节点的属性来访问节点的最后一个直接子节点。

Exemple

para.lastChild.nodeName;　//　returns B

Voyons voir‹/›

为避免出现#text或#commentNœudfirstChild并lastChild返回该问题，您可以选择使用：

firstElementChild属性返回指定父元素的第一个子元素。

Exemple

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>

Voyons voir‹/›

lastElementChild属性返回指定父元素的最后一个子元素。

Exemple

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName);　//　returns B
</script>

Voyons voir‹/›

}注：nodeNameC'est une propriété en lecture seule, qui retourne le nom du nœud courant sous forme de chaîne.

Accéder au nœud parent

Vous pouvez utiliserparentNodeLa propriété permet d'accéder au parent du nœud spécifié dans l'arbre DOM.

Exemple

<div>
　　　<p>This is first P inside DIV</p>
　　　<p id="para">This is second P inside DIV</p>
　　　<p>This is third P inside DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName);　　//　returns DIV
</script>

Voyons voir‹/›

Vous pouvez également utiliserparentElementLa propriété retourne l'élément parent de l'élément spécifié.

pour accéder aux nœuds frères

Vous pouvez utiliserpreviousSiblingetnextSiblingLa propriété permet d'accéder aux nœuds précédents et suivants dans l'arbre DOM.

Exemple

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>

Voyons voir‹/›

ou, vous pouvez utiliserpreviousElementSiblingetnextElementSiblingpour sauter tous les nœuds de texte vides et obtenir l'élément frère suivant et précédent.

Exemple

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>

Voyons voir‹/›

textContentLa propriété représente le contenu texte du nœud.

Nœud racine du DOM

Les deux propriétés suivantes permettent d'accéder à l'ensemble du document :

document.bodyLa propriété définit ou retourne l'élément du document.

Exemple

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nœud racine du DOM</p>
　　<p>La propriété "document.body" définit ou retourne l'élément "body" du document.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>

Voyons voir‹/›

document.documentElementLa propriété retourne l'<html>élément.

Exemple

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nœud racine du DOM</p>
　　<p>La propriété "document.documentElement" retourne l'élément racine du document./p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>

Voyons voir‹/›

Attribut nodeType

nodeTypeL'attribut retourne le type de nœud spécifié sous forme de nombre.

Exemple

var x = document.getElementById("myPara").nodeType;

Voyons voir‹/›

L'arbre DOM est composé de nœuds de différents types, par exemple des éléments, des textes, des commentaires, etc.

Chaque nœud a unnodeTypeAttributs, utilisables pour trouver le type de nœud à traiter.

Le tableau suivant liste les types de nœuds les plus importants :

Nœud	Type	Exemple
ELEMENT_NODE	1unité	<p class="heading">Bonjour, le monde</p>
ATTRIBUTE_NODE	2	class =“heading”（déconseillé d'utiliser）
TEXT_NODE	3	Bonjour, le monde
COMMENT_NODE	8	<！--Ceci est un commentaire-->
DOCUMENT_NODE	9	Le document HTML lui-même (parent de <html>)
DOCUMENT_TYPE_NODE	10	<！doctype html>

Modèle d'objet navigateur JS Window Modification des attributs des éléments avec JS DOM