DOM - getElement

This is one of my own "crib" pages for understanding the DOM - please do not interprete this as a definative source.

In December 2019 I was trying to do something else with the formatting of my menus - Since that time I have done more work with the DOM and I have been selecting elements by id

This page was my first and it is a little too general. The accordian manipulation selects ByClassName and adds an evemtlistener (far more complex!)

As I say below Elements can be selected by multiple methods:

• ById
• ByTagName
• ByClass
• CSS Selectors
• HTML Collections - getElementsByTagName() is a "collection"
• or use querySelctorall() - the most versatile selector

The W3C resources

When manipulating the DOM the elements that you want to change have to be accessed. The W3C site describes how. It seems that there are many ways to do this. I am doing this already but I admit that I don't (didn't but learning) really know what I am doing!

I am trying out a few of the methods to extract the list items from the menu on this page. I see in the W3C information that you can do this by: id, tag name, class name, CSS Selectors and HTML Collections.

The tag name and then id might be useful - so would class and then tag name (I don't think that there is an example)

The requirement here is to select the menu items on this page and then set the style of the li buttons

getElementsByTagName

This example demonstrates the getElementsByTagName method.

I can't really see the difference here yet. (to the example below)

querySelectorAll

The example actually selects the p of class intro (p.intro) in the W3C example - I have changed this to just li (which makes it just select by tag name.

This example demonstrates the querySelectorAll method.

The returned value is the whole contents of the li element i.e. an anchor tag.

This is not exactly what I wanted but at least I have found the li tags on this page