Resumo dos métodos de operação do nó DOM JavaScript

Existem três tipos principais de nós: nós de elemento, nós de atributo e nós de texto.

A principal coisa sobre o DOM é adicionar, excluir, modificar e verificar nós do elemento e nós de atributo. A seguir, apresentará as operações nos nós do elemento e as operações nos nós de atributo, respectivamente.

Nó do elemento

verificar

Antes de adicionar, excluir e modificar o DOM, você deve primeiro encontrar o elemento correspondente. Os métodos de pesquisa específicos são os seguintes:

 getElementById () // Obtenha um único nó getElementsByTagName () // Obtenha o node Node NodeList GetElementsByName () // Get the Node Array NodeList

Ao mesmo tempo, você também pode usar os atributos do nó do elemento para obter seus nós e nós de pais e filhos:

Nós para crianças

 Node.ChildNodes // Obtenha a lista de nó da criança NodElist; Observe que as quebras de linha são contadas como nós de texto no navegador. Se você obtiver a lista de nós dessa maneira, a filtragem será necessária Node.FirstChild // Retorne o primeiro nó filho do nó.lastChild // Retorne o último nó filho

Nó pai

 Node.parentnode // Retorna o nó dos pais Node.ownerdocument // Retorna o nó ancestral (o documento inteiro)

Nós compatriotos

 Node.previoussibling // retorna o nó anterior, se não, retorne nullnode.nextsibling // retorna o próximo nó

aumentar

Para adicionar um novo nó, você deve primeiro criar um nó e, em seguida, inserir o nó recém -criado no DOM. Portanto, a seguir, os métodos de criação de nós e inserção de nós, e o método de replicação de nós também é introduzido na criação de nós.

Crie um nó

 createElement () // Crie um novo nó de elemento de acordo com o nome da tag especificado

Crie trechos de código (para evitar atualização frequente do DOM, você pode criar trechos de código primeiro e depois adicioná -los ao DOM após concluir todas as operações de nó)

 CreateDocumentFragment ()

Nó de replicação

 CLONENDNODE = Node.CloneNode (booleano) // Há apenas um parâmetro, passa em um valor booleano, true significa copiar todos os nós filhos no nó; Falso significa copiar apenas o nó

Insira o nó

 /*Inserir node*/parentnode.appendChild (ChildNode); // Anexe um novo nó ao final da lista infantil da lista parentenode.insertBefore (newNode, TargetNode); // Insira o newNode no TargetNode/*Insira o código html*/node.insertadjacenthtml ('Antes dobegin', html); // insira o código node.insertadjacenthtml ('Afterbegin', html); // insira o código node.insertadjacenthtml ('Afterbegin', html); // insira o código node.insertadjacenthtml ('antes end', html); // Insira o código após o último elemento filho do elemento node.insertadjacenthtml ('Afterend', html); // Insira o código após o elemento

Substitua nós

 parentnode.replace (newNode, TargetNode); // Substitua o TargetNode pelo newNode

excluir

Remova nós

 parentnode.removeChild (ChildNode); // Remova o nó de destino node.parentnode.removeChild (nó); // Use sem saber o nó pai

Nó do atributo

Os nós do atributo de operação são para adicionar, excluir, modificar e verificar os estilos DOM. Existem diferentes métodos operacionais para estilos em linha, estilos embutidos e estilos externos; Os estilos obtidos por vários métodos também são divididos em legíveis, graváveis e somente leitura.

Obtenha estilos CSS diretamente

 node.style.color //

As propriedades e métodos de estilo em si

 node.style.csStext // Obtenha o nó em linha embutida string node.style.length // Obtenha o número de estilos embutidos node.style.item (0) // Obtenha o estilo na posição especificada

Obtenha e modifique os estilos de elementos

O HTML5 fornece um novo atributo para elementos: ClassList para implementar a adição, exclusão, modificação e pesquisa de folhas de estilo de elemento. A operação é a seguinte:

 node.classList.add (valor); // Adicione o node de classe especificado.classList.contains (valor); // Determine se o elemento contém a classe especificada. Se houver um truenode.classList.remove (valor); // excluir o node de classe especificado.classList.toggle (valor); // Exclua se houver uma determinada classe e adicione a classe especificada se não houver.

Métodos para modificar as características do DOM

 Node.getAttribute ('id') // get node.setAttribute ('id') // Definir node.removeattribute () // remover node.attributes // Get todos os recursos dom

Método somente leitura

getComputedStyle é o método da janela. Ele pode obter todos os valores de atributo CSS usados finais do elemento atual, mas são somente leitura. Possui dois parâmetros, o primeiro é o nó de entrada, o segundo pode passar: Passe o mouse,: Blur, etc. Para obter seu estilo de pseudo-classe e, se não, o NULL será passado.

No entanto, o IE não suporta o método getComputedStyle, e o CurrentStyle pode ser usado para manter a compatibilidade:

 window.getComputedStyle? window.getComputedStyle (nó, nulo): node.currentStyle

O resumo acima dos métodos de operação do nó DOM JavaScript é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.