- This topic has 5 replies, 3 voices, and was last updated 7 years, 5 months ago by
.
-
Posts
-
Hi!,
I really don´t get the difference between parentNode and parentElement
It seems to do the same thing, right? but i can imagine that technically they do something different?
tx, Bruno.
You’re absolutely right Bruno.
In the case of both Text Nodes and Element Nodes, you would only find them inside of other Element Nodes. For this reason getting the parent of any type and the parent element node will always provide the same results.
There may be some edge cases of different node types having different behaviors (I wouldn’t be surprised) but for these two node types on a page it is the case.
Good question
I’m also interested in this section. but for a different reason. Zac said to find a site and start traversing the DOM. So i chose the one linked at the bottom of the video DOM Enlightenment Site
it has alot of information in it and a table of contents with an id=”toc”.
So I used
content = document.querySelector( ‘#toc’ );Then I did this to get the number of children
contentChildrenEls = content.children
HTMLCollection[130]I then decided to get the first child with this
contentFirstChildNode = content.firstChildThat works fine but I wonder about how I make any sense of all of this. I mean firstly, how do I grab the second child? Next, how do I know there even is a second child? aside from the children property which tells me there are 130.
and what use is this to me anyway? I guess I’m looking at this from outside. If I was the web page developer I would know what my html structure looked like. is that fair to say? in which case I’d be traversing a DOM that I built.
Am I on the right track?
Thanks.
john.
You are doing exactly the right thing!!!
There are instances when this type of skill comes in handy. For example, in the sidebar of the site students requested that the navigation toggle open and closed. To know when you click on a link what it’s parent is and how many children it has can be very helpful and necessary. I understand though if the concept seems a little abstract for the moment.
For selecting a second child you would get the array of all children and then use array[x] to get the specific child you needed. Or you could get the first child and then the next sibling of that one.
Again, this may seem like a silly or not helpful exercise, but as a front end dev there will absolutely be a time when buying complex UIs and interaction where you will need to get parents several levels up and work with children and siblings 🙂
Hope that helps and awesome work following along with the suggested exercises!!!
Hi Zac,
I just reviewed the video again and it was good to reconsider the lesson for reinforcement.
this time I thought I would experiment with the example page for 1.3.3.2 by addressing elements within and then drilling down further. an example being ‘div’.
I if do this I get an array of 3 elements
div1 = document.getElementsByTagName ( ‘div’ );
and if I console.log the 2nd element out (console.log ( div1[1] ) 😉 I see: div id=”contact”>
but if I try to set view an element within this 2nd element I error.
ie: console.log (div1[1].getSelector( ‘p’ ) );
In fact, a clue that I am going wrong is that the auto complete text does not make suggestions. even if I console.log (div1……..)
Does anyone know what I am doing wrong?
Thanks,
John.
Hi John!
The problem might be that you’re using getSelector, which is not a real method. Maybe querySelector is what you meant and should work.
Also remember JS is zero indexed so the first element in an array is atray[0] rather than array[1]
Hope that helps a bit and great job practicing everything!!!
- You must be logged in to reply to this topic.