Cómo comenzar rápidamente con VUE3.0: Ingrese al aprendizaje
Recomendaciones relacionadas: Tutorial de JavaScript
1. Obtengaelementos operativos
El objeto de documento proporciona algunos métodos para encontrar elementos. según su identificación, nombre y clase Obtenga el elemento de operación a través de atributos y nombres de etiquetas.
Resumen:
excepto que el método document.getElementById() devuelve el elemento con la identificación especificada, los otros métodos devuelven una colección que cumple con los requisitos. Para obtener uno de los objetos, puede obtenerlo mediante un subíndice, que de forma predeterminada comienza en 0.
El objeto de documento proporciona algunas propiedades que se pueden utilizar para obtener elementos en el documento. Por ejemplo, obtenga todas las etiquetas de formulario, etiquetas de imagen, etc.
Tenga en cuenta que
los elementos de operación obtenidos a través de los métodos del objeto de documento y las propiedades del objeto de documento representan el mismo objeto. Por ejemplo, document.getElementsByTagName('body')[0] es congruente con document.body.
Los nuevos métodos de objetos de documento de HTML5
Para facilitar la obtención de elementos para la operación, HTML5 agrega dos nuevos métodos al objeto de documento, a saber, querySelector() y querySelectorAll().
Dado que estos dos métodos se utilizan de la misma manera, a continuación se utiliza el método document.querySelector() como ejemplo.
En las operaciones DOM, los objetos elemento también proporcionan métodos para obtener elementos específicos dentro de un elemento. Los dos métodos comúnmente utilizados son getElementsByClassName() y getElementsByTagName(). Se utilizan de la misma forma que los métodos del mismo nombre en el objeto del documento.
Además, el objeto elemento también proporciona el atributo secundario para obtener los elementos secundarios del elemento especificado. Por ejemplo, obtenga los elementos secundarios de ul en el ejemplo anterior.
Objeto HTMLCollection
La diferencia entre los objetos HTMLCollection y NodeList:
Consejo: Para la colección devuelta por el método getElementsByClassName(), el método getElementsByTagName() y el atributo secundario, la identificación y el nombre se pueden convertir automáticamente en un atributo.
2. Contenido del elemento
En JavaScript, si desea operar con el contenido del elemento obtenido, puede utilizar las propiedades y métodos proporcionados por el DOM.
dar un ejemplo
Implementación de código
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Operaciones de contenido de elementos</title>
</cabeza>
<cuerpo>
<p id="caja">
El primer párrafo...
<p>
El segundo párrafo...
<a href="http://www.example.com">tercero</a>
</p>
</p>
<guión>
var cuadro = document.getElementById('cuadro');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</cuerpo>
</html> Tenga en cuenta que
pueden producirse problemas de compatibilidad del navegador al utilizar el atributo InnerText. Por lo tanto, se recomienda
utilizar InnerHTML para obtener o configurar el contenido de texto de los elementos tanto como sea posible durante el desarrollo. Al mismo tiempo, existen ciertas diferencias entre el atributo internalHTML y el método document.write() a la hora de configurar el contenido. El primero actúa sobre el elemento especificado, mientras que el segundo reconstruye toda la página del documento HTML. Por lo tanto, los lectores deben elegir el método de implementación adecuado de acuerdo con las necesidades reales durante el desarrollo
[Caso] Cambiar el tamaño de la caja
Ideas de implementación de código :
① Escriba HTML y establezca el tamaño de p.
② Complete el cambio de tamaño del cuadro de acuerdo con la cantidad de clics del usuario.
③ Cuando el número de clics es un número impar, el cuadro se vuelve más grande; cuando el número de clics es un número par, el cuadro se vuelve más pequeño.
Implementación de código
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<estilo>
.box{ancho:50px;alto:50px;fondo:#eee;margen:0 auto;}
</estilo>
</cabeza>
<cuerpo>
<p id="caja" clase="caja"></p>
<guión>
var cuadro = document.getElementById('cuadro');
var i = 0; // Guarda el número de veces que el usuario hace clic en el cuadro box.onclick = function() { // Maneja el evento de clic del cuadro ++i;
if (i % 2) { // El número de clics es un número impar y aumenta this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'grande';
} else { // El número de clics es un número par y se vuelve más pequeño this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'pequeño';
}
};
</script>
</cuerpo>
</html> 3. Atributos del elemento
En el DOM, para facilitar que JavaScript obtenga, modifique y atraviese los atributos relevantes del elemento HTML especificado, se proporcionan atributos y métodos de operación.
Puede utilizar el atributo de atributos para obtener todos los atributos de un elemento HTML, así como el número de todos los atributos y la longitud.
dar un ejemplo
Implementación de código
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Operaciones de atributos de elementos</title>
<estilo>
.gray{fondo: #CCC;}
#grueso{font-weight: negrita;}
</estilo>
</cabeza>
<cuerpo>
<p>palabra de prueba.</p>
<guión>
// Obtener elemento p var ele = document.getElementsByTagName('p')[0];
// ① Muestra el número de atributos del ele actual console.log('Número de atributos antes de la operación: ' + ele.attributes.length);
// ② Agregue atributos a ele y verifique el número de atributos ele.setAttribute('align', 'center');
ele.setAttribute('título', 'Texto de prueba');
ele.setAttribute('clase', 'gris');
ele.setAttribute('id', 'grueso');
ele.setAttribute('estilo', 'tamaño de fuente:24px;borde:1px verde sólido;');
console.log('Número de atributos después de agregar atributos: ' + ele.attributes.length);
// ③ Obtener el valor del atributo de estilo de ele console.log('Obtener el valor del atributo de estilo:' + ele.getAttribute('style'));
// ④ Elimina el atributo de estilo de ele y verifica los atributos restantes ele.removeAttribute('style');
console.log('Ver todas las propiedades:');
for (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.atributos[i]);
}
</script>
</cuerpo>
</html> 4.
Revisión del estilo del elemento: modifique el estilo mediante la operación de los atributos del elemento.
Sintaxis de estilo de elemento: estilo. Nombre del atributo.
Requisito: debe eliminar el guión "-" en el nombre del estilo CSS y escribir en mayúscula la segunda letra inicial en inglés.
Ejemplo: para establecer el color de fondo, el color de fondo debe cambiarse a color de fondo en la operación del atributo de estilo.
Tenga en cuenta que
el estilo flotante en CSS entra en conflicto con las palabras reservadas de JavaScript y diferentes navegadores tienen diferentes soluciones
. Por ejemplo, IE9-11, Chrome y Firefox pueden usar "float" y "cssFloat", el navegador Safari usa "float" y IE6 ~ 8 usa "styleFloat".
Pregunta: Un elemento puede tener múltiples selectores de clases. ¿Cómo operar la lista de selectores durante el desarrollo?
La solución original: use el atributo className del objeto elemento para obtener el resultado. El resultado obtenido es un tipo de carácter y luego procese la cadena de acuerdo con la situación real.
El método proporcionado por HTML5: la lista de selección de clases del nuevo elemento classList (solo lectura).
Por ejemplo: si el valor de clase de un elemento p es "título de la lista de navegación del encabezado del cuadro", ¿cómo eliminar el encabezado?
Solución HTML5: elemento p object.classList.toggle("encabezado
");
Implementación de código
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Uso de classList</title>
<estilo>
.bg{fondo:#ccc;}
.strong{font-size:24px;color:rojo;}
.smooth{alto:30px;ancho:120px;radio-borde:10px;}
</estilo>
</cabeza>
<cuerpo>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Java</li>
</ul>
<script> // Obtiene el segundo elemento li var ele = document.getElementsByTagName('li')[1] // Si no hay una clase fuerte en el elemento li, agrega if (!ele.classList.contains('strong ' )) { ele.classList.add('strong'); } // Si no hay una clase suave en el elemento li, agréguela si se elimina, ele.classList.toggle('smooth'); log('Agregar y cambiar estilo posterior: '); console.log(ele);
<guión>
ele.classList.remove('bg');
console.log('Después de la eliminación:');
consola.log(ele);
</script>
</cuerpo>
</html> Además, el atributo classList también proporciona muchos otros métodos y propiedades de operación relacionados.
5. [Caso] Efecto de cambio de barra de pestañas
Ideas de implementación de código :
① Escriba HTML para diseñar la estructura y el estilo de la barra de pestañas, donde la clase es igual a actual para indicar la pestaña que se muestra actualmente y el valor predeterminado es la primera pestaña.
② Obtenga todas las etiquetas y el contenido de visualización correspondiente a las etiquetas.
③ Recorra y agregue un evento al pasar el mouse para cada etiqueta. En la función de procesamiento de eventos, recorra todo el contenido de visualización correspondiente a la etiqueta, cuando el mouse se deslice sobre la etiqueta, agregue la corriente a través del método add () de classList; remove() El método sale de la corriente.
Implementación de código
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Efecto de cambio de barra de pestañas</title>
<estilo>
.tab-box{ancho:383px;margen:10px;borde:1px sólido #ccc;borde-superior:2px sólido #206F96;}
.tab-head{altura:31px;}
.tab-head-p{ancho:95px;alto:30px;float:left;border-bottom:1px sólido #ccc;border-right:1px sólido #ccc;fondo:#206F96;line-height:30px;text- alinear:centro;cursor:puntero;color:#fff;}
.tab-head .current{fondo:#fff;border-bottom:1px sólido #fff;color:#000;}
.tab-head-r{frontera-derecha:0;}
.tab-body-p{display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</estilo>
</cabeza>
<cuerpo>
<p clase="tab-box">
<p clase="pestaña-cabeza">
<p class="tab-head-p current">Pestaña uno</p>
<p class="tab-head-p">Pestaña 2</p>
<p class="tab-head-p">Pestaña tres</p>
<p class="tab-head-p tab-head-r">Pestaña cuatro</p>
</p>
<!--jkdjfk?-->
<p clase="tab-cuerpo">
<p class="tab-body-p actual"> 1 </p>
<p clase="tab-cuerpo-p"> 2 </p>
<p clase="tab-cuerpo-p"> 3 </p>
<p clase="tab-cuerpo-p"> 4 </p>
</p>
</p>
<guión>
// Obtener todos los objetos de elementos de pestaña de la barra de pestañas var tabs = document.getElementsByClassName('tab-head-p');
// Obtener todos los objetos de contenido de la barra de pestañas var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Recorre el objeto del elemento tabs[i].onmouseover = function() { // Agrega un evento de mouseover al objeto del elemento de etiqueta for ( var i = 0; i < ps.length; ++i) { // Recorre el objeto del elemento de contenido de la barra de pestañas if (tabs[i] == this) { // Muestra el elemento li ps[i] que usa el mouse actual se ha deslizado sobre .classList.add('current');
pestañas[i].classList.add('actual');
} else { // Ocultar otros elementos li ps[i].classList.remove('current');
pestañas[i].classList.remove('actual');
}
}
};
}
</script>
</cuerpo>
</html> Recomendaciones relacionadas: tutorial de JavaScript
Lo anterior es el contenido detallado de las operaciones de elementos HTML explicadas en detalle mediante ejemplos de JavaScript. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de php.
