Shulou(Shulou.com)06/02 Report--

This article shares with you the content of sample analysis of DOM, nodes, and fetch elements in Javascript. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

DOM

Document: a "D" in DOM that converts a written web document into a document object when a web page is created and loaded into a Web browser.

Object: the "O" in DOM, an object is a self-sufficient collection of data. The variable associated with a particular object is called the property of this object, and the function that can only be called through a specific object is called the method of this object.

Model: the "M" in DOM, which is the representation of something. DOM represents a document as a family 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 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 included in other elements is the element, which is the root element of our node tree.

Text node:

Element nodes are only species of node types. If a document is made up entirely of blank elements, it will have a 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

The text contained in the element is a 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 give a more specific description of the element. If almost all elements have a 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 to get element nodes, which are obtained by element ID, tag name and class name, respectively.

GetElementById ()

DOM provides a method called getElementById, which returns an object corresponding to the element node with a given id attribute value. He says that the function is unique to the document object, and the function name must be followed by a pair of parentheses that contain the function's parameters. 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). Each element in the document is an object. The method provided by DOM can get any object. For example:

Document. GetElementById ("purchases") `getElementsByTagName ()

The getElementsByTagName method returns an array of objects, each of which corresponds to an element in the document with 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 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 (), which is an array of elements with the same class name. Such as:

Document.getElementsByClassName ("sale")

Using this method, you can also find elements with multiple class names, as long as the class names are separated by spaces in the string parameters.

Thank you for reading! This is the end of this article on "sample analysis of DOM, nodes and acquisition elements in Javascript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.