Brief introduction of Javascript DOM detailed explanation of nodes and acquisition elements
- 2021-12-04 09:30:30
- OfStack
DOM
Documentation: "D" in DOM, which converts the written Web page document into a document object when a Web page is created and loaded into an Web browser.
Object: "O" in DOM, which is a self-sufficient data set. Variables associated with a particular object are called properties of that object, and functions that can only be called through a particular object are called methods of that object
Model: "M" in DOM, which is the expression of something. DOM represents a document as a genealogical tree.
Node
Nodes: A document is made up of nodes, which are branches and leaves on the document tree.
There are many different types of nodes in DOM, such as element nodes, text nodes, and attribute nodes.
Element node:
The name of the tag is the name of the element. The text paragraph element is named "p", the unordered list element is named "u1", and the list item element is named "1i".
Element can contain other elements. In our "shopping list" document, all list item elements are contained within-1 unordered list element. In fact, the only element that is not included in other elements is the element, which is the root element of our node tree.
Text node:
An element node is just a kind of node type. If a document consists entirely of 1 blank element, it will have 1 structure, but the document itself will not contain anything. On the Internet where content is king, the vast majority of content is provided by text. Such as
<
p
>
The text contained in the element is a text node (text node).
In XHTML documents, text nodes are always contained inside element nodes. But not all element nodes contain text nodes.
Attribute node:
Attribute nodes are used to describe elements in a more specific way. If almost all elements have an title attribute, we can use this attribute to accurately describe what is contained in the element, and the attribute node is always contained in the element node.
Get Element
There are three DOM methods for obtaining element nodes, which are obtained by element ID, tag name and class name respectively.
getElementById ()
DOM provides a method called getElementById, which will return an object corresponding to the element node with the given id attribute value. He said that the function unique to document object must be followed by a pair of parentheses, which contain the parameters of the function. The getElementById method has only one parameter, and the value of the id attribute of the element you want to get must be enclosed in single or double quotation marks
document. getElementById（id）
. Every element in a document is an object. The method provided by DOM can get any 1 object. For example:
document. getElementById (" purchases ") `
getElementsByTagName()
The getElementsByTagName method returns an array of objects, each corresponding to an element of the document with a given label. This method also has only one parameter, and its parameter is the name of the label:
element.getElementsByTagName(tag)
.
But it returns an array, which has many similarities to the getElementById method, such as:
document. getElementsByTagName("li");
getElementsByClassName()
This method can access the element through 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 (), both of which are an array of elements with the same class name. Such as:
document.getElementsByClassName("sale");
You can also find elements with multiple class names using this method by separating class names with spaces in string parameters.
Summary:
1. One document is one node.
2. Nodes are divided into different types: element nodes, attribute nodes, and text nodes.
3. getElementById returns an object that corresponds to a specific element in the document.
4. getElementsByTagName and getElementsByClassName will return an array of objects, each corresponding to a specific set of element nodes in the document.
5. Each node is an object.
This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!