Learn the basics of JavaScript DOM operations in one article

DOM Concepts

DOM: document object model: The document object model uses js to manipulate HTML code, add elements, and delete elements. . .

Get Elements

(1) getElementById gets an element by id (2) getElementsByTagName gets an element by tag name (array)
(3) getElementsByClassName gets an element set (array) by class.
(4) getElementsByName gets an element collection (array) through the name attribute

Summary : Elements can be obtained based on tag name, id, class, and name attributes. The result of Id is an element, while the result of others is a collection.
The document object supports the above four, while the element object only supports
getElementsByTagName and getElementsByClassName

Modifying Elements

(1) Modify the content. The text inside the tag can be read or set through the innerText property. The text inside the tag can be read or set through the innerHTML property. There are two differences: innerHTML will parse the text according to the rules of HTML, while innerText is just treated as ordinary text content.

(2) Modify the style
a：xxx.style.yyy
b: xxx.classname = "..." (equivalent to modifying the class attribute)

Add and remove elements

(1) createElement creates an element node
createElement("p") creates a paragraph (2) createTextNode creates a text node
createTextNode("text content") creates a text node with the value "text content" (3) appendChild adds a child node (4) removeChild removes a child node

navigation

Document: root node
parentNode: Get the parent node
childNodes: Get all child nodes
firstChild: the first child node
lastChild: the last child node

This is the end of this article about the basics of JavaScript DOM operations. For more relevant JavaScript DOM basics content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!