¿Te has preguntado cómo interactúan JavaScript y HTML DOM para crear las interacciones en tu sitio web? En este artículo de TIEngranaje, te explicaremos la relación entre estas dos herramientas y cómo aprovechar su potencial para desarrollar una página web dinámica y atractiva. ¡No te lo pierdas!
el html Modelo de objeto de documento (DOM) define un estándar para acceder y manipular documentos HTML. El DOM es un estándar del World Wide Web Consortium (W3C).
De acuerdo con la W3Cel “Modelo de Objetos de Documento W3C es una plataforma y una interfaz de lenguaje neutral que permite que los programas y scripts accedan y actualicen dinámicamente el contenido, la estructura y el estilo de un documento”.
El DOM HTML define los objetos y propiedades de todos los elementos HTML y los métodos para acceder a ellos. Proporciona una forma programática de acceder, cambiar, agregar o eliminar elementos HTML.
Árbol de nodos DOM
El DOM HTML representa un documento HTML como una estructura de árbol. La estructura de árbol también se conoce como árbol de nodos. Se puede acceder a todos los nodos HTML a través del árbol de nodos. Sus contenidos pueden ser modificado o eliminadoy nuevos elementos pueden ser creado. El árbol de nodos a continuación muestra el conjunto de nodos y las conexiones entre ellos.
Los nodos en el árbol de nodos tienen un relación el uno al otro Los nodos padres tienen hijos. Los niños en el mismo nivel se conocen como hermanos. En un documento HTML, el nodo principal es el <html> elemento. También es el nodo raíz.
Cada nodo tendrá un padre excepto el nodo raíz. Cualquier nodo puede tener uno o más nodos hijos. Un nodo sin hijos se conoce como nodo hoja.
Propiedades DOM comunes
Aquí hay una lista de las propiedades DOM más comunes que le interesará usar. El n abajo representa un nodo.
n.attributes– nodos de atributo de nodon.childNodes– nodos secundarios del nodon.innerHTML– valor de texto del nodon.nodeName– nombre del nodon.nodeValue– valor del nodon.parentNode– nodo padre de nodo
Métodos DOM comunes
También hay algunos métodos DOM que son muy útiles. Aquí hay una lista que puede usar:
n.appendChild(node)– insertar un nodo hijo a nodon.getElementById(id)– obtener el elemento con una identificación específican.getElementsByTagName(name)– obtener todos los elementos con un nombre de etiqueta especificadon.removeChild(node)– eliminar un nodo secundario del nodo
Ejemplo
Echemos un vistazo a un ejemplo común en el que es posible que desee actualizar el nodo de texto para un elemento HTML en su documento. Podemos hacer esto programáticamente usando JavaScript, sin recargando la página web.
<script type="text/javascript">
function updateText(x) {
document.getElementById('p1').innerHTML = x
}
</script>
<p id="p1">
Click on the link below to update this element.
</p>
<br />
<a href="https://www.itgeared.com/javascript-html-dom-tutorial/JavaScript:void(0); updateText("Thank you for clicking me!');">
Click Me!
</a>En este ejemplo, usamos el getElementById método para acceder a la elemento de párrafo con una identificación de p1. Luego configuramos el texto usando el innerHTML propiedad. Podríamos haber utilizado un enfoque diferente produciendo los mismos resultados. Por ejemplo…
<script type="text/javascript">
function updateText(x) {
document.getElementById('p1').innerHTML = x
}
</script>
// <<REPLACE WITH>>
<script type="text/javascript">
function updateText(x) {
document.getElementById("p1").childNodes[0].nodeValue = x
}
</script>Como puede ver, entendiendo cómo acceder a los nodos en el árbol de nodos puede ser muy útil cuando se trabaja con JavaScript.
