Introduction to Javascript DOM, nodes and element acquisition

DOM

Document : The "D" in DOM. When a web page is created and loaded into a web browser, it converts the written web document into a document object.

Object : The "O" in DOM, an object is a self-sufficient collection of data. Variables associated with a specific object are called attributes of that object, and functions that can only be called through a specific object are called methods of that object.

Model : The "M" in DOM, it is a representation of something. DOM represents a document as a family tree.

node

Node: A document is made up of nodes, which are branches and leaves on the document tree.

There are many different types of nodes in the DOM, such as element nodes, text nodes, and attribute nodes.

Element node:

The name of the tag is the name of the element. The name of the text paragraph element is "p", the name of the unordered list element is "u1", and the name of the list item element is "1i".

Elements can contain other elements. In our "Shopping List" document, all List Item elements are contained inside an Unordered List element. In fact, the only element that is not contained within another element is the element, which is the root element of our node tree.

Text nodes:

An element node is just a type of node. If a document consisted entirely of empty elements, it would have a structure, but the document itself would have no content. On the Internet, where content is king, the vast majority of content is provided by text. For example, the text contained in the <p> element is a text node.
In XHTML documents, text nodes are always contained inside element nodes. But not all element nodes contain text nodes.

Property Node:

Attribute nodes are used to provide a more specific description of an element. For example, almost all elements have a title attribute, which we can use to accurately describe what is contained in the element. Attribute nodes are always included in element nodes.

Get Elements

There are three DOM methods to get element nodes, one by element ID, one by tag name, and one by class name.

getElementById()

DOM provides a method called getElementById, which returns an object corresponding to the element node with a given id attribute value. It is a function specific to the document object. The function name must be followed by a pair of parentheses, which contain the function parameters. The getElementById method has only one parameter. The value of the id attribute of the element you want to get must be placed in single or double quotes document. getElementById（id） . Every element in a document is an object. The methods provided by DOM can get any object. For example:

document.getElementById("purchases")`

getElementsByTagName()

The getElementsByTagName method returns an array of objects, one for each element in the document that has a given tag. This method also has only one parameter, which is the name of the tag: element.getElementsByTagName(tag) .
But it returns an array, which has many similarities with the getElementById method, such as:

document.getElementsByTagName("li");

getElementsByClassName()

This method can access the element by the class name in the Class attribute. getElementsByClassName accepts only one parameter, which is the class name:

getElementsByClassName(class)

The return value of this method is similar to getElementsByTagName(), which is an array of elements with the same class name. like:

document.getElementsByClassName("sale");

This method can also be used to find elements with multiple class names by separating the class names with spaces in the string parameter.

Summarize:

1. A document is a node.

2. Nodes are divided into different types: element nodes, attribute nodes, and text nodes.

3. getElementById will return an object that corresponds to a specific element in the document.

4. getElementsByTagName and getElementsByClassName will return an array of objects, which correspond to a specific set of element nodes in the document.

5. Each node is an object.

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!