DOM significa D ocument O bject M odel . Una página HTML se representa en un navegador. El navegador reúne en su memoria todos los elementos contenidos en la página, descargados del servidor web. Una vez hecho esto, el navegador muestra estos objetos en la ventana del navegador y una vez hecho esto, el navegador ya no puede reconocer elementos HTML individuales. Los navegadores habilitados para JavaScript son capaces de reconocer objetos individuales en una página HTML después de que la página se haya representado en el navegador porque el navegador habilitado para JavaScript reconoce y usa DOM. Permitiendo así controlar a voluntad la funcionalidad del objeto.
Ventajas de DOM:
- Ayuda a crear una página web interactiva, ya que permite que el navegador reconozca objetos HTML individuales incluso después de que se representan en la ventana del navegador.
- Permite controlar a voluntad la funcionalidad de los objetos.
- Ayuda a actualizar o modificar datos
Estructura
- Navegador: El navegador. Por ejemplo: Netscape Navigator, Internet Explorer, Opera, Mosaic, etc.
- Ventana: La ventana del navegador.
- Documento: El documento se muestra en la ventana del navegador. Esto además tiene múltiples elementos propios. Estamos hablando únicamente de formas aquí.
- Formulario: la jerarquía DOM continúa hacia abajo para abarcar elementos individuales del formulario.
Categorías de DOM: hay tres tipos de DOM admitidos por JavaScript, pero solo discutiremos aquellos que son aplicables con ES6.
1. DOM heredado: este era el modelo utilizado por las primeras versiones de JavaScript. Este modelo proporciona propiedades de solo lectura, como título, URL, etc. También proporciona información de lastModified sobre el documento en su conjunto. Este modelo tiene muchos métodos que se pueden usar para establecer y obtener el valor de la propiedad del documento.
Propiedades del documento de Legacy DOM:
- alinkColor: Esta propiedad define el color de los enlaces activados.
Eg. document.alinkColor
- anclas[]: Es el arreglo de cada objeto ancla, uno para cada ancla tal y como aparece en el documento.
Eg. document.anchors[0],document.anchors[1],...
- applets[]: Es la array de objetos de subprograma, uno para cada subprograma tal como aparece en el documento.
Eg. document.applets[0],document.applets[1],..
- bgColor: Esta propiedad define el color de fondo del documento.
Eg. document.bgColor
- Cookie: Esta propiedad define una propiedad valorada con un comportamiento especial que permite consultar las cookies asociadas al documento para su establecimiento.
Eg. document.cookie
- Dominio: esta propiedad define el dominio al que pertenece un documento y se ha utilizado con fines de seguridad.
Eg. document.domain
- incrustaciones[]: sinónimo de complementos[]. Es la array de objetos que representan datos incrustados en el documento.
Eg. document.embeds[0],document.embeds[1],...
- fgColor: esta propiedad define el color de texto predeterminado para el documento.
Eg. document.fgColor
- formularios[]: Es el arreglo de objetos formularios uno para cada uno, tal como aparece en el formulario.
Eg. document.forms[0],document.forms[1],...
- images[]: Es la array de objetos del formulario, uno para cada elemento con la etiqueta <img> tal como aparece en el formulario.
Eg. document.images[0[,document.images[1],...
- lastModified: esta propiedad define la fecha de la actualización más reciente.
Eg. document.lastModified
- linkColor: esta propiedad define el color de los enlaces no visitados, es lo opuesto a vlinkColor .
Eg. document.linkColor
- links[]: Array de enlaces de documentos.
Eg. document.links[0],document.links[1],...
- Ubicación: esta propiedad contiene la URL del documento.
Eg. document.location
- plugins[]: esta propiedad es sinónimo de incrustaciones[].
Eg. document.plugins[0],document.plugins[1],...
- Referrer: String que contiene la URL del documento si está enlazado con alguno.
Eg. document.referrer
- Título: contenido de la etiqueta <título>.
Eg. document.title
- URL: esta propiedad define la URL.
Eg. document.URL
- vlinkColor: Esta propiedad define el color de los enlaces visitados (no activados).
Eg. document.vlinkColor
Métodos de documento en Legacy DOM:
- clear(): Borra el contenido del documento y no devuelve nada.
Eg. document.clear()
- close(): Cierra el documento abierto con open().
Eg. document.close()
- open(): elimina el contenido del documento existente y abre una secuencia en la que se pueden escribir los contenidos del nuevo documento. No devuelve nada.
Eg. document.open()
- write(): Inserta la string especificada en el documento.
Eg. document.write()
- writeln(): Igual que write() pero inserta una nueva línea después de que se termina de agregar.
Eg. document.writeln()
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Legacy DOM example</title>
<script type="text/javascript">
function func1() {
var a = document.title;
alert("Document title: " + a);
}
function func2() {
var b = document.URL;
var c = document.lastModified;
var d = document.location;
document.write("Document URL: " + b);
document.write("Document last modified: " + c);
document.write("Document location: " + d);
}
function func3() {
var n = document.forms[1];
document.write("Second form elements: " + n);
}
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<b>Document to try Legacy DOM elements.</b>
<form name="form1">
<p>Section 1:</p>
<button name="b1" id="1"
value="title" onclick="func1()">
Title
</button>
<button name="b2" id="2"
value="INFO" onclick="func2()">
URL
</button>
</form>
<br>
<form name="form2">
Section 2:
<br>
<br>
<button name="bt1" id="1"
value="submit" onclick="func3()">
Elements
</button>
</form>
</center>
</body>
</html>
Producción:
2. W3C DOM: este DOM sigue el estándar World Wide Web Consortium que dice:
“Document Object Model es una interfaz neutral para la plataforma y el idioma que permitirá que los programas y scripts accedan y actualicen dinámicamente el contenido, la estructura y el estilo de los documentos”.
Este modelo se enfoca principalmente en la neutralidad del idioma para que los documentos de secuencias de comandos y estilos puedan simplificarse.
Propiedades del documento en W3C DOM:
- cuerpo: Contenido de la etiqueta.
Eg. document.body
- defaultView: Representa la ventana en la que se muestra el documento.
Eg. document.defaultView
- documentElement: Referencia a la etiqueta del documento.
Eg. document.documentElement
- implementación: representa el objeto DOMImplementation que representa la implementación que creó este documento.
Eg. document.implementation
Métodos de documentos en W3C DOM:
- createAttribute(name_of_attr): Devuelve un Node Attr recién creado con el nombre especificado.
Eg. document.createAttribute(name_of_attr)
- createComment(text): crea y devuelve un nuevo Node de comentario que contiene el texto especificado.
Eg. document.createComment(some_text)
- createDocumentFragment(): crea y devuelve un Node DocumentFragment vacío.
Eg. document.createDocumentFragment()
- createElement(tagname_of_new_ele): crea y devuelve un nuevo Node Elemento con un nombre de etiqueta especificado.
Eg. document.createElement(tagname_of_new_ele)
- createTextNode(texto): crea y devuelve un nuevo Node de texto que contiene el texto especificado.
Eg. document.createTextNode(text)
- getElementById(Id): Devuelve el valor del documento del elemento con el Id mencionado.
Eg. document.getElementById(Id)
- getElementsByName(nombre): Devuelve una array de Nodes con el nombre especificado del documento.
Eg. document.getElementsByName(name)
- getElementsByTagName(tagname): Devuelve una array de todos los Nodes de elementos en el documento que tienen un nombre de etiqueta especificado.
Eg. document.getElementsByTagName(tagname)
- importNode(importedNode, deep): crea y devuelve una copia de un Node de algún otro documento que sea adecuado para insertarlo en este documento. Si el argumento profundo es verdadero, también copia recursivamente a los hijos del Node.
Eg. document.importNode(importedNode, deep)
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>W3c example</title>
<script type="text/javascript">
function hello() {
var n = document.getElementById('2').value;
document.write("Hello " + n);
var a = document.body;
document.write("</br>Document body:" + a);
var b = document.defaultView;
document.write("</br>Document default view: " + b);
}
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p>
Hello from GeeksforGeeks, this is
an example representation.
</p>
<form name="myform">
<b>Name:</b>
<input type="text" name="name" id="2">
<input type="submit" name="submit"
value="submit" onclick="hello()">
</form>
</center>
</body>
</html>
Producción:
3. IE4 DOM: este DOM se introdujo en la versión 4 de Internet Explorer. Las versiones posteriores se ampliaron e incluyeron características de W3C DOM.
Propiedades del documento en IE4 DOM:
- activeElement: se refiere al elemento de entrada actualmente activo.
Eg. document.activeElement
- all[]: una array indexable de todos los objetos del elemento dentro del documento.
Eg. document.all[]
- charset: Conjunto de caracteres del documento.
Eg. document.charset
- children[]: Array que contiene los elementos HTML que son los hijos directos del documento.
Eg. document.children[]
- defaultCharset: juego de caracteres por defecto del documento.
Eg. document.defaultCharset
- expando: cuando esta propiedad se establece en falso, evita que los objetos del lado del cliente se expandan.
Eg. document.expando
- parentWindow: Documento que contiene la ventana.
Eg. document.parentWindow
- readyState: especifica el estado de carga del documento.
Eg. document.readyState
- no inicializado: el documento aún no ha comenzado a cargarse.
Eg. document.uninitialized
- cargando: el documento se está cargando
Eg. document.loading
- interactivo: el documento se ha cargado lo suficiente como para que el usuario interactúe.
Eg. document.interactive
- completo: el documento se ha cargado.
Eg. document.complete
Métodos de documento en IE4 DOM:
- elementFromPoint(x,y): Devuelve el elemento ubicado en el punto especificado.
Eg. document.elementFromPoint(x,y)
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>IE4 DOM example</title>
<script type="text/javascript">
function func1() {
var a = document.all["greetings"];
alert("Hey, " + a.innerHTML);
}
function func2() {
var b = document.activeElement;
document.write("Active element: " + b);
}
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h4 id="greetings">
Hello from GeeksforGeeks, this is
an example representation.
</h4>
<form name="myform">
<input type="submit" name="b1"
value="Greet" onclick="func1()">
<input type="text" name="text1">
<input type="submit" name="b2"
onclick="func2()">
</form>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vanshikagoyal43 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA