1.getElementsByName (): Obtener nombre.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo:
<P name = "PN"> Hello </p> <p name = "Pn"> Hello </p> <p name = "Pn"> Hello </p> <script> function getName () {var cuenta = document.getElementsByName ("pn"); alerta (count.length); var p = Count [2]; p.innerhtml = "mundo"; } </script>Resultados: la interfaz imprime tres holaes, acompañado de un cuadro inmediato "3". Al hacer clic en Aceptar, el contenido que se muestra en la interfaz se convierte en Hello Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
2.getElementsBytagName (): Obtener el elemento.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo
<p> hola </p> <p> hola </p> <p> hello </p> <script> function getName () {var count = document.getElementsBytagName ("P"); alerta (count.length); var p = Count [2]; p.innerhtml = "mundo"; } </script>Resultados: la interfaz imprime tres holaes, acompañado de un cuadro inmediato "3". Al hacer clic en Aceptar, el contenido que se muestra en la interfaz se convierte en Hello Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
3.getAttribute (): Obtener atributos de elementos.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo
<a id = "ayuda"> </a> <script> function getattr1 () {var anode = document.getElementById ("Aid"); var att = anode.getAttribute ("id"); alerta ("La identificación de A es:"+attr); } function getAttr2 () {var anode = document.getElementById ("ayuda"); var att = anode.getAttribute ("title"); alerta ("El contenido de título de A es:"+attr); } getattr1 (); getATTR2 (); </script>Resultado: el cuadro de inmediato "La identificación de A es: ayuda". Después de hacer clic en Aceptar, el cuadro de solicitud "El contenido de título de A es: Obtenga el atributo de etiqueta de A".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.SetAttribute () establece atributos del elemento.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo
<a id = "AID2"> AID2 </a> <script> function setattr () {var anode = document.getElementById ("Aid2"); anode.SetAttribute ("Título", "Configuración dinámica de un atributo de título"); var att = anode.getAttribute ("title"); alerta ("La configuración dinámica del valor del título es:"+attr); } setattr (); </script>Resultado: el cuadro de solicitud "El valor de título de configuración dinámica es: establecer dinámicamente la propiedad de título de una" ventana emergente ".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.ChildNodes (): acceder a los nodos infantiles.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <script> function getChildNode () {var childNode = document.getElementsByTagName ("ul") [0] .childNodes; alerta (childNode.length); alerta (ChildNode [0] .nodeType); } getChildNode (); </script>Resultado: la interfaz imprime el cuadro de diálogo "3" aparece en .1.2.3, y luego presione OK para aparecer.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.ParentNode (): Acceda al nodo principal.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo
<div> <p id = "pid"> </p> </div> <script> function getParentNode () {var div = document.getElementById ("pid"); alerta (div.parentnode.nodeName); } getParentNode (); </script>Resultado: aparece un cuadro de inmediato: Div.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.CreateElement (): Crear nodo de elemento.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo:
<script> function createNode () {var cuerpo = document.body; var input = document.createElement ("entrada"); input.type = "botón"; input.value = "botón"; Body.appendChild (entrada); // Insertar nodo} createNode (); </script>Resultado: aparece un botón.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.CreateTextNode (): Crear nodo de texto.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo:
<script> function createNode () {var elemento = document.createElement ("div"); elemento.classname = "mensaje"; var textNode = document.createTextNode ("¡Hola mundo!"); element.appendChild (textNode); document.body.appendChild (elemento); } createNode (); </script>Análisis de código: este ejemplo crea un nuevo elemento <div> y especifica un atributo de clase con un valor de "mensaje". Luego, se crea otro nodo de texto y se agrega al elemento creado anteriormente. El último paso es agregar este elemento al elemento <body> en el documento, para que pueda ver los elementos recién creados y los nodos de texto en el navegador.
Resultado: la página muestra Hello World.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.insertbefore (): Inserte el nodo.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo
<div id = "div"> <p id = "pid"> p elemento </p> </div> <script> function addNode () {var div = document.getElementById ("div"); var nodo = document.getElementById ("pid"); var newnode = document.createElement ("P"); newnode.innerhtml = "inserción dinámica de un elemento p"; div.insertbefore (Newnode, nodo); } addNode (); </script>Resultado: la interfaz se imprime: inserte dinámicamente un elemento P
elemento P
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10.removechild (): elimine el nodo.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo
<div id = "div"> <p id = "pid"> p elemento </p> </div> <script> function remoVovenode () {var div = document.getElementById ("div"); var p = div.removechild (div.childnodes [1]); } remOvente (); </script>Resultado: la interfaz no muestra nada.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.Offsetheight: tamaño de la página web
12.ScrollHeight: tamaño de la página web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ejemplo:
<script> function getSize () {var width = document.documentelement.offsetwidth || document.body.offsetwidth; // Resuelve problemas de compatibilidad var altura = document.documentelement.offsetheight || document.body.offsetheTheight; alerta (ancho+","+altura); } getSize (); </script>Mostrar resultados:
Este artículo presenta principalmente a JS DOM para controlar los elementos HTML. El contenido del artículo incluye principalmente DOM, HTML, etc. El artículo proviene de Internet, consultelo.