1.GetElementsByName (): Obtenez le nom.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ `
exemple:
<p name = "pn"> Bonjour </p> <p name = "pn"> Bonjour </p> <p name = "pn"> Bonjour </p> <script> function getName () {var count = document.getElementsByName ("pn"); alert (count.length); var p = count [2]; p.innerhtml = "monde"; } </ script>Résultats: L'interface imprime trois Helloes, accompagnées d'une boîte rapide "3". Lorsque vous cliquez sur OK, le contenu affiché sur l'interface devient bonjour Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2.GetsElementsByTagName (): Obtenez l'élément.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple
<p> Bonjour </p> <p> Bonjour </p> <p> Bonjour </p> <cript> Fonction getName () {var count = document.getElementsByTagName ("P"); alert (count.length); var p = count [2]; p.innerhtml = "monde"; } </ script>Résultats: L'interface imprime trois Helloes, accompagnées d'une boîte rapide "3". Lorsque vous cliquez sur OK, le contenu affiché sur l'interface devient bonjour Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.GetAttribute (): Obtenez des attributs d'élément.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple
<a id = "AID"> </a> <script> Fonction getAttr1 () {var anode = document.getElementById ("AID"); var attR = anode.getAttribute ("id"); alert ("A's ID est:" + attr); } fonction getAttr2 () {var anode = document.getElementById ("AID"); var attR = anode.getAttribute ("title"); alert ("Le contenu du titre de A est:" + att); } getAttr1 (); getAttr2 (); </cript>Résultat: L'ID de la boîte invite "A est: AID". Après avoir cliqué sur OK, le contenu du titre de la boîte d'invite "A est: Obtenez l'attribut de balise d'un".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.SetAttribute () Définit les attributs d'élément.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple
<a id = "AID2"> AID2 </a> <cript> fonction setAttr () {var anode = document.getElementById ("AID2"); anode.setAttribute ("Title", "Réglage dynamique d'un attribut de titre"); var attR = anode.getAttribute ("title"); alert ("Le réglage dynamique de la valeur du titre est:" + attr); } setAttr (); </cript>Résultat: la valeur du titre de réglage dynamique de la boîte d'invite est: définir dynamiquement la propriété de titre d'une "fenêtre contextuelle.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.ChildNodes (): Accédez aux nœuds enfants.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <script> function getChildNode () {var childNode = document.getElementsByTagname ("ul") [0] .ChildNodes; alert (childNode.Length); alert (childNode [0] .NodeType); } getchildNode (); </cript>Résultat: l'interface imprime la boîte de dialogue "3" apparaît sur .1.2.3, puis appuyez sur OK pour apparaître.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.parentNode (): Accédez au nœud parent.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple
<div> <p id = "pid"> </p> </div> <cript> function getParentNode () {var div = document.getElementyid ("pid"); alert (div.parentNode.NodeName); } getParentNode (); </cript>Résultat: une boîte invite apparaît: div.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.CreateElement (): Créer un nœud d'élément.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple:
<Script> Fonction CreenEnode () {var body = document.body; var input = Document.CreateElement ("Input"); input.type = "bouton"; input.value = "bouton"; body.appendChild (entrée); // insérer le nœud} createNode (); </cript>Résultat: un bouton apparaît.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.CreateTextNode (): Créer un nœud de texte.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple:
<Script> Fonction CreateNode () {var element = document.CreateElement ("div"); element.classname = "message"; var textNode = document.CreateTextNode ("Hello World!"); element.appendChild (textNode); Document.Body.ApendChild (élément); } createNode (); </cript>Analyse de code: cet exemple crée un nouvel élément <v> et spécifie un attribut de classe avec une valeur de "message". Ensuite, un autre nœud de texte est créé et ajouté à l'élément créé précédemment. La dernière étape consiste à ajouter cet élément à l'élément <body> du document, afin que vous puissiez voir les éléments et nœuds de texte nouvellement créés dans le navigateur.
Résultat: la page montre Hello World.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.InsertBefore (): insérer le nœud.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple
<div id = "div"> <p id = "pid"> p élément </p> </div> <script> function addNode () {var div = document.getElementById ("div"); var node = document.getElementById ("pid"); var newNode = document.CreateElement ("p"); newnode.innerhtml = "insertion dynamique d'un élément p"; div.InsertBefore (newNode, nœud); } addNode (); </cript>Résultat: l'interface imprime: insérer dynamiquement un élément P
élément p
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10.RemoveChild (): Supprimer le nœud.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple
<div id = "div"> <p id = "pid"> p élément </p> </div> <script> function removenode () {var div = document.getElementById ("div"); var p = div.removechild (div.childNodes [1]); } removenode (); </cript>Résultat: l'interface ne montre rien.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.offsetheight: Taille de la page Web
12.ScrollHeight: Taille de la page Web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
exemple:
<Script> function getSize () {var width = document.documentElement.offsetWidth || document.body.offsetwidth; // résoudre les problèmes de compatibilité var hauteur = document.DocumentElement.offSetheight || document.body.offsetheight; alerte (largeur + "," + hauteur); } getSize (); </cript>Afficher les résultats:
Cet article présente principalement JS Dom pour contrôler les éléments HTML. Le contenu de l'article comprend principalement DOM, HTML, etc. L'article vient d'Internet, veuillez vous y référer.