1.DOM: Modelo de objeto Document DOM (modelo de objeto de documento) define métodos padrão para acessar e processar documentos HTML. DOM renderiza documentos HTML como uma estrutura de árvore (árvore do nó) com elementos, atributos e texto.
2. Algumas propriedades comumente usadas de DOM
2.1 Obter elementos por id
(1) Sintaxe:
A cópia do código é a seguinte:
document.getElementById ("id");
(2) Função: ID refere -se ao cartão de identificação de uma pessoa. Podemos encontrar a tag procurando o ID da tag e, em seguida, executar operações correspondentes.
(3) Nota: não se esqueça de escrever um documento!
2.2 Atributos Innerhtml
(1) Sintaxe:
A cópia do código é a seguinte:
Obgect.innerhtml = "Hello World"
(2) função: principalmente para obter ou substituir o conteúdo na tag
(3) Exemplo:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> innerhtml </title>
</head>
<Body>
<h2 id = "con"> javascript </h2>
<p> JavaScript é uma linguagem de script simples baseada em objetos e eventos orientados. Ele está incorporado aos documentos HTML e é interpretado e executado pelo navegador, criando um efeito de exibição dinâmica na página da Web e implementando funções de interação do usuário. </p>
<script type = "text/javascript">
var mychar = document.getElementById ("con");
document.write ("título original:"+mychar.innerhtml+"<br>"); // emitir o conteúdo original da tag H2
mychar.innerhtml = "Hello World!";
document.write ("Título modificado:"+mychar.innerhtml); // emitir o conteúdo de tag H2 modificado
</script>
</body>
</html>
(4) Nota: Objeto é o objeto elemento obtido, como o elemento obtido através do documento.getElementById ("ID").
2.3 Alterar o estilo HTML
(1) Sintaxe:
A cópia do código é a seguinte:
Object.style.property
(2) Função: Usado para modificar o estilo HTML
(3) Exemplo:
A cópia do código é a seguinte:
<Body>
<h2 id = "con"> eu amo javascript </h2>
<p> O JavaScript permite que as páginas da Web exibam efeitos dinâmicos e implemem funções de interação do usuário. </p>
<script type = "text/javascript">
var mychar = document.getElementById ("con");
mychar.style.color = "vermelho";
mychar.style.backgroundColor = "#ccc";
mychar.style.width = "300px";
</script>
</body>
(4) Nota: A propriedade possui muitos estilos, como cor, altura, etc., que podem ser modificados usando esse método. Não se esqueça de adicionar um semicolon às propriedades depois delas.
2.4 Mostrar e ocultar (atributo de exibição)
(1) Sintaxe:
Object.style.display = value
(2) Função: Exibir e ocultação são frequentemente vistos nas páginas da web, que são alcançadas usando o atributo de exibição.
(3) Exemplo:
A cópia do código é a seguinte:
<script type = "text/javascript">
função hiddentext ()
{
var mychar = document.getElementById ("con");
mychar.style.display = "nenhum";
}
função showText ()
{
var mychar = document.getElementById ("con");
mychar.style.display = "bloco";
}
</script>
(4) NOTA: O valor do valor é nenhum e bloco, onde nenhum não é exibido e o bloco é exibido.
2.5 ClassName Atributo
(1) Sintaxe:
A cópia do código é a seguinte:
Object.ClassName = ClassName
(2) função: 1. Obtenha o atributo de classe do elemento; 2. Especifique um estilo CSS para um elemento na página da web alterar a aparência do elemento.
(3) Exemplo:
A cópia do código é a seguinte:
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<title> ClassName Attribute </title>
<estilo>
corpo {tamanho da fonte: 16px;}
.um{
borda: 1px sólido #eee;
Largura: 230px;
Altura: 50px;
Antecedentes: #ccc;
Cor: vermelho;
}
.dois{
borda: 1px sólido #ccc;
Largura: 230px;
Altura: 50px;
Antecedentes:#9CF;
Cor: azul;
}
</style>
</head>
<Body>
<p id = "p1"> javascript permite que as páginas da web exibam efeitos dinâmicos e implementos funções de interação do usuário. </p>
<input type = "button" value = "adicionar estilo" onclick = "add ()"/>
<p id = "p2"> javascript permite que as páginas da web exibam efeitos dinâmicos e implementos funções de interação do usuário. </p>
<input type = "button" value = "altere aparência" onclick = "modify ()"/>
<script type = "text/javascript">
função add () {
var p1 = document.getElementById ("p1");
p1.className = "One";
}
função modify () {
var p2 = document.getElementById ("p2");
p2.className = "dois";
}
</script>
</body>
O exposto acima é tudo sobre este artigo, espero que gostem.