DEV Community

Code_Regina
Code_Regina

Posted on

|DOM| DOM: The World of The DOM

#javascript #html #css #webdev 
          -Introducing the DOM
          -The Document Object 
          -getElementById
          -getElementsByTagName and className
          -querySelector and querySelectorAll
Enter fullscreen mode Exit fullscreen mode

Introducing the DOM

The DOM allows us to combine JavaScript with HTML to do stuff.

The DOM stands form Document Object Model.

The DOM is a JavaScript representation of a webpage.
It's your JS "window" into the contents of a webpage.
It just a bunch of objects that you can interact with vis JS.

The Document Object

The objects all have certain properties like the type of elements they represent. But then some of them have more specialized things like attribute or a source for an image or inner text for a heading.

Window is a special object that's always available in the browser.

The document object is our entry point into the world of the DOM.
Its contains representations of all the content on a page, plus tons of useful methods and properties.

getElementById

Selecting with JavaScript to single out one element or all elements with a certain class or all elements with a certain type.
Similar to selecting in CSS.

getElementById() returns an element object representing the element whose id property matches the specified string.


var element = document.getElementById(id);
Enter fullscreen mode Exit fullscreen mode

getElementsByTagName and className

The getElementsByTagName method of document interface returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node.


var elements = document.getElementsByTagName(name);
Enter fullscreen mode Exit fullscreen mode

Basically, all we need to do is get elements by tag name and then pass in a tag name so we don't pass in paragraph.

querySelector and querySelectorAll

querySelector is a newer, all-in-one method to select a single element.

document.querySelector('h1'); 

document.querySelector('#red');

document.querySelector('.big');
Enter fullscreen mode Exit fullscreen mode

querySelectorAll
Same idea, but returns a collection of matching elements.

Top comments (1)

Collapse
 
lifeiscontent profile image
Aaron Reisman •

there's also Element.closest which can be super helpful when you need to know if there's an element in the tree above the one you're querying with.

e.g.

function handleClick(event) {
  const header = event.target.closest('.accordion-header');
  const accordion = event.target.closest('.accordion');
  const body = accordion?.closest('.accordion-body');

  if (header) {
   // if I've clicked inside of the header
   // toggle the display of the body of the accordion
    body.hidden = !body.hidden;
  }
}

document.documentElement.addEventListener('click', handleClick, true);
Enter fullscreen mode Exit fullscreen mode

Read next

midhunkrishnan profile image

To access terminal profile of VS Code and add commands to be run initially

Midhun Krishnan R -

gittech profile image

Github's Top 36 items of Dec 19, 2024

Gittech -

bharath_vasishtha profile image

Understanding Java Strings: A Comprehensive Guide

Bharath S R -

kaankaya profile image

Building a Nickname-Based Crypto Transfer Service Like WhiteBIT's QuickSend: A Developer's Guide

Kaan Kaya -