Après avoir compris les frameworks et les nœuds de DOM (modèle d'objet texte), la chose la plus importante est d'utiliser ces nœuds pour traiter les pages Web HTML
Pour un nœud de nœud DOM, il existe une série de propriétés et de méthodes à utiliser. Le tableau suivant est couramment utilisé.
Amélioré: http://www.w3school.com.cn/xmldom/dom_element.asp
1. Nœuds d'accès
BOM fournit quelques méthodes limites pour accéder aux nœuds. GetElementsByTagName () et GetElementById () sont couramment utilisés
La copie de code est la suivante:
<script type = "text / javascript">
fonction searchdom () {
var oli = document.getElementsByTagName ("li");
var j = oli.length;
var j2 = oli [5] .tagname;
var j3 = oli [0] .childNodes [0] .Nodevalue;
document.write (j + "<br>" + j2 + "<br>" + j3 + "<br>");
}
</cript>
<body>
<body onload = "searchdom ()">
<div id- "in"> </div>
<ul> Langue client
<li> html </li>
<li> javascript </li>
<li> CSS </li>
</ul>
<ul> Langage côté serveur
<li> asp.net </li>
<li> jsp </li>
<li> php </li>
</ul>
</docy>
document.getElementById ()
La copie de code est la suivante:
<script type = "text / javascript">
window.onload = function () {
fonction findId () {
var j4 = oli2.tagname;
Document.Write (J4);
}
var oli2 = document.getElementById ("inn");
oli2.onclick = findId;
}
</cript>
<li id = "inn"> php </li>
La copie de code est la suivante:
<html>
<body id = "myid">
<div> </div>
<script type = "text / javascript">
x = document.getElementsByTagName ('div') [0];
Document.Write ("Div CSS Class:" + x.className);
document.write ("<br />");
Document.Write ("Une autre manière:");
document.write (document.getElementById ('MyId'). ClassName);
</cript>
</docy>
</html>
// id obtient une classe
2. Détecter le type de nœud
Le type de nœud peut être détecté via le nodetype du nœud, et un paramètre renvoie 12 valeurs entières.
Format d'expression tel que document.nodetype
Ce qui est vraiment utile, ce sont les trois types mentionnés par les nœuds de modèle du modèle DOM (I)
Nœuds d'élément, nœuds de texte et nœuds d'attribut
1. Le nœud d'élément renvoie la valeur du nœud d'élément est 1
2. Le nœud d'attribut renvoie la valeur du nœud d'attribut est 2
3. La valeur de retour du nœud de texte est 3
La copie de code est la suivante:
<script type = "text / javascript">
window.onload = function () {
fonction findId () {
var j5 = oli2.NodeType;
Document.Write ("NODETYPE:" + J5 + "<br>");
}
var oli2 = document.getElementById ("inn");
oli2.onclick = findId;
}
</cript>
<li id = "inn"> css </li>
Retour: nodetype: 1
Cela signifie qu'un nœud peut être traité séparément, ce qui est très pratique lors de la recherche de nœuds. Il sera discuté plus tard.
3. Utilisez la relation père-son-frère pour trouver des nœuds
Sur le nœud d'accès à la première section, utilisez l'attribut ChildNodes du nœud pour accéder au nœud de texte contenu dans le nœud d'élément.
Cette section utilise la relation père-son-frère des nœuds pour trouver des nœuds
* Utilisez les attributs HaschildNodes et ChildNodes pour obtenir tous les nœuds contenus dans ce nœud
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<script linguisse = "javascript">
window.onload = fonction myDomispector () {
var oul = document.getElementById ("myList"); // Obtenez la balise <ul>
var domString = "";
if (oul.haschildNodes ()) {// juger s'il y a des nœuds enfants
var och = oul.childNodes;
pour (var i = 0; i <och.length; i ++) // recherche un par un
DomString + = och [i] .NodeName + "<br>";
}
Document.Write (Domstring);
}
</cript>
</ head>
<body>
<ul id = "myList">
<li> côtes douces et aigres </li>
<li> Cage à la vapeur du porc </li>
<li> fish kimchi </li>
<li> Poulet rôti de châtaignier </li>
<li> Mapo Tofu </li>
</ul>
</docy>
4.Dom obtient le nœud parent du nœud
La copie de code est la suivante:
<script linguisse = "javascript">
window.onload = function () {
var food = document.getElementById ("MyDarFood");
document.write (food.parentnode.tagname)
}
</cript>
</ head>
<body>
<ul>
<li> côtes douces et aigres </li>
<li> Cage à la vapeur du porc </li>
<li> fish kimchi </li>
<li id = "MyDearfood"> Chiron de rôti à la châtaignier </li>
<li> Mapo Tofu </li>
</ul>
// retour à UL
En utilisant le nœud parent, le nœud parent du nœud spécifié a été obtenu avec succès
5. Utiliser la propriété ParentNode
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<script linguisse = "javascript">
window.onload = function () {
var food = document.getElementById ("MyDarFood");
var parentelm = aliments.parentNode;
while (parentelm.classname! = "coloré" && parentelm! = document.body)
parentelm = parentelm.parentNode; // recherche tout le long
Document.Write ("TAGENAME:" + ParentelM.TAGNAME + "<br>");
Document.Write ("Claaname:" + parentelm.classname + "<br>");
document.write ("typeof:" + typeof (aliments) + "<br>");
}
</cript>
</ head>
<body>
<div>
<ul>
<span>
<li> côtes douces et aigres </li>
<li> Cage à la vapeur du porc </li>
<li> fish kimchi </li>
<li id = "MyDearfood"> Chiron de rôti à la châtaignier </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</ body> <br> // Sortie <br> // Tagename: div <br> Claaname: coloré <br> typeof: objet
Commencez par un nœud enfant et recherchez le nœud parent vers le haut jusqu'à ce que le nom de la classe du nœud soit "coloré"
6.Dom de la fraternité
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<script linguisse = "javascript">
window.onload = function () {
var aliments = document.getElementById ("MyDarFood");
var nextf = aliments.NextSibling;
alert ("nextSibling:" + nextf.tagname + "<br>");
}
</cript>
</ head>
<body>
<div>
<ul>
<span>
<li> côtes douces et aigres </li>
<li> Cage à la vapeur du porc </li>
<li> fish kimchi </li>
<li id = "MyDearfood"> Chiron de rôti à la châtaignier </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</docy>
Il a l'air génial d'accéder aux nœuds de frères et sœurs en utilisant des propriétés NextSibling et précédents.
Mais cela ne fonctionne que pour le navigateur IE
Afin d'avoir une bonne compatibilité avec le code, Nodetype doit être utilisé pour porter le jugement
Ce qui suit est la compatibilité:
La copie de code est la suivante:
<adal>
<Title> frères et sœurs </TITME>
<script linguisse = "javascript">
Fonction nastSib (node) {
var templast = node.parentNode.lastChild;
// juger s'il s'agit du dernier nœud, si c'est le cas, retourne null
if (node == templast)
retourner null;
var tempobj = node.nextsibling;
// Recherchez les nœuds de frère suivants un par un jusqu'à ce que le nœud d'élément soit trouvé
while (tempobj.nodeType! = 1 && tempobj.nextsibling! = null)
tempobj = tempobj.nextsibling;
// Opérateur à trois points, s'il s'agit d'un nœud d'élément, il renvoie le nœud lui-même, sinon il renvoie nul
return (tempobj.NodeType == 1)? TempoBj: null;
}
Fonction Prévsib (nœud) {
var tempFirst = node.parentNode.FirstChild;
// juger si c'est le premier nœud, si c'est le cas, retourne null
if (node == tempfirst)
retourner null;
var tempobj = node.PreviousSibling;
// Recherchez les nœuds du frère précédent un par un jusqu'à ce que le nœud d'élément soit trouvé
while (tempobj.nodeType! = 1 && tempobj.previoussibling! = null)
tempobj = tempobj.previoussibling;
return (tempobj.NodeType == 1)? TempoBj: null;
}
fonction myDomispector () {
var myitem = document.getElementById ("myDearFood");
// Obtenez le nœud de frère prochain
var nextListItem = nextsib (myitem);
// Obtenez le nœud de frère élément précédent
var prelistitem = prevsib (myitem);
alert ("dernier élément:" + ((nextListItem! = null)? nextListItem.firstchild.nodevalue: null) + "prelistitem:" + ((prelistitem! = null)? prelistitem.firstchild.nodevalue: null));
}
</cript>
</ head>
<body onload = "myDomispector ()">
<ul>
<li> côtes douces et aigres </li>
<li> Cage à la vapeur du porc </li>
<li> fish kimchi </li>
<li id = "MyDearfood"> Chiron de rôti à la châtaignier </li>
<li> Mapo Tofu </li>
</ul>
</docy>
7. Définir les propriétés du nœud
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<script linguisse = "javascript">
window.onload = function () {
// Obtenez des photos
var imgdatabe = document.getElementsByTagName ("img") [0];
// Obtenez l'attribut de titre de l'image
imgdatabe.setAttribute ("src", "02.gif");
imgdatabe.setAttribute ("titre", "pente amicale");
document.write (imgdatabe.getAttribute ("titre"));
document.write (imgDatabe.getAttribute ("alt"));
document.write (imgdatabe.getAttribute ("node-data"));
document.write (imgdatabe.getAttribute ("node_data"));
}
</cript>
</ head>
<body>
<div>
<img src = "01.jpg" node-data = "222" node_data = "3333">
<img src = "01.jpg">
</docy>
Utilisez la méthode setAttribute () pour définir les attributs de nœud
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<meta charset = "utf-8" />
<script linguisse = "javascript">
window.onload = function () {
var bkk = document.getElementById ("new5");
var clickbk = document.getElementById ("qiehuan");
clickbk.onclick = dsqiehuan;
fonction dsqiehuan () {
bkk.setAttribute ("class", "xxx")
}
}
</cript>
<style>
.xxx {couleur: #ddd}
</ style>
</ head>
<body>
<div id = "new5">
555
</div>
<em id = "qiehuan"> commutateur </em>
</docy>
8.CreateElement () Créer un nœud
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<meta charset = "utf-8" />
<script linguisse = "javascript">
window.onload = function () {
var op = document.CreateElement ("p");
var otext = document.createTextNode ("Create node à l'aide de Dom");
var otext1 = document.CreateTextNode ("Créer le nœud 123 à l'aide de DOM");
OP.APPEndChild (OTEXT);
OP.APPEndChild (OTEXT1);
Document.Body.ApendChild (OP);
}
</cript>
</ head>
<body>
<p> Il y avait à l'origine un P ici, teste CreateElement () </p>
</docy>
9.Removechild supprime le nœud
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<meta charset = "utf-8" />
<script linguisse = "javascript">
window.onload = function () {
var op = document.getElementsByTagName ("p") [0];
op.parentnode.removechild (op); // la fin est .removechild (op), pas .removechild ("op")
}
</cript>
</ head>
<body>
<p> Il y avait à l'origine un P ici, teste CreateElement () </p>
</docy>
10.InsertBefore () Insérez le nœud avant un nœud spécifique
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<meta charset = "utf-8" />
<script linguisse = "javascript">
window.onload = function () {
var opold = document.getElementsByTagName ("p") [0];
var opnew = document.CreateElement ("p");
var otext = document.createTextNode ("nouveau nœud")
Opnew.ApendChild (Otext);
opold.parentNode.insertBefore (Opnew, opold); // reçoit deux paramètres, l'un est le nouveau paramètre et l'autre est l'ancien paramètre de nœud
}
</cript>
</ head>
<body>
<p> Il y avait à l'origine un P </p>
</docy>
11. Insérer de nouveaux éléments après un nœud spécifique (ajouté le 9 janvier 2015)
Les méthodes fournies par DOM ne peuvent ajouter de nouveaux éléments que avant l'élément cible à l'aide d'insertFore (), ou utiliser la méthode APPEDCHILD () pour ajouter de nouveaux éléments à la fin des NICHNODES de l'élément parent (exemple: adresse).
En pratique, il est souvent utilisé pour ajouter de nouveaux éléments à la fin d'un élément spécifique. La méthode DOM n'a pas la méthode insertFore (), mais l'utilisation des connaissances existantes peut être utilisée pour écrire.
L'idée de code est la suivante
La copie de code est la suivante:
Fonction Insertafter (Newelement, TargetElement) {
var Outdoor = TargetElement.ParentNode; // Trouvez l'élément parent de l'élément cible
if (adarent.lastchild == cibleLelement) // si la cible est le dernier élément
Outdoor.ApendChild (Newelement); // Ajouter directement au dernier élément
else // avant d'insérer vers le nœud d'élément parent de l'élément suivant
Outdoor.insertBefore (Newelement, TargetElement.nextsibling)
Exemple: (Ajouter en dehors de l'élément) Instance originale: Adresse
La copie de code est la suivante:
<adal>
<meta charset = "utf-8">
<Title> </Title>
</ head>
<body onload = "interp ()">
<p> d'abord </p>
<p id = "Target"> SECOND </p>
<script type = "text / javascript">
Fonction Insertafter (Newelement, TargetElement) {
var Outdoor = TargetElement.ParentNode; // Trouvez l'élément parent de l'élément cible
if (adarent.lastchild == cibleLelement) // si la cible est le dernier élément
Outdoor.ApendChild (Newelement); // Ajouter directement au dernier élément
else // avant d'insérer vers le nœud d'élément parent de l'élément suivant
Outdoor.insertBefore (Newelement, TargetElement.nextsibling)
}
fonction interperp () {
var ooparent = document.getElementById ("Target");
var ooOnewp = document.CreateElement ("a");
oonewp.setAttribute ("href", "http://www.qq.com");
var ootextp = document.createTextNode ("lien");
oonewp.appendChild (ooetextp);
insertafter (ooonewp, ooparent);
}
</cript>
</docy>
Exemple: ajouté dans l'élément
12. Ajouter une fragmentation du document pour améliorer l'efficacité de l'exécution
La copie de code est la suivante:
<adal>
<Title> ChildNodes </Title>
<meta charset = "utf-8" />
<script linguisse = "javascript">
window.onload = function () {
var opold = document.getElementsByTagName ("p") [0];
var acolors = ["rouge", "vert", "bleu", "magenta", "jaune", "chocolat", "noir", "aquamarine", "lime", "fuchsia", "cuivres", "azur", "brun", " Bronze "," Deeppink "," AliceBlue "," Gray "," Copper "," Coral "," Feldspar "," Orange "," Orchid "," Pink "," Plum "," Quartz "," Purple "];
var ofragment = document.CreateDocumentFragment (); // Créer une fragmentation du document
pour (var i = 0; i <acolors.length; i ++) {
var op = document.CreateElement ("p");
var otext = document.CreateTextNode (acolors [i]);
OP.APPEndChild (OTEXT);
Ofragment.ApendChild (OP); // ajouter les nœuds aux fragments d'abord
}
//Document.body.ApendChild(Ofragment); // ajouté à la page enfin
opold.parentNode.insertBefore (Ofragment, Opold); // combiné avec INSERTBEFORE pour ajouter des fragments de document au nœud
}
</cript>
</ head>
<body>
<p> Il y avait à l'origine un P </p>
</docy>