1.dom: el modelo de objeto de documento DOM (modelo de objeto de documento) define métodos estándar para acceder y procesar documentos HTML. DOM representa documentos HTML como una estructura de árbol (árbol de nodo) con elementos, atributos y texto.
2. Algunas propiedades comúnmente utilizadas de DOM
2.1 Obtener elementos por identificación
(1) Sintaxis:
La copia del código es la siguiente:
document.getElementById ("id");
(2) Función: ID se refiere a la tarjeta de identificación de una persona. Podemos encontrar la etiqueta buscando la ID de etiqueta y luego realizar las operaciones correspondientes.
(3) Nota: ¡No olvides escribir un documento!
2.2 atributos innerhtml
(1) Sintaxis:
La copia del código es la siguiente:
Obgect.innerhtml = "Hola mundo"
(2) Función: principalmente para obtener o reemplazar el contenido en la etiqueta
(3) Ejemplo:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> innerhtml </title>
</ablo>
<Body>
<h2 id = "con"> javascript </h2>
<p> JavaScript es un lenguaje de secuencias de comandos simple basado en objetos y eventos impulsados. Está integrado en documentos HTML y es interpretado y ejecutado por el navegador, creando un efecto de visualización dinámica en la página web e implementando funciones de interacción del usuario. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ("Con");
document.write ("Título original:"+mychar.innerhtml+"<br>"); // emite el contenido original de la etiqueta H2
mychar.innerhtml = "¡Hola mundo!";
document.write ("Título modificado:"+mychar.innerhtml); // emite el contenido de etiqueta H2 modificado
</script>
</body>
</html>
(4) Nota: El objeto es el elemento Objeto obtenido, como el elemento obtenido a través de document.getElementById ("id").
2.3 Cambiar estilo HTML
(1) Sintaxis:
La copia del código es la siguiente:
Object.Style.Property
(2) Función: Se utiliza para modificar el estilo HTML
(3) Ejemplo:
La copia del código es la siguiente:
<Body>
<h2 id = "con"> Me encanta JavaScript </h2>
<p> JavaScript permite que las páginas web muestren efectos dinámicos e implementan funciones de interacción del usuario. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ("Con");
mychar.style.color = "rojo";
mychar.style.backgroundcolor = "#ccc";
mychar.style.width = "300px";
</script>
</body>
(4) Nota: La propiedad tiene muchos estilos, como color, altura, etc., que se puede modificar utilizando este método. No olvides agregar un punto y coma a las propiedades después de ellas.
2.4 Mostrar y ocultar (atributo de visualización)
(1) Sintaxis:
Object.style.display = valor
(2) Función: la visualización y el escondite a menudo se ven en las páginas web, que se logra utilizando el atributo de visualización.
(3) Ejemplo:
La copia del código es la siguiente:
<script type = "text/javaScript">
función Hiddentext ()
{
var mychar = document.getElementById ("Con");
mychar.style.display = "Ninguno";
}
función showText ()
{
var mychar = document.getElementById ("Con");
mychar.style.display = "bloque";
}
</script>
(4) Nota: El valor del valor es ninguno y el bloque, donde no se muestra ninguno, y se muestra el bloque.
2.5 atributo de nombre de clase
(1) Sintaxis:
La copia del código es la siguiente:
Object.classname = classname
(2) función: 1. Obtenga el atributo de clase del elemento; 2. Especifique un estilo CSS para un elemento en la página web para cambiar la apariencia del elemento.
(3) Ejemplo:
La copia del código es la siguiente:
<Evista>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
<title> ClassName Attribute </title>
<estilo>
cuerpo {font-size: 16px;}
.uno{
Border: 1px Solid #EEE;
Ancho: 230px;
Altura: 50px;
Antecedentes: #ccc;
Color: rojo;
}
.dos{
borde: 1px sólido #ccc;
Ancho: 230px;
Altura: 50px;
Antecedentes:#9CF;
Color: azul;
}
</style>
</ablo>
<Body>
<P id = "P1"> JavaScript permite que las páginas web muestren efectos dinámicos e implementan funciones de interacción del usuario. </p>
<input type = "button" value = "add style" onClick = "add ()"/>
<P id = "P2"> JavaScript permite que las páginas web muestren efectos dinámicos e implementan funciones de interacción del usuario. </p>
<input type = "button" value = "Change Apariencia" OnClick = "Modify ()"/>
<script type = "text/javaScript">
función add () {
var p1 = document.getElementById ("P1");
p1.classname = "one";
}
función modify () {
var p2 = document.getElementById ("P2");
p2.classname = "dos";
}
</script>
</body>
Lo anterior se trata de este artículo, espero que les guste.