Discutez en détail des propriétés de base du DOM dans les compétences javascript_javascript

Attributs de structure et de contenu

Type de nœud

Tous les nœuds ont des types, et il existe un total de 12 types de nœuds.

Copier le code Le code est le suivant :

Nœud d'interface {
//Type de nœud
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const short non signé PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const short non signé DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
>

Les deux nœuds les plus importants sont le nœud élément (1) et le nœud texte (3). Le reste est rarement utilisé.
Par exemple, lors de la liste de tous les nœuds d'éléments enfants, nous pouvons parcourir dessus et utiliser childNodes[i].nodeType != 1 pour détecter.
Voici le code d'implémentation :

Copier le code Le code est le suivant :

Lecteurs autorisés :

• John


• Bob

<script> var childNodes = document.body.childNodes<br> for(var i=0; i<childNodes.length; i ) {<br /> if (childNodes[i].nodeType != 1) continuer<br /> alerte(childNodes[i])<br /> ><br /> </script>

*Réflexion Que demandera le code suivant :

Copier le code Le code est le suivant :

<script><br> alerte(document.body.lastChild.nodeType)<br> </script>

nodeName, tagName

nodeName et tagName contiennent tous deux le nom du nœud.
Pour document.body

alerte( document.body.nodeName ) // CORPS
Tous les noms de nœuds en HTML seront en majuscules.

Lorsque nodeName n'est pas en majuscule
Cette situation est relativement rare, si vous êtes curieux vous pouvez lire ci-dessous.
Comme vous le savez probablement déjà, les navigateurs disposent de deux méthodes d'analyse : le mode HTML et le mode __XML. Habituellement, le schéma HTML est utilisé, mais lorsque la technologie XMLHttpRequest__ est utilisée pour obtenir un document XML, le schéma XML est utilisé.
Le mode XML est également utilisé dans Firefox lorsque le Content-Type d'un document XHTML est défini sur xmlish.
Les noms de nœuds seront conservés dans le schéma __XML, donc body ou bOdY peuvent apparaître.
Par conséquent, si XML est chargé depuis le serveur dans un document HTML via la technologie XMLHttpRequest__, le nom du nœud sera conservé.

NodeName et __tagName__ sont les mêmes pour les éléments.
Mais l'attribut nodeName existe également dans les nœuds non-élémentaires, et il a une valeur spéciale dans ces nœuds :

alerte(document.nodeName) // #document
La plupart des types de nœuds n'ont pas d'attribut tagName et le tagName des nœuds d'annotation dans IE est !.
Par conséquent, nodeName est généralement plus significatif que tagName. Mais tagName est comme une version simplifiée, vous pouvez donc l'utiliser lorsque vous traitez uniquement avec des nœuds d'éléments.

intérieurHTML

innerHTML fait partie du standard HTML5, veuillez consulter le lien pour plus de détails
Il permet un accès textuel au contenu du nœud. L'exemple suivant affichera tout le contenu de document.body et le remplacera par le nouveau contenu.

Copier le code Le code est le suivant :

Le paragraphe

Et un div

<script><br> alert( document.body.innerHTML ) // lire le contenu actuel<br> Document.body.innerHTML = 'Yaaahooo!' // remplacer le contenu<br> </script>

innerHTML contiendra du HTML valide. Mais les navigateurs peuvent également analyser le HTML mal formé.
innerHTML peut être utilisé dans n’importe quel nœud d’élément. C'est très, très utile.

pitFalls innerHTML

innerHTML n'est pas aussi simple qu'il y paraît. Il comporte certains pièges qui attendent les débutants, et parfois même les programmeurs expérimentés ne peuvent pas les éviter.

Le innerHTML du nœud __table__ dans IE est en lecture seule
Dans IE, innerHTML dans COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR et d'autres éléments sont en lecture seule.
À l'exception de TD, toutes les balises innerHTML de la balise table dans IE sont en lecture seule.

innerHTML ne peut pas être ajouté
À en juger par la composition de l'instruction, innerHTML peut effectuer des opérations d'ajout, telles que :

chatDiv.innerHTML = "

Bonjour !

"
chatDiv.innerHTML = "Comment ça va ?"
Mais que s'est-il réellement passé :

1. L'ancien contenu est effacé

2. Le nouveau contenu est analysé et inséré. Le contenu n'est pas ajouté, il est régénéré.

Par conséquent, toutes les images et autres ressources seront rechargées après l'opération =, y compris smile.gif.

Heureusement, il existe d'autres moyens de mettre à jour le contenu qui n'utilisent pas innerHTML et ne présentent donc pas les problèmes mentionnés ci-dessus.

nodeValue

innerHTML n'est valable que pour les nœuds d'éléments.
Pour les autres types de nœuds, ils utilisent l'attribut nodeValue pour obtenir du contenu. L'exemple suivant montre comment cela fonctionne sur les nœuds de texte et les nœuds de commentaires.

Copier le code Le code est le suivant :

Le texte

<script><br> for(var i=0; i<document.body.childNodes.length; i ) {<br> alert(document.body.childNodes[i].nodeValue)<br> ><br> </script>

上面的例子中，有些警告為空的，那是因為空白節點的緣故。注意到對於SCRIPT節點中nodeValue === null。那是因為SCRIPT為元素節點。元素節點，要使用innerHTML。

總結

nodeType
  節點類型。最重要的是元素節點為1，文字節點為3，唯讀。
nodeName/tagName
  大寫的標籤名。非元素節點來說nodeName還會有特殊的值，只讀。
innerHTML
  元素節點的內容，可寫。
nodeValue
  文本節點的內容，可寫。
DOM節點根據類型，還有其他的一些屬性。例如，INPUT標籤有value和__checked__屬性。 A屬性有href等等。

以上就是本文的全部內容了，希望大家能夠喜歡。