declaração! ! , este artigo é uma reimpressão do artigo de outra pessoa, porque foi usado e pareceu muito prático, então o peguei para uso futuro! !
Obrigado ao autor original! ! ! ,
No desenvolvimento de aplicações Web, especialmente programas Web 2.0, muitas vezes é necessário obter um elemento na página e depois atualizar o estilo, conteúdo, etc. Como obter os elementos a serem atualizados é o primeiro problema a ser resolvido. Felizmente, existem muitas maneiras de obter nós usando JavaScript. Aqui está um breve resumo (o método a seguir foi testado no IE7 e no Firefox2.0.0.11):
1. Obtenha por meio do nó do documento de nível superior:
(1) document.getElementById(elementId): Este método pode obter com precisão o elemento necessário através do ID do nó. É um método relativamente simples e rápido. Se a página contiver vários nós com o mesmo ID, apenas o primeiro nó será retornado.
Hoje em dia, existem muitas bibliotecas JavaScript, como protótipo e Mootools, que fornecem um método mais simples: $(id), e o parâmetro ainda é o id do nó. Este método pode ser considerado outra forma de escrever document.getElementById(), mas a função de $() é mais poderosa. Para uso específico, consulte seus respectivos documentos de API.
(2) document.getElementsByName(elementName): Este método obtém o nó pelo seu nome. Como pode ser visto pelo nome, este método não retorna um elemento de nó, mas uma matriz de nós com o mesmo nome. Então, podemos percorrer um determinado atributo do nó para determinar se é o nó necessário.
Por exemplo: Em HTML, checkbox e radio usam o mesmo valor de atributo name para identificar elementos dentro de um grupo. Se quisermos obter o elemento selecionado agora, primeiro obteremos o elemento embaralhado e, em seguida, faremos um loop para determinar se o valor do atributo verificado do nó é verdadeiro.
(3) document.getElementsByTagName(tagName): Este método obtém o nó através de seu Tag. Este método também retorna um array. Por exemplo: document.getElementsByTagName('A') retornará todos os nós de hiperlink da página. Antes de obter o nó, o tipo de nó é geralmente conhecido, por isso é relativamente simples usar este método. Mas a desvantagem também é óbvia, ou seja, o array retornado pode ser muito grande, o que desperdiçará muito tempo. Então, esse método é inútil? Claro que não. Este método é diferente dos dois acima. Não é um método proprietário do nó do documento e também pode ser aplicado a outros nós, que serão mencionados a seguir.
2. Obtenha através do nó pai:
(1) parentObj.firstChild: Este método pode ser usado se o nó for o primeiro nó filho de um nó conhecido (parentObj). Este atributo pode ser utilizado de forma recursiva, ou seja, suporta a forma parentObj.firstChild.firstChild.firstChild..., para que nós mais profundos possam ser obtidos.
(2) parentObj.lastChild: Obviamente, este atributo serve para obter o último nó filho do nó conhecido (parentObj). Assim como firstChild, também pode ser usado recursivamente.
Em uso, se combinarmos os dois, obteremos resultados mais interessantes, a saber: parentObj.firstChild.lastChild.lastChild...
(3) parentObj.childNodes: Obtenha a matriz de nós filhos de um nó conhecido e, em seguida, encontre o nó necessário por meio de loop ou indexação.
Nota: Após o teste, descobriu-se que no IE7 o que se obtém é o array de nós filhos diretos, enquanto no Firefox2.0.0.11 o que se obtém são todos os nós filhos, incluindo os nós filhos do nó filho.
(4) parentObj.children: Obtenha a matriz de nós filhos diretos de um nó conhecido.
Nota: Após o teste, no IE7, o efeito é o mesmo de childNodes, mas o Firefox2.0.0.11 não oferece suporte. É por isso que uso um estilo diferente de outros métodos. Portanto seu uso não é recomendado.
(5) parentObj.getElementsByTagName(tagName): O método de uso não será descrito em detalhes. Ele retorna uma matriz de nós filhos do valor especificado entre todos os nós filhos do nó conhecido. Por exemplo: parentObj.getElementsByTagName('A') retorna todos os hiperlinks em nós filhos conhecidos.
3. Obtenha de nós adjacentes:
(1) vizinhoNode.previousSibling: obtém o nó anterior do nó conhecido (neighbourNode). Este atributo parece ser usado recursivamente como o firstChild e lastChild anteriores.
(2) vizinhoNode.nextSibling: obtém o próximo nó do nó conhecido (neighbourNode), também suporta recursão.
4. Obtenha por meio de nós filhos:
(1) childNode.parentNode: Obtenha o nó pai de um nó conhecido.
Os métodos mencionados acima são apenas alguns métodos básicos. Se você usar bibliotecas JavaScript como Prototype, também poderá obter outros métodos diferentes, como obter por meio da classe do nó, etc. No entanto, se você puder usar com flexibilidade os vários métodos acima, acredito que deverá ser capaz de lidar com a maioria dos programas.
Observe que este é um documento reproduzido: não é aconselhável obter o Node HTML através de firstChild e lastChild. Porque, dependendo do navegador, firstChild pode retornar o objeto de atributo parentObj.