Patterns for efficient DOM manipulation with vanilla JavaScript – LogRocket Blog

These days, frameworks are all the rage. But sometimes we still turn to DOM manipulation with vanilla JavaScript. The typical pattern for DOM manipulation using vanilla JavaScript is something like this: first, you need to get a reference to the...

October 2, 2024

Exploring essential DOM methods for frontend development – LogRocket Blog

News

Exploring essential DOM methods for frontend development – LogRocket Blog

A smooth webpage that operates dynamically with users’ actions as they browse their favorite online store or other site is key for providing the best experience possible. But what acts as the foundation for users to access all of this...

July 23, 2024

News

Modify and Delete DOM Elements

In this post, we’ll explore DOM manipulation using JavaScript, focusing on creating, appending, and modifying elements in an optimized manner. Let’s dive into the following example to understand how to efficiently handle these operations. HTML Structure We’ll start with a...

July 4, 2024

News

Dynamically Adding To The Webpage

The code iterates through an array called userList, and for each user object (el), it creates a card element using the createElement function. This card contains the user’s avatar, name, and email. The card is then appended to an element...

June 27, 2024

News

DOM Manipulation with querySelector

Understanding how to select and manipulate DOM elements is crucial in web development. Let’s explore some powerful methods: querySelector, querySelectorAll, and getElementsByClassName. Using querySelector The querySelector method allows you to select the first element that matches a specified CSS selector....

June 25, 2024

Angular Signal Queries: Simplifying DOM Querying

Development News

Angular Signal Queries: Simplifying DOM Querying

Following Signal Inputs and Model Inputs, another Signal API has landed in the Angular ecosystem with the release of v17.2.0: Signal Queries. Signal Queries offer an alternative approach to the decorator-based queries, namely @ViewChild, @ViewChildren, @ContentChild and @ContentChildren, supplying query...

April 15, 2024

DOM Manipulation: Accessing the Elements of the Webpage.

Development News

DOM Manipulation: Accessing the Elements of the Webpage.

Intro In the previous blog I talked about DOM and how it helps developers in manipulating the values on the web page. This time I will share the guide on how to manipulate the data on the webpage using the...

April 14, 2024

Lessons from open-source: Use window.trustedTypes to prevent DOM XSS.

Development News

Lessons from open-source: Use window.trustedTypes to prevent DOM XSS.

This lesson is picked from Next.js source code. In this article, you will learn what are window.trustedTypes. I was looking at client/trusted-types.ts and found window.trustedTypes?.createPolicy. At first, I thought trustedTypes must be an Object set some wherelse in the Next.js...

April 9, 2024

Easiest Explanation of DOM, Even a 6 year old can understand

Development News

Easiest Explanation of DOM, Even a 6 year old can understand

Introduction When learning web development I am sure many folks have seen or heard about this term called “DOM” and many people actually take it as a scary, hard to understand topic even before they start to learn about it....

April 8, 2024

Why are my table rows rendered outside the table? DOM template parsing caveats in Vuejs

Development News

Why are my table rows rendered outside the table? DOM template parsing caveats in Vuejs

The problem described here might not be something you run into often, as it mainly applies to situations where you write your HTML template directly in your HTML document. If you use a string template or a single file component,...

April 8, 2024

1 2