Type de nœud
nodype
Voici quelques valeurs de nodype importantes:
1: élément élément
2: att
3: texte texte
8: commentaires
9: document de document
nodename, nodevalue
Relation de nœud
ChildNodes: chaque nœud a une propriété ChildNodes, qui contient un objet Nodelist
FirstChild: Équivalent à ChildNodes [0]
LastChild: Équivalent à ChildNodes.Length-1
Dans le même temps, d'autres nœuds de la même liste sont accessibles en utilisant les propriétés précédentes et à côté de chaque nœud dans la liste.
Node d'opération
APPENDCHILD ()
La méthode APPEDCHILD () est utilisée pour ajouter un nœud à la fin de la liste des NICHNODES. Après avoir ajouté un nœud, les pointeurs de la relation du nouveau nœud, du nœud parent et du dernier nœud enfant de ChildNodes seront mis à jour en conséquence.
insertFore ()
La méthode insertfore () accepte deux paramètres: le nœud à insérer et le nœud à référencer.
// Après l'insertion, il devient le dernier nœud enfant renvoyé Node = SomeNode.InsertBefore (newnode, null); // Après l'insertion, il devient le premier nœud reternedNode = SomeNode.insertBefore (Newnode, someNode.FirstChild); // insert avant le dernier nœud enfant RETOURNED);
RempaceChild ()
RempaceChild () accepte deux paramètres, le nœud à insérer et le nœud à remplacer
var renvoieNode = Somenode.replaceChild (newNode, SomeNode.FirstChild);
removechild ()
Retirez et ne remplacez pas uniquement les nœuds.
var ancienFirstChild = Somenode.removechild (SomeNode.FirstChild);
clonenode ()
Article 1
Article 2
Article 3
var DeepList = myList.clonenode (true); console.log (DeepList.length); // 3var shallowlist = myList.clonenode (false); console.log (ShallowList.ChildNodes.length); // 0
Type de document
Le nœud de document a les caractéristiques suivantes:
Enfants du document
var html = document.DocumentElement; // Obtenez une référence à <html> console.log (html === document.childnodes [0]); // trueconsole.log (html === document.firstchild); // vrai
Documer des informations
// Obtenez le titre du document var originalTitle = document.Title; // Définissez le titre de document document.Title = "New Page Title"; // Obtenez l'urlvar URL = Document.url; // OBTENIR LE NOM DOMAINE VAR DOMAIN = Document.Domain; // Obtenez le Urlvar Refraimer = Document.Referrer; // Supposons que la page vient du p2p.wrox.com Domain Document.Domain = "Wrox.com";; // réussit document.domain = "nczonline.net"; // Échoué
Appel Document.getElementById ("Myelement"); Le résultat renverra l'élément <fort> comme indiqué ci-dessous;
La meilleure façon est de ne pas faire de l'attribut de nom du champ de formulaire comme l'ID des autres éléments.
<input type = "text" name = "myelement" value = "Text Field"> <div id = "myelement"> a div </div>
Collection spéciale
Rédaction de documents
<html> <éad- head> <tight> document.write () Exemple 3 </ title> </ head> <body> <script type = "text / javascript"> document.write ("<script type = /" text / javascript / "src = /" file.js / ">") + "<// script>"); </cript> </ body> </html>Les chaînes <// script> ne seront pas considérées comme des balises fermées pour les balises de script externes, il n'y aura donc pas de contenu inutile sur la page.
Type d'élément
Le nœud d'élément a les caractéristiques suivantes:
Pour accéder au nom de balise d'un élément, vous pouvez utiliser l'attribut NodeName ou l'attribut tagname;
<div id = "myDiv"> </div> var div = document.getElementById ("MyDiv"); console.log (div.tagname); // divconsole.log (div.NodeName); // divif (élément.tagname == "div") {// vous ne pouvez pas comparer comme ceci, il est facile de faire des erreurs} if (element.tagname.tolowercase == "div") {// c'est le meilleur (pour n'importe quel document)}Obtenir des fonctionnalités
Il existe trois méthodes DOM principales pour les caractéristiques de fonctionnement, à savoir getAttribute (), setAttribute () et reposEatTribute ();
Notez que le nom d'attribut passé pour getAttribute () est le même que le nom d'attribut réel. Impression: Pour obtenir la valeur d'attribut de la classe, vous devez transmettre "classe" au lieu de "ClassName".
var div = document.getElementById ("myDiv"); console.log (div.getAttribute ("class")); // bdCréer des éléments
Utilisez la méthode document.CreateElement () pour créer un nouvel élément.
Enfants de l'élément
Avant d'effectuer une opération, vous devez généralement vérifier la propriété Nodetype d'abord, comme indiqué dans l'exemple suivant:
for (var i = 0; len = element.childNodes.length; i <len; i ++) {if (element.childNodes [i] .NodeType == 1) {// effectuer certaines opérations}}Type de texte
Les nœuds de texte ont les caractéristiques suivantes:
Créer un nœud de texte
Vous pouvez utiliser Document.CreateTextNode () pour créer un nouveau nœud de texte.
Nœuds de texte normalisés
Normaliser()
Nœuds de texte divisé
SplitText ()
Type de commentaire
Le nœud de commentaire a les caractéristiques suivantes:
Technologie de l'opération DOM
Formulaire d'opération
// Créer TableVar Table = Document.CreateElement ("Table"); Table.Border = 1; Table.Width = "100%"; // Créer TBODYVAR TBODY = Document.CreateElement ("TBODY"); Table.APPEndChild (TBODY); // Créer la première ligne tbody.insertrow (0); tbody.Rows [0] .InsertCell (0); tBody.Rows [0] .Cells [0] .APPENDCHILD (document.CreateTextNode ("Cell 1,1")); TBODY.ROW 2,1 ")); // Créez la deuxième ligne tbody.insertrow (01); tbody.Rows [1] .InsertCell (0); tBody.Rows [1] .Cells [0] .APPEndChild (document.CreateTextNode (" Cell 1,2 ")); tBody.Rows [1] .InsertCell (1); tBody.Rows [1] .Cells [1] .APPENDCHILD (document.CreateTextNode (" Cell 2,2 ")); document.body.appendChild (table);API sélecteur
Méthode QueySelector ()
// Obtenez l'élément corporel var tbody = document.QuerySelector ('body'); // Obtenez l'élément avec id "myDiv" var myDiv = document.QuerySelector ("# myDiv"); // Obtenez le premier élément avec la classe "sélectionnée" var sélectionnée = document.QuerySelector (". Selected"); // Obtenez le premier élément image avec la classe "bouton" var IMG = document.body.QuerySelector ("img.button");Méthode QueySelectorall ()
// Obtenez tous les <em> éléments dans un <v> (similaire à GetElementsByTagName ("em")) var ems = document.getelementById ("myDiv"). QuerySelectorall ("em"); // obtenir tous les éléments de la classe "sélectionnés" var sélectionnés = document.QuerySelectorall (". document.QuerySelectorAll ("P Strong");Html5
Extensions liées à la classe
Méthode GetElementsByClassName ():
Cette méthode peut être appelée via l'objet de document et tous les éléments HTML.
// Obtenez tous les éléments contenant "nom d'utilisateur" et "actuel" dans la classe. L'ordre des noms de classe n'a pas d'importance var allCurrentUserAmes = document.getElementsByClassName ("Username Current"); // Obtenez tous les éléments avec le nom de la classe "Selected" dans l'élément avec ID "MyDiv" var Selected = Document.getElementyId ("MyDiv"). GetElementsByClassName ("Selected");Gestion de la mise au point
HTML5 ajoute également la fonction d'aider à gérer la mise au point DOM. Le premier est la propriété Document.ActiveElement, qui fait toujours référence à l'élément du DOM qui a actuellement acquis une concentration.
var bouton = document.getElementById ("MyButton"); Button.focus (); alert (document.activeElement === Button); // vraiPar défaut, lorsque le document est juste chargé, le document.activeElement est stocké dans le document.activeElement avec une référence à l'élément document.body. Pendant le chargement du document, la valeur de Document.ActiveElement est nul.
De plus, la méthode document.hasfocus () a été ajoutée, qui est utilisée pour déterminer si le document a acquis une concentration.
var bouton = document.getElementById ("MyButton"); botton.focus (); alert (document.hasfocus ()); // vrai