Tutoriales básicos de JavaScript

Objetos de JavaScript

Funciones de JavaScript

DOM HTML JS

BOM del navegador JS

Tutoriales básicos de AJAX

Manual de referencia de JavaScript

Cambio de contenido HTML de JS DOM Métodos de JS HTML DOM

Selector de JS HTML DOM

JavaScript se utiliza principalmente para obtener o modificar el contenido o el valor de los elementos HTML y aplicar ciertos efectos.

Para esto, primero debes encontrar el elemento. Hay muchas maneras de hacerlo:

Buscar elementos HTML por ID
Buscar elementos HTML mediante el nombre de etiqueta
Para encontrar elementos HTML mediante nombre de clase
Para encontrar elementos HTML mediante selectores CSS
Para encontrar elementos HTML mediante conjuntos de objetos HTML

Buscar elementos HTML por ID

Puedes usargetElementById()El método selecciona elementos basándose en el ID único del elemento.

Esta es la forma más sencilla de encontrar elementos HTML en el árbol DOM.

El siguiente ejemplo selecciona un elemento con atributo IDid="msg"de los elementos:

Ejemplo

var x = document.getElementById("msg");

Prueba a ver‹/›

Si se encuentra el elemento, este método devolverá el elemento como objeto.

Si no se encuentra el elemento, myElement contendrá null.

Buscar elementos HTML mediante el nombre de etiqueta

También puedes usargetElementsByTagName()El método selecciona elementos HTML mediante el nombre de etiqueta.

Este método devuelve una lista similar a un array de todos los elementos del documento con el nombre de etiqueta especificado.

En este ejemplo se seleccionan todos<p>Elemento:

Ejemplo

var x = document.getElementsByTagName("p");

Prueba a ver‹/›

Cambiar el color de fondo de todos los elementos de párrafo en el documento:

Ejemplo

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length; i++) {
　　　x[i].style.backgroundColor = "coral";
}

Prueba a ver‹/›

En este ejemplo se seleccionaid="wrapper"de los elementos, luego selecciona“wrapper”todos los<p>Elemento:

Ejemplo

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

Prueba a ver‹/›

Para encontrar elementos HTML mediante nombre de clase

Puede usargetElementsByClassName()Método para seleccionar todos los elementos con un nombre de clase específico.

Este método devuelve una lista similar a un array de todos los elementos con el nombre de clase especificado en el documento.

Este ejemplo devuelve todos los elementos conclass="demo" deLista de elementos:

Ejemplo

var x = document.getElementsByClassName("demo");

Prueba a ver‹/›

Para encontrar elementos HTML mediante selectores CSS

Puede usarquerySelectorAll()Método para seleccionar elementos que coinciden con el selector CSS especificado (ID, clase, tipo, etc.).

Este método devuelve una lista similar a un array de todos los elementos que coinciden con el selector especificado.

Los selectores CSS proporcionan un método muy poderoso y efectivo para seleccionar elementos HTML en el documento.

Ejemplo

var x = document.querySelectorAll("div");

Prueba a ver‹/›

Este ejemplo devuelve los elementos con“note”Todos los de la clase del documento<div>Lista de elementos:

Ejemplo

var x = document.querySelectorAll("div.note");

Prueba a ver‹/›

Para encontrar elementos HTML mediante conjuntos de objetos HTML

El elemento más alto del documento HTML se puede usar directamente como atributo del documento.

Por ejemplo, se puede usar la propiedad para acceder<html>Elementodocument.documentElement。

ElLos componentes pueden ser accedidosdocument.bodyPropiedad.

Ejemplo

var html = document.documentElement;
var body = document.body;

Prueba a ver‹/›

Nota:Sidocument.bodyEnAntes de la etiqueta (por ejemplo, enDentro de <head>），它将返回null而不是body元素。

También se puede acceder a los siguientes objetos HTML (y conjuntos de objetos):

Propiedad	Descripción
document.anchors	Retorna todos los elementos que tienen una propiedad de nombre<a>Elemento
document.applets	Retornar todos<applet>Elemento（在HTML5（已弃用）
document.baseURI	Retorna la URI de base absoluta del documento
document.body	RetornarElemento
document.cookie	Retorna las cookies del documento
document.doctype	Retorna el tipo de documento del documento
document.documentElement	Retornar<html>Elemento
document.documentMode	Retorna el modo utilizado por el navegador
document.documentURI	Retorna la URI del documento
document.domain	Retornar el nombre de dominio del servidor del documento
document.domConfig	Abandonado;Retornar la configuración de DOM
document.embeds	Retornar todos<embed>Elemento
document.forms	Retornar todos<form>Elemento
document.head	Retornar<head>Elemento
document.images	Retornar todos<img>Elemento
document.implementation	Retornar la implementación de DOM
document.inputEncoding	Retornar la codificación del documento (conjunto de caracteres)
document.lastModified	Retornar la fecha y hora de actualización del documento
document.links	Retornar todos los que tienen atributo href<area>y<a>Elemento
document.readyState	Retornar el estado (cargando) del documento
document.referrer	Retornar la URI del referente (documento de enlace)
document.scripts	Retornar todos<script>Elemento
document.strictErrorChecking	Retornar si se debe ejecutar la verificación de errores en fuerza
document.title	Retornar<title>Elemento
document.URL	Retornar la URL completa del documento

Cambio de contenido HTML de JS DOM Métodos de JS HTML DOM