DOM
The article explains fundamental DOM manipulation methods in JavaScript, focusing on how to select and modify HTML elements using various document methods. It covers getElementById, getElementByClassName, getElementsByTagName, and querySelector, detailing their syntax and use cases. Examples demonstrate changing content, styles, and adding event listeners to selected elements.
- ▪getElementById() selects a single element by its unique id and returns null if not found.
- ▪getElementByClassName() and getElementsByTagName() return an HTMLCollection of elements, requiring loops for batch modifications.
- ▪querySelector() returns the first element matching a CSS selector, while querySelectorAll() returns all matching elements as a NodeList.
- ▪Event listeners cannot be directly added to collections; individual elements must be targeted or looped through.
- ▪The article provides practical code examples for selecting elements, updating text, modifying styles, and handling user interactions.
Opening excerpt (first ~120 words) tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3734090) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Nanthini Ammu Posted on Apr 28 DOM methods part 1 #webdev #javascript #beginners #tutorial What is getElementById()? It is used to select a single HTML element using its unique id attribute. Returns an Element object if a match is found; otherwise, it returns null.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at DEV Community.
Discussion
0 commentsMore from DEV Community
