Como começar rapidamente com VUE3.0: Insira o aprendizado
Recomendações relacionadas: Tutorial de JavaScript
1. Obtenhaelementos operacionais
O objeto de documento fornece alguns métodos para localizar elementos. com base em seu id, nome e classe. Obtenha o elemento de operação por meio de atributos e nomes de tags.
Resumo:
Exceto que o método document.getElementById() retorna o elemento com o id especificado, os outros métodos retornam uma coleção que atende aos requisitos. Para obter um dos objetos, você pode obtê-lo por subscrito, que começa em 0 por padrão.
O objeto document fornece algumas propriedades que podem ser utilizadas para obter elementos no documento. Por exemplo, obtenha todas as tags de formulário, tags de imagem, etc.
Observe que
os elementos de operação obtidos através dos métodos do objeto documento e as propriedades do objeto documento representam o mesmo objeto. Por exemplo, document.getElementsByTagName('body')[0] é congruente com document.body.
Os novos métodos de objeto de documento do HTML5
Para facilitar a obtenção de elementos para operação, o HTML5 adiciona dois novos métodos ao objeto de documento, a saber, querySelector() e querySelectorAll().
Como esses dois métodos são usados da mesma maneira, o método document.querySelector() a seguir usa como exemplo.
Nas operações DOM, os objetos elemento também fornecem métodos para obter elementos especificados dentro de um elemento. Os dois métodos comumente usados são getElementsByClassName() e getElementsByTagName(). Eles são usados da mesma forma que os métodos de mesmo nome no objeto de documento.
Além disso, o objeto element também fornece o atributo children para obter os elementos filhos do elemento especificado. Por exemplo, obtenha os elementos filhos de ul no exemplo acima.
Objeto HTMLCollection
A diferença entre os objetos HTMLCollection e NodeList:
Dica: Para a coleção retornada pelo método getElementsByClassName(), o método getElementsByTagName() e o atributo filho, id e nome podem ser convertidos automaticamente em um atributo.
2. Conteúdo do elemento
Em JavaScript, se você quiser operar no conteúdo do elemento obtido, poderá usar as propriedades e métodos fornecidos pelo DOM.
Dê um exemplo
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Operações de conteúdo de elemento</title>
</head>
<corpo>
<p id="caixa">
O primeiro parágrafo...
<p>
O segundo parágrafo...
<a href="http://www.example.com">terceiro</a>
</p>
</p>
<roteiro>
var box = document.getElementById('caixa');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</body>
</html> Observe que
podem ocorrer problemas de compatibilidade do navegador ao usar o atributo innerText. Portanto, é recomendado
usar innerHTML para obter ou definir o conteúdo de texto dos elementos tanto quanto possível durante o desenvolvimento. Ao mesmo tempo, existem certas diferenças entre o atributo innerHTML e o método document.write() na configuração do conteúdo. O primeiro atua no elemento especificado, enquanto o último reconstrói toda a página do documento HTML. Portanto, os leitores devem escolher o método de implementação apropriado de acordo com as necessidades reais durante o desenvolvimento
[Caso] Alteração do tamanho da caixa
Idéias para implementação de código :
① Escreva HTML e defina o tamanho de p.
② Conclua a alteração do tamanho da caixa de acordo com o número de cliques do usuário.
③ Quando o número de cliques é um número ímpar, a caixa fica maior; quando o número de cliques é um número par, a caixa fica menor;
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<estilo>
.box{largura:50px;altura:50px;fundo:#eee;margem:0 auto;}
</estilo>
</head>
<corpo>
<p id="box" class="box"></p>
<roteiro>
var box = document.getElementById('caixa');
var i = 0; // Salva o número de vezes que o usuário clica na caixa box.onclick = function() { // Manipula o evento de clique da caixa ++i;
if (i % 2) { // O número de cliques é ímpar e aumenta this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'grande';
} else { // O número de cliques é par e diminui this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'pequeno';
}
};
</script>
</body>
</html> 3. Atributos do elemento
No DOM, para facilitar o JavaScript a obter, modificar e percorrer os atributos relevantes do elemento HTML especificado, são fornecidos atributos e métodos de operação.
Você pode usar o atributo atributos para obter todos os atributos de um elemento HTML, bem como o número de todos os atributos e comprimento.
Dê um exemplo
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Operações de atributos de elementos</title>
<estilo>
.cinza{fundo: #CCC;}
#thick{peso da fonte: mais ousado;}
</estilo>
</head>
<corpo>
<p>palavra de teste.</p>
<roteiro>
// Obtém o elemento p var ele = document.getElementsByTagName('p')[0];
// ① Produz o número de atributos do elemento atual console.log('Número de atributos antes da operação: ' + ele.attributes.length);
// ② Adicione atributos a ele e verifique o número de atributos ele.setAttribute('align', 'center');
ele.setAttribute('título', 'Texto de teste');
ele.setAttribute('classe', 'cinza');
ele.setAttribute('id', 'espesso');
ele.setAttribute('estilo', 'tamanho da fonte:24px;borda:1px verde sólido;');
console.log('Número de atributos após adicionar atributos: ' + ele.attributes.length);
// ③ Obtenha o valor do atributo de estilo de ele console.log('Obter o valor do atributo de estilo:' + ele.getAttribute('style'));
// ④ Exclua o atributo de estilo de ele e verifique os atributos restantes ele.removeAttribute('style');
console.log('Ver todas as propriedades:');
for (var i = 0; i < ele.atributos.length; ++i) {
console.log(ele.atributos[i]);
}
</script>
</body>
</html> 4.
Revisão do estilo do elemento: Modifique o estilo através da operação dos atributos do elemento.
Sintaxe do estilo do elemento: estilo.Nome do atributo.
Requisito: você precisa remover o hífen "-" no nome do estilo CSS e colocar a segunda letra inicial em inglês em maiúscula.
Exemplo: Para definir a cor de fundo, background-color, precisa ser alterado para backgroundColor na operação do atributo de estilo.
Observe que
o estilo float em CSS entra em conflito com as palavras reservadas do JavaScript e diferentes navegadores têm soluções diferentes
. Por exemplo, IE9-11, Chrome e FireFox podem usar "float" e "cssFloat", o navegador Safari usa "float" e IE6 ~ 8 usam "styleFloat".
Descrição: Um elemento pode ter vários seletores de classe. Como operar a lista de seletores durante o desenvolvimento?
A solução original: use o atributo className do objeto elemento para obter o resultado. O resultado obtido é um tipo de caractere e, em seguida, processe a string de acordo com a situação real.
O método fornecido pelo HTML5: a lista do seletor de classes do novo elemento classList (somente leitura).
Por exemplo: Se o valor da classe de um elemento p for "título da lista de navegação do cabeçalho da caixa", como excluir o cabeçalho?
Solução HTML5: elemento p object.classList.toggle("header")
;
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Uso de classList</title>
<estilo>
.bg{plano de fundo:#ccc;}
.strong{tamanho da fonte:24px;cor:vermelho;}
.smooth{altura:30px;largura:120px;raio da borda:10px;}
</estilo>
</head>
<corpo>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Java</li>
</ul>
<script> // Obtenha o segundo elemento li var ele = document.getElementsByTagName('li')[1] // Se não houver nenhuma classe forte no elemento li, adicione if (!ele.classList.contains('strong ' )) { ele.classList.add('strong' }); // Se não houver classe suave no elemento li, adicione-a se for excluída, ele.classList.toggle('smooth'); log('Adicionar e mudar após estilo: '); console.log(ele);
<roteiro>
ele.classList.remove('bg');
console.log('Após exclusão:');
console.log(ele);
</script>
</body>
</html> Além disso, o atributo classList também fornece muitos outros métodos e propriedades de operação relacionados.
5. [Caso] Efeito de troca da barra de guias
Idéias para implementação de código :
① Escreva HTML para projetar a estrutura e o estilo da barra de guias, onde a classe é igual a atual para indicar a guia exibida no momento e o padrão é a primeira guia.
② Obtenha todas as tags e o conteúdo de exibição correspondente às tags.
③ Percorra e adicione um evento de mouse para cada rótulo Na função de processamento de eventos, percorra todo o conteúdo de exibição correspondente ao rótulo. Quando o mouse desliza sobre o rótulo, adicione corrente por meio do método add() de classList, caso contrário, use. O método remove() sai da corrente.
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Efeito de troca da barra de guias</title>
<estilo>
.tab-box{largura:383px;margem:10px;borda:1px sólido #ccc;border-top:2px sólido #206F96;}
.tab-head{altura:31px;}
.tab-head-p{largura:95px;altura:30px;float:esquerda;borda inferior:1px sólido #ccc;borda direita:1px sólido #ccc;fundo:#206F96;altura da linha:30px;texto- alinhar:centro;cursor:ponteiro;cor:#fff;}
.tab-head .current{fundo:#fff;border-bottom:1px sólido #fff;cor:#000;}
.tab-head-r{border-right:0;}
.tab-body-p{display:none;margem:20px 10px;}
.tab-body .current{display:block;}
</estilo>
</head>
<corpo>
<p class="tab-box">
<p class="tab-head">
<p class="tab-head-p current">Guia um</p>
<p class="tab-head-p">Guia 2</p>
<p class="tab-head-p">Guia três</p>
<p class="tab-head-p tab-head-r">Guia quatro</p>
</p>
<!--jkdjfk?-->
<p class="tab-body">
<p class="tab-body-p atual"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p"> 4 </p>
</p>
</p>
<roteiro>
// Obtém todos os objetos de elemento de guia da barra de guias var tabs = document.getElementsByClassName('tab-head-p');
// Obtém todos os objetos de conteúdo da barra de guias var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Percorre o objeto do elemento tabs[i].onmouseover = function() { // Adiciona um evento de mouseover ao objeto do elemento da tag for ( var i = 0; i < ps.length; ++i) { // Percorre o objeto do elemento de conteúdo da barra de guias if (tabs[i] == this) { // Exibe o elemento li ps[i] que o mouse atual deslizou .classList.add('current');
guias[i].classList.add('atual');
} else { // Ocultar outros elementos li ps[i].classList.remove('current');
guias[i].classList.remove('atual');
}
}
};
}
</script>
</body>
</html> Recomendações relacionadas: tutorial de javascript
O conteúdo acima é o conteúdo detalhado das operações de elementos HTML explicadas em detalhes por exemplos de JavaScript. Para obter mais informações, preste atenção a outros artigos relacionados no site php chinês!
