DOM in JavaScript

Document Object Model (DOM)

DOM API is a programming interface for web documents. It represents a page so that programs can change the structure, style, and content of the document.

The DOM represents a document as a tree of objects; each object represents a portion of the page.

DOM operations in JavaScript

When implementing DOM in JavaScript, we can consider the following basic knowledge;

1. querySelector: This is a greedy selector. It selects the first specified element.

For example:

querySelector("h1")

This will locate the first h1 element in the entire HTML document

2. querySelectorAll: This will target all h3 elements in the HTML document.

For example:

querySelectorAll("h3")

These will be output as a list of nodes in the console.

Note: The node list looks like an array, but there is a big difference

Node lists are browser APIs and arrays are JavaScript APIs. In short, node lists do not belong in JavaScript, so loops cannot be implemented on them.

Also, getElementbyTagName() and querySelectorAll are not JavaScript methods, but browser APIs.

innerHTML and innerText

It is recommended to use innerHTML instead of innerText as this will restrict others from modifying your script.

Methods to position elements

• We have many ways to locate or select elements to operate on in a document.

These methods include:

By ID by name by class by tag By tag name

Note: We never use ID and Class to select anything from the browser.

Therefore, we use querySelector.

Key concepts in JavaScript.

a) Hoisting: Let’s use an example to illustrate this point,

For example:

1. console.log(a);
2. var a;
3. a = 5;
4. console.log(a);

When executed in the console, a on line 1 will be output as undefined.

This means that even though we didn't declare a explicitly at the beginning, it was "magically" declared in the browser, which is called hoisting.

Normally, for line 4, the output would be 5 because a has been explicitly initialized.

b) Closure: A closure is created every time a function is created.

c) Global Execution Context : The global execution context is the environment in which JavaScript code runs when not inside any function.

d) Call Stack: When a script calls a function, the interpreter adds it to the stack and starts executing the function.

My GitHub link LinkedIn

The above is the detailed content of DOM in JavaScript. For more information, please follow other related articles on the PHP Chinese website!