5.2. Accessing and Modifying the DOM

5.2.1. Searching for nodes in the tree

In the last section we looked at querySelector which is a nice generalization of several more specific methods of the document object. These methods are as follows:

  • getElementsByTagName – get all elements with this tag
  • getElementsByName – get all elements that match the name attribute
  • getElementsByClass – get all elements that have the given class
  • getElementbyId – get the element with the given id

All of the methods except for getElementById return an and HTMLCollection, this acts a lot like an Array but is not 100% the same. For one thing an HTMLCollection is guaranteed to only contain Element objects. Since ids are supposed to be unique the getElementById method only returns a single Element. Which one of the elements it returns is not defined, it might be the first, it might be the last you have no idea. The best thing to do is fix the HTML so you no longer have duplicate ids.

Lets try using some of these in an example on this page. Lets find the innerHTML of all of the p tags we can find on this page.

Its worth expanding on the Element object a bit. There are a lot of different methods and attributes of the element object that we will use. For now lets just list a few of them. (If you want to see the comprehensive list you can find it at w3schools.

  • children
  • firstChild
  • lastChild
  • className
  • classList
  • id
  • innerHTML
  • textContent
  • nextSibling
  • nodeName
  • tagName
  • parentElement
  • style
  • toString

    Check your Understanding

    Somewhere on this page there is a tag with the id of “mysteryid” write some javascript to print out the kind of tag.
    How many li tags are on this page?
    Print the tags of all of the elements that have the class container

    5.2.2. Creating and Grafting new Nodes into the tree

    • createElement
    • createAttribute
    • appendChild
    • insertBefore

    Check your Understanding

    There is an element on this page with the class “specialclass” find this element then add an h2 tag below it with the text “Hello World”.
    Next Section - 5.3. Exercises