Tip:
Highlight text to annotate it
X
Nesta aula nós vamos trabalhar com a DOM core api, Api para a manipulação de documentos
baseados em html ou xml
que é independente de liguagem de programação
é esta api que vamos utilizar para manipular esses elementos
dentro do nosso documento, e o primeiro passo para trabalhar com a DOM core api
é saber navegar pela árvore do nosso documento
então aqui nós temos uma página html
que está sendo rendenizada a partir desse código html
e aqui nós podemos ver o texto árvore
dentro de uma tag de título
nós podemos ver aqui uma lista
renderizada com a tag e cada item da lista com a tag
esses elementos,
compõem os nos da nossa árvore
nós temos quatro tipos principais de Nós dentro da nossa árvore
Nós temos o Nó documento representado aqui como documento html como um todo
nós temos aqui os Nós elemento
que aqui no nosso documento é representado pelas nossas tags
nós temos Nós no tipo atributo
então atributo type, atributo id
são Nós dentro do nosso documento
e nós temos também os Nós do tipo texto
então árvore é um Nó do tipo texto
core api é um Nó do tipo texto
primeiro é um Nó do tipo texto
e quando nós estamos trabalhando aqui com a nossa core api
nós costumamos referênciar os nossos elementos
como se tivessemos referêciando itens dentro de uma árvore genealógica
então em vários lugares vocês provavelmente vão encontrar
uma árvore de documento xml sendo
representada desta maneira aqui
que é a representação em forma de árvore genealógica
porque árvore genealógica?
porque um elemento pode ser filho do outro
pode ser pai de outro, pode ser irmão de outro
então o nosso documneto ele tem como filhos os elementos e o elemento
olha aqui, e são filhos de document
e o elemento
e são filhos de
e é pai de e pai de
e e são irmãos
então para navegar na árvore de um
documento html ou xml utilizando a core api
nós precisamos saber se um elemento é filho de outro
ou é irmão, ou é pai
nessa representação de árvore aqui
nós estamos vendo exatamente a estrutura desse nosso documento html
e vejam aqui que
é apresentado aqui como elemento
ou um Nó da nossa árvore
e ávore aqui é um outro Nó
é um Nó do tipo texto, então é por isso
que nós estamos apresentando aqui com cores diferentes cada um dos Nós
eu tenho o Nó documento
eu tenho o Nó elemento,
eu tenho o Nó texto
e temos ainda os Nós do tipo atributo
esses são os pricipais conceitos que a gente vai ter que ter em mente
quando a gente estiver trabalhando aqui com a DOM core api
então esta aula vai ser
focada em aprender como navegar por esta árvore
como acessar cada um dos elementos
então aqui pessoal
nós já estamos acessando um elemento
que é o elemento divm como é que nós estamos acessando esse elemento? isso aqui vocês já aprenderam em outras aulas
document.get.elementsbytagname
me retorna uma lista de todas as tags
com esse nome e eu estou recuperando aqui
o primeiro item dessa nossa lista
então o primeio item da lista de divs é esta div aqui, esse elemento
se a gente alertar (alert) esse elemento
nós vamos ver aqui
uma representação da html div element
isso aqui nós já vimos na aula passada
como é que nós fazemos para começar a navegar por esta
árvore de elementos aqui do nosso documento?
primeiro passo é a gente saber aqui os termos em inglês
para cada um dos elementos
então, esse aqui é o nosso elemento, se eu quiser acessa o elemento pai
eu vou chamar pelo nome parent
o termo em inglês para pai
se eu quiser acessar um filho desse elemento eu vou acessar child, que é o filho de elemento
se nós quisermos acessar o irmão de um elemento vou utilizar sibling
traduzindo para o inglês é irmão
então vamos começar aqui a nossa aula
vamos acessar aqui primeiro o pai desse elemento
então aqui nós estamos acessando o nosso elemento
e o pai desse elemento
nós vamos acessar com a palavra parent, parent node
porque é o Nó pai do elemento
vamos ver aqui
então aqui temos o próprio elemento
e aqui o pai do elemento
que é o elemento
e como é que nós acessamos os filhos do elemento? então esse aqui é o pai
e os filhos?
nós acessamos com o atributo childNodes, porque nodes?
pai é só um, então eu vou retornar um Nó apenas
agora filhos, eu posso ter vários filhos
então por isso termina aqui com nodes, no plural
então vamos ver aqui, vou comentar aqui essas duas primeiras linhas
e está ai, retornando uma lista de filhos aqui
do nosso elemento div
então como é que nós acessamos o primeiro elemento, ou seja
o primeiro filho aqui dessa div?
vou recuperar aqui o primeiro filho da div
o unico na verdade, é o elemento ul
como vocês podem ver aqui
então para recuperar a ul div childNodes.Item
ponto item na posição zero
primeiro item do nosso array
e aqui nós podemos apresentar este elemento
então está ai, é uma ul
cada um desses elementos
esse aqui é o primeiro filho, é a nossa ul
agora cada um desses elementos aqui
nós temos aqui, alguns atributos
então ul.nodename vai retornar para gente o nome dessa tag
que é ul
então esse elemento aqui o nome dele é ul
e nós também podemos encontrar
o tipo de Nó
node type
que é retornardo como número
1 representa aqui elemento
2 representa atributo
e número 3 representa elemento do tipo texto
aliás elementos não, Nós do tipo texto
então é o tipo de Nó.
outra coisa essa nossa ul, ela tem aqui três filhos
vocês já aprenderam como é que nós recuperamos os filhos de um elemento
vamos ver aqui
ul.childNodes eu recupero os filhos desse elemento
está ai, tenho uma lista de nós filhos
quantos filhos nós temos dentro dessa ul?
1, 2, 3 então vamos ver aqui
.length para ele trazer a quantidade de itens
está ai três itens
como é que eu faço para pegar o primeiro item desta lista?
item 0
então tá ai, pegou um elemento do tipo li
mas tem outras formas aqui de recuperar os filhos desse elemento, eu posso recuperar por exemplo o primeiro elemento
o primeiro elemento aqui, o primeiro filho de ul, eu poderia
recuperar direto aqui como firstChild
ai está pegando a primeira li
da nossa ul, que é exatamanete essa li aqui
e se eu quisesse pegar a ultima li?
ai nós teríamos
a nossa lastChild
seria a nossa ultima li
então dessa forma eu consigo navegar aqui pelos filhos de um elemento
seja recuperando a lista completa de filhos
ou acessando aqui o ultimo filho
ou o primeiro filho de um elemento
então vamos navegar aqui até encontrar esse primeiro texto
esse aqui é um elemento de texto
nós estamos aqui na nossa ul
então estamos dentro da nossa ul
quero acessar a primeira li da nossa ul
.firstChild, primeiro filho
quero agora acessar o primeiro filho novamente que é o elemento de texto
.firstChild
e ele vai retornar aqui para gente, aquele elemento que é um Nó do tipo texto
aqui objeto texto
e como é que eu faço para pegar o valor desse Nó?
.nodeValue, eu recupero o valor desse Nó
então veja ai
em um Nó do tipo texto nós também conseguimos recuperar esses atributos aqui
nodeName
vai retornar aqui cerquilha text
para sempre que ele encontrar elemento do tipo texto
e o nosso node type que retorna uma representação em número do tipo do Nó
está ai representação 3 como eu falei pra vocês, três representa nós do tipo texto
e nodeValue
para recuperar o valor do nosso Nó
alguns Nós não aceitam outros Nós
então por exemplo, o Nó do tipo texto não aceita outro Nó dentro dele
só aceita valor
agora nós do tipo elemento aceitam outros elementos dentro dele
então a div aceita esse elemento dentro dele
a ul aceita outro elemento dentro dele, então
se eu tentar acessa o nodeValue
de um elemento que aceita outros elementos dentro dele
então vamos lá, recuperar o nodeValue
dessa li aqui
vamos ver o que vai acontecer, ele traz null para a gente
então ele só vai trazer valor se
eu estiver acessando aqui node value em um Nó do tipo texto
ou em um atributo
só nessas duas situações que eles vão está trazendo para gente de volta o valor do Nó
agora vamos trabalhar aqui
visualizando como acessar elementos irmãos em um documento
vamos primeiro localizar aqui esse elemento, item 1.2
essa li, como é que a gente acessaria essa li?
então vamos lá li
é igual, primeiro, já estamos dentro da ul
vamos acessar ul, essa li está nesse caminho, na primeira li, então vamos lá
firstChild
para acessar essa primeira li
lastChild, então essa ul aqui onde está essa li
é o ultimo elemento olha,
firstChild o segundo filho, e o ultimo filho o lastChild, que é essa ul
então .lastChild
ponto, esse aqui é o filho na posição número dois então
childNodes
na posição um, porque o numero começa de 0, 1, 2
então essa aqui é a nossa li que contem o Nó de texto
com o valor item 1.2. Vamos ver se é isso mesmo?
então eu vou alert aqui
a nossa li firstChild
para pegar o primeiro filho dele que é um modo tipo texto
.nodeValue para
para imprimir o texto desse Nó
então vamos ver aqui, é isso dai mesmo 1.2
então esta li é a nossa li que contem texto
que tem 1.2
como é que nós fazemos então para acessar um irmão que está antes dele?
a gente acessa esse irmão com a palavra que a gente já aprendeu sibling
então nós temos o "privios" sibling para poder acessar o irmão anterior
então vamos lá
alert e eu quero acessar aqui o irmão anterior dessa li
então "previos"
sibling.
então já acessei sei irmão anterior
firstChild
nodeValue, li.previosSibling.firstChild.nodeValue para pegarmos o valor do Nó de texto desse cara
então tá ai 1.1
perfeito pegamos um irmão anterior a ele
e o irmão posterior?
nextSibling
está ai o irmão posterior, pegamos com nextSibling
então é assim pessoal, que a gente navega ai pela árvore de documentos
utilizando essa DOM api
agora como ultimo exercício a gente poderia
localizar este elemento aqui item 1.3.1
na nossa árvore a partir da nossa div, que a gente já recuperou
lá em cima, como é que fariamos isso?
então vamos procurar ela aqui
alert então div
.first child
a gente pega a ul, o firstChild para pegar primeiro li
lastChild para pegar a ul
lastChild
pegamos aqui a lastChild aqui novamente
para pegar a li, lastChild
agora podemos pegar o ultimo elemento novamente
porque o primeiro é um item de texto
lastChild
firstChild e firstChild, vamos ver
firstChild
firstChild
nodeValue
espero que dê certo
1.3.1
perfeito!
percebam o seguinte pessoal
para gente cometer um erro acessando o elemento dessa forma aqui
é fácil a gente cometer erros
então é melhor que a gente acesse os elementos de maneira fracionada
a gente use com cautela ai
essa nossa DOM core api
na próxima aula nós vamos trabalhar criando elementos
e alterando os elementos dentro da nossa árvore
agora que a gente já sabe como navegar na árvore
fica fácil a gente manipular os elementos
vejo vocês na próxima aula!