13 things to know: Use JavaScript to manipulate the DOM

Author: Milos Protic

Translator: Front-end wisdom

Source: impressivewebs.

The DOM or document Object Model is the root of all objects on a Web page. It represents the structure of the document and connects the page to the programming language. Its structure is a logical tree. Each branch ends at a node, and each node contains child nodes and objects. The DOM API is huge, and in this article, we’ll discuss only the more common and useful ones.

document.querySelector / document.querySelectorAll

The document.querySelector method returns the first HTML element in the document that matches the specified selector or group of selectors. If no match is found, null is returned.

Document. QuerySelectorAll () method returns the specified selectors matching set of the elements in the document list of first order (using the depth-first traversal of the document node). The object returned is NodeList.

// Returns the first ul element const list = document.querySelector('ul') // Returns all div elements with class names of info or warning const elements = document.querySelectorAll('div.info, div.warning');Copy the code

document.createElement

In an HTML Document, the document.createElement (tagName) method creates the HTML element specified by tagName, or an HTMLUnknownElement, if the tagName is not recognized.

Node.appendChild

The node.appendChild () method adds a Node to the end of the list of children of a given parent Node. Note that if a given child is a reference to an existing node in the document, it moves to the new location. Take a look at an example:

let list = document.createElement('ul'); [' Beijing ', 'Shanghai ', ForEach (city => {let listItem = document.createElement('li') listitem.innertext = city list.appendChild(listItem)  }) document.body.appendChild(list)Copy the code

Node.insertBefore

This method inserts the given node before the child reference node within the given parent node (and returns the inserted node)

The pseudocode is shown below:

• Beijing
• Shanghai
• shenzhen
• left

Node.insertbefore (' Xiamen ',' Beijing ')

• left
• xiamen
• Beijing
• Shanghai
• shenzhen

    let list = document.querySelector('ul');
    let firstCity = list.querySelector('ul > li');
    let newCity = document.createElement('li');
    newCity.textContent = 'San Francisco';
    list.insertBefore(newCity, firstCity);
Copy the code

Node.removeChild

The node.removechild method removes a child Node from the DOM and returns the deleted Node. Notice that the returned node is no longer part of the DOM, but still exists in memory. If not handled properly, memory leaks may result.

let list = document.querySelector('ul');
let firstItem = list.querySelector('li');
let removedItem = list.removeChild(firstItem);
Copy the code

Node.replaceChild

This method replaces the child node in the parent node (and returns the replaced old child node). Note that if not handled properly, this method can cause memory leaks similar to those of Node.removechild.

let list = document.querySelector('ul'); let oldItem = list.querySelector('li'); let newItem = document.createElement('li'); Newitem. innerHTML = 'newitem. innerHTML '; let replacedItem = list.replaceChild(newItem, oldItem);Copy the code

Node.cloneNode

The node.clonenode (deep) method returns a copy of the Node on which it was called. **deep(optional)** indicates whether deep cloning is used. If true, all descendants of the Node will be cloned, and if false, only the Node itself will be cloned.

let list = document.querySelector('ul');
let clone = list.cloneNode();
Copy the code

Element.getAttribute / Element.setAttribute

The element. getAttribute method returns the value of the given attribute on the Element, and vice versa, element. setAttribute sets the value of the attribute on the given Element.

let list = document.querySelector('ul');
list.setAttribute('id', 'my-list');
let id = list.getAttribute('id');
console.log(id); // outputs my-list
Copy the code

Element.hasAttribute / Element.removeAttribute

The element. hasAttribute method checks whether the given Element has the specified attribute and returns a Boolean value. We can remove an attribute with a given name from an Element by calling the element.removeAttribute method.

let list = document.querySelector('ul');
if (list.hasAttribute('id')) {
    console.log('list has an id');
    list.removeAttribute('id');
};
Copy the code

Element.insertAdjacentHTML

Element. InsertAdjacentHTML (position, text) specifies the text parsing HTML or XML, and insert the node to the specified location in the DOM tree. It does not reparse the element it is using, so it does not destroy existing elements within the element. This avoids the extra serialization step and makes it faster than the direct innerHTML operation.

Position is the position relative to the element and must be one of the following strings:

Beforebegin: Precedes the element itself. Afterbegin: Before inserting the first child inside the element. Beforeend: Inserts after the last child node inside an element. Afterend: After the element itself.

Text is a string to be parsed into HTML or XML and inserted into the DOM tree.

<! -- beforebegin --> <div> <! -- afterbegin --> <p>Hello World</p> <! -- beforeend --> </div> <! -- afterend -->Copy the code

Example:

var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');
Copy the code

conclusion

Hopefully, this article has been helpful and helps you understand the DOM. Handling DOM trees correctly is important, and if done incorrectly, can have serious consequences.

Original: www.impressivewebs.com/10-essentia…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview. [1] : www.fundebug.com/?utm_source…