Tutorial básico do JavaScript

Objeto do JavaScript

Função do JavaScript

DOM HTML JS

BOM do navegador JS

Tutorial básico do AJAX

Manual de referência do JavaScript

Alterar conteúdo HTML com JS DOM Métodos JS HTML DOM

Seletores JS HTML DOM

JavaScript é mais frequentemente usado para obter ou modificar o conteúdo ou valor de elementos HTML e aplicar alguns efeitos.

Para isso, você deve primeiro encontrar o elemento. Existem várias maneiras de fazer isso:

Para encontrar elementos HTML por ID
Para encontrar elementos HTML por nome de tag
Procurar elementos HTML por meio do nome da classe
Procurar elementos HTML por meio de seletores CSS
Procurar elementos HTML por meio de coleções de objetos HTML

Para encontrar elementos HTML por ID

Você pode usargetElementById()O método seleciona elementos com base no ID único do elemento.

Este é o método mais simples de encontrar elementos HTML na árvore DOM.

A seguir, um exemplo de seleção de um elemento com atributo IDid="msg"dos elementos:

Exemplo

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

Teste para ver‹/›

Se o elemento for encontrado, este método retornará o elemento como um objeto.

Se o elemento não for encontrado, myElement conterá null.

Para encontrar elementos HTML por nome de tag

Você também pode usargetElementsByTagName()O método seleciona elementos HTML por nome de marcação.

Este método retorna uma lista semelhante a um array de todos os elementos do documento com o nome de tag especificado.

Neste exemplo, escolheu-se todos<p>Elemento:

Exemplo

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

Teste para ver‹/›

Mudar a cor de fundo de todos os elementos de parágrafo no documento:

Exemplo

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

Teste para ver‹/›

Neste exemplo, escolheu-seid="wrapper"dos elementos, em seguida, selecione“wrapper”todos os<p>Elemento:

Exemplo

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

Teste para ver‹/›

Procurar elementos HTML por meio do nome da classe

Você pode usar ogetElementsByClassName()Método para selecionar todos os elementos com um nome de classe específico.

Este método retorna uma lista semelhante a um array de todos os elementos que têm o nome da classe especificado no documento.

Este exemplo retorna todos os elementos comclass="demo"Lista de elementos:

Exemplo

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

Teste para ver‹/›

Procurar elementos HTML por meio de seletores CSS

Você pode usar oquerySelectorAll()Método para selecionar elementos que correspondem ao seletor CSS especificado (ID, classe, tipo, etc.).

Este método retorna uma lista semelhante a um array de todos os elementos que correspondem ao seletor especificado.

Os seletores CSS fornecem um método muito poderoso e eficaz para selecionar elementos HTML dentro do documento.

Exemplo

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

Teste para ver‹/›

Este exemplo retorna os elementos com“ note”todos os documentos de classe<div>Lista de elementos:

Exemplo

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

Teste para ver‹/›

Procurar elementos HTML por meio de coleções de objetos HTML

O elemento mais alto do documento HTML pode ser usado diretamente como atributo do documento.

Por exemplo, você pode usar o atributo para acessar<html>Elementodocument.documentElement。

referidoO componente pode ser acessadodocument.bodyAtributo.

Exemplo

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

Teste para ver‹/›

Anotação:sedocument.bodyemantes do marcador (por exemplo, emdentro de <head>），ele retornará null em vez do elemento body.

Você também pode acessar os seguintes objetos HTML (e coleções de objetos):

Atributo	Descrição
document.anchors	Retorna todos os elementos com atributo de nome<a>Elemento
document.applets	Retornar todos<applet>Elemento（在HTML5（已弃用）
document.baseURI	Retorna o URI básico absoluto do documento
document.body	RetornarElemento
document.cookie	Retorna os cookies do documento
document.doctype	Retorna o tipo de documento do documento
document.documentElement	Retornar<html>Elemento
document.documentMode	Retorna o modo utilizado pelo navegador
document.documentURI	Retorna o URI do documento
document.domain	Retornar o domínio do servidor do documento
document.domConfig	Descontinuado;Retornar a configuração 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 a implementação DOM
document.inputEncoding	Retornar a codificação do documento (conjunto de caracteres)
document.lastModified	Retornar a data e hora de atualização do documento
document.links	Retornar todos os que têm o atributo href<area>e<a>Elemento
document.readyState	Retornar o estado (carregando) do documento
document.referrer	Retornar o URI do referenciador (documento de link)
document.scripts	Retornar todos<script>Elemento
document.strictErrorChecking	Retornar se a verificação de erro for forçada
document.title	Retornar<title>Elemento
document.URL	Retornar a URL completa do documento

Alterar conteúdo HTML com JS DOM Métodos JS HTML DOM