Document Object Model , abreviado DOM, chinês:文档对象模型, é标准编程接口recomendada pela organização W3C para processamento de linguagens de marcação extensíveis.
DOM Tree refere-se à解析da página HTML por meio DOM e生成da树状结构HTML tree e访问方法correspondente. Com a ajuda da DOM Tree, podemos operar direta e简易cada conteúdo de marcação na página HTML, como o seguinte código HTML
<. html><head>
<title>Brincando com o Dom</title></head><body>
<p>Eu sou um nó Dom</p>
<p>
<p>p p</p>
</p></body></html> Abstraído na árvore DOM da seguinte forma: 
Depois de compreender o conhecimento acima, a seguir vou explicar a API a partir de quatro aspectos: como obter o DOM, como criar e adicionar o DOM, como modificar o DOM e como excluir o
DOM
existem muitas APIs para obter o DOM, mas são todas muito simples, vamos lá.
:
document.getElementById
("id name"
);
<p id="p">Eu sou o nó p</p>
<roteiro>
var p = document.getElementById("p");
console.log(p);
</script></body> 
Abra o console e você verá que obteve com sucesso
:
document.getElementsByTagName
("tag name"
);
<p>Eu sou o nó p</p>
<p>Eu também sou um nó p</p>
<roteiro>
var p = document.getElementsByTagName("p");
console.log(p);
for (seja i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
Nota : Use o método getElementsByTagName() para retornar uma coleção de objetos com nomes de tags especificados. Como o que é obtido é uma coleção de objetos, precisamos percorrer se quisermos operar os elementos dentro dela. método são dinâmicos de
:
document.getElementsByClassName
("nome daclasse
");
<p class="p">Eu sou o nó p</p>
<p class="p">Eu sou o nó p</p>
<roteiro>
var p = document.getElementsByClassName("p");
console.log(p);
for (seja i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
Isso também é muito simples, basta lembrar
a sintaxe [recomendada] por meio da nova API HTML5:
document.querySelector("Veja exemplos para detalhes"); document.querySelectorAll
("Veja exemplos para detalhes") ;
<p class="p">Eu sou o nó p</p>
<p class="name">Flor de pera</p>
<p id="info">Informações</p>
<roteiro>
// Obtém var pelo nome da tag p = document.querySelector("p");
// Obtém através do nome da classe, lembre-se de adicionar var qname = document.querySelector(".name");
// Obtém por id, lembre-se de adicionar #
var informações = document.querySelector("#info");
// Obtém todos os elementos correspondentes e retorna o array var all = document.querySelectorAll("p");
console.log(p);
console.log(qnome);
console.log(informações);
for (seja i = 0; i < all.length; i++) {
console.log(todos[i]);
}
</script></body> 
Como você pode ver, usar a nova API do HTML5 é muito flexível, então gosto muito de usar isso e recomendo que você use
Além disso, existem alguns elementos especiais que possuem seus próprios métodos de aquisição, como. como corpo, o elemento html
sintaxe
do
elemento:
document.body;
<roteiro>
var corpo = documento.corpo;
console.log(corpo);
</script></body> 
Como você pode ver, todo o conteúdo do elemento body foi obtido com sucesso.
:
document.documentElement
exemplo:
<body>;
<roteiro>
var html = document.documentElement;
console.log(html);
</script></body> 
,
a aquisição do DOM chegou ao fim. Agora vamos começar a criar e adicionar DOM dinamicamente
operar dom é o mesmo que brincar com dados, adicionar, excluir, modificar e verificar, e criar e adicionar é equivalente a adicionar dados, devemos primeiro ter os dados e depois adicioná-los. Operações DOM Primeiro, devemos criar o DOM e, em seguida, dizer onde adicioná-lo. Finalmente, vamos aprender a seguir como criar o DOM e como adicionar o DOM
. não tenha medo, haha
Sintaxe:
document.createElement("Nome
do Elemento");
você
p escrevê-lo assim. O mesmo vale para outras coisas. Aplicar inferências
var p = document.createElement("p") final
do elemento filho, um é anexado após o elemento filho especificado
node.appendChild
(
child);
<p>
<a href="">Baidu</a>
</p>
<roteiro>
var p = document.createElement("p");
p.innerText = "Eu sou p"
var p = document.querySelector("p");
p.appendChild(p);
</script></body> 
Crie dinamicamente a tag de parágrafo do elemento p e escreva o texto "Eu sou p". Finalmente, obtenha o elemento p e anexe p como um filho de p. Este método de acréscimo é anexado no final, então o efeito é mostrado na figura. acima.
Sintaxe:
node.insertBefore(child, elemento especificado
Exemplo:
<body>);
<p>
<a href="">Baidu</a>
<span>Eu sou o irmão mais novo, span</span>
</p>
<roteiro>
var p = document.createElement("p");
p.innerText = "Eu sou p"
var p = document.querySelector("p");
var a = document.querySelector("a");
//Cria p sob p, antes do elemento a p.insertBefore(p, a);
</script></body> 
Este é o fim? Sim, o que você acha? Não é muito simples? Basta praticar mais. OK, vamos para o próximo passo.
é resumida da seguinte forma:
Exemplo 1: Obtenha a tag p da página e altere o conteúdo para “Zhou Qiluo”
<body>
<p>
<p></p>
</p>
<roteiro>
var p = document.querySelector("p");
p.innerText = "Zhou Qiluo";
</script></body> Exemplo 2: Clique no botão para gerar um hiperlink do Baidu
<body>
<p>
<button onclick="createBaidu()">Clique para gerar o hiperlink do Baidu</button>
</p>
<roteiro>
função criarBaidu() {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = "Basta pesquisar no Baidu e você saberá";
p.append(a);
}
</script></body>
Exemplo 3: Clique no botão, a cor do texto na tag p fica verde e a cabeça do cachorro
<body>é alterada manualmente.
<p>
<button onclick="changeColor()">Clique para ficar verde</button>
<p>Vou ficar verde em um momento</p>
</p>
<roteiro>
function alterarCor() {
var p = document.querySelector("p");
p.style.color = "verde";
}
</script></body>
um
nó filho do DOM e retorna o nó excluído
:
node.removeChild
(child);
<p>
<button onclick="removeP()">Clique para remover p</button>
<p>Eu sou p, o tempo acabará em um momento</p>
</p>
<roteiro>
função removerP() {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(p);
}
</script></body>