What makes building dynamic web page interesting is the DOM data structure can be changed at will, we can add or remove almost everything. Nodes have available the remove method to remove them from their current parent node. To add a child node to an element we can use the appenChild(), which puts it at the end of the list of children or insertBefore(a, b), which inserts the node given as the first argument before the second one.

JavaScript DOM Manipulation in Details

To have a solid understanding of the structure of an HTML page. Let’s add a basic code. DOM Manipulation DOM Manipulation This a simple DOM manipulation example More information about DOM API <!DOCTYPE html> < = > html lang "en" < > head < > title </ > title </ > head < > body < > h1 </ > h1 < > p </ > p < > p < = > a href "https://developer.mozilla.org/en-US/docs/Glossary/DOM" </ > a </ > p </ > body </ > html The browser will run that HTML code and build a representation of its structure, then use that representation to display the elements to the screen. A user programmer can interact with the structure of the page, (with the help of code), modify or remove elements from the page. All of which is possible with the JavaScript programming language. To make a representation of the HTML structure in our heads, think of a tree, where each node may refer to other nodes, (children) which in turn may have their children. The DOM stands for Document Object Model. It is a representation of a web page hierarchy of objects where each object corresponds to a node in the page tree. DOM objects have properties and methods that can be manipulated with JavaScript. Basic tree representation of the sample code provided above. Accessing the DOM with variable document This variable is an object and has head et body properties that allow access to the <head> and <body> elements of the page, respectively. root = ; .log(root); head = .head; .log(head); body = .body; .log(body); const document // root holds the root object console const document // head holds the head object console const document //body holds the body object console Accessing DOM node one by one can be an overwhelming task to do. For instance, if we want a node in the middle of the HTML structure, the order will change in future modification. Your code will not have the expected behavior, to remedy that situation. JavaScript also gives you access to several additional convenience links. Access the element by its tag’s name. So if we want to get the href attribute of the link in that document, we don’t want to say something like “Get the second child of the sixth child of the document body”. It’d be better if we could say “Get the first link in the document”. And we can. link = .body.getElementsByTagName( )[ ]; .log(link.href); const document "a" 0 console Using the document.getElementsByTagName() method, which collects all elements with the given tag name that are descendants (direct or indirect children) of that node and returns them as an array-like object. 2. Access the element by its id. To find a specific node, you can give it an id attribute and use document.getElementById()  instead. single para = .getElementById( ); .log(para.textContent); const document "para" console 3. Changing the document. What makes building dynamic web page interesting is the DOM data structure can be changed at will, we can add or remove almost everything. Nodes have available the remove method to remove them from their current parent node. To add a child node to an element we can use the appenChild(), which puts it at the end of the list of children or insertBefore(a, b), which inserts the node given as the first argument before the second one. 4. Create a new node element. To create element nodes, you can use the method. This method takes a tag name and returns a new empty node of the given type. newDiv = .createElement( ); newDiv.textContent = ; .body.innerHTML.appendChild(newDiv); // create a new div const document "div" // add text to that div 'new created element' /* we can add the new created div at the end of the document or         
before a specific element */ document // with that line the new div is added at end of the root document 5. Change the styling of the element. JavaScript code can directly manipulate the style of an element through the element’s property. This property holds an object that has properties for all possible style properties. The values of these properties are strings, which we can write to change a particular aspect of the element’s style. Some style property names contain hyphens, such as font-family. Because such property names are awkward to work within JavaScript (you’d have to say style["font-family"]), the property names in the style object for such properties have their hyphens removed and the letters after them capitalized (style.fontFamily). title = .getElementsByTagName( )[ ];
title.style.color = ;
title.style.textAlign = ; // change the color of the h1 and its align in the page const document 'h1' 0 'blue' 'center' Conclusion The DOM is organized like a tree, in which elements are arranged hierarchically according to the structure of the document. The objects representing elements have properties such as parentNode and childNodes, which can be used to navigate through this tree.

JavaScript DOM Manipulation in Details

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Step-by-Step Introduction to CSS Preprocessors with VS Code

Code Smell 318 - Wasting Time Refactoring Dirty Code

Building the "Spotify Wrapped" of Product Hunt: A 48-Hour Technical Sprint to Map the Maker Economy

The Truth About “Cancelling” Async/Await: You’re Mostly Just Ignoring Results

Symfony 7.4’s Share Directory Solves the Cache Problem for Kubernetes Apps

I Stopped Using ChatGPT to Write Code. Here Is What Happened to My Brain.

A Step-by-Step Introduction to CSS Preprocessors with VS Code

Code Smell 318 - Wasting Time Refactoring Dirty Code

Building the "Spotify Wrapped" of Product Hunt: A 48-Hour Technical Sprint to Map the Maker Economy

The Truth About “Cancelling” Async/Await: You’re Mostly Just Ignoring Results

Symfony 7.4’s Share Directory Solves the Cache Problem for Kubernetes Apps

I Stopped Using ChatGPT to Write Code. Here Is What Happened to My Brain.

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps