Este post explica a propriedade “previousElementSibling” do elemento HTML DOM usando JavaScript.
O que é a propriedade “previousElementSibling” do elemento HTML DOM?
O elemento DOM (Document Object Model) “ anteriorElementoIrmão ” é uma propriedade somente leitura que ajuda a recuperar o irmão anterior de um elemento na mesma árvore. Essa propriedade retorna o conteúdo do irmão anterior.
Sintaxe
elemento. anteriorElementoIrmão
Essa sintaxe retorna o “ corda ” contendo o conteúdo HTML do irmão anterior e “ nulo ” se não existir.
Vamos usar a sintaxe acima definida de forma prática para mostrar o funcionamento da propriedade “previousElementSibling”.
Exemplo: aplicando a propriedade “previousElementSibling” para retornar o conteúdo do irmão anterior
Este exemplo aplica a propriedade JavaScript “previousElementSibling” para obter o conteúdo HTML do irmão anterior.
Código HTML
Primeiro, uma visão geral do seguinte código HTML:
< ul >< que eu ia = 'primeiro' > HTML < / que >
< que eu ia = 'segundo' > CSS < / que >
< que eu ia = 'terceiro' > JavaScript < / que >
< / ul >
< p eu ia = 'para' >< / p >
Nas linhas de código acima:
- O '
- Dentro da lista não ordenada, vários itens são incorporados usando o “
” com seus IDs atribuídos. - Por último, o “ ” incorpora um parágrafo vazio com um id único “para”.
Código JavaScript
Agora, continue com o código JavaScript:
< roteiro >deixar item = documento. getElementById ( 'terceiro' ) . anteriorElementoIrmão . HTML interno ;
documento. getElementById ( 'para' ) . HTML interno = ' O irmão anterior do terceiro item é : ' + item ;
roteiro >
De acordo com o trecho de código acima:
- A variável “item” primeiro usa o “ getElementById() ” para acessar o item da lista de destino usando seu id “terceiro” e, em seguida, aplicar o método “ anteriorElementoIrmão ” para obter seu irmão anterior.
- Depois disso, o “ getElementById() ” acessa o parágrafo vazio adicionado usando seu id “para” para anexá-lo com o valor da variável “item”, ou seja, irmão anterior.
Saída
Como visto, o resultado mostra o irmão anterior do item de destino, ou seja, (JavaScript).
Conclusão
O JavaScript fornece o elemento DOM predefinido “ anteriorElementoIrmão ” para recuperar o irmão anterior de um elemento. Ele retorna o irmão anterior de um elemento do mesmo nível de árvore onde está o elemento de destino. Este post explicou profundamente a propriedade “previousElementSibling” do elemento HTML DOM em JavaScript.