Introduction to html dom and htmldom

Introduction to html dom and htmldom

This article describes DOM content, DOM nodes, node attributes, and methods for getting HTML elements.

Directory

1. Introduction to DOM: introduces DOM and describes DOM classification and functions.

2. DOM node: Describes DOM node classification and node hierarchy.

3. html dom node attributes: Describes html dom node attributes, such as innerHTML, innerText, nodeName, nodeValue, and nodeType.

4. Methods for retrieving HTML element nodes: document and element nodes can be obtained through the getElementById, getElementsByName, getElementsByClassName, and getElementsByTagName methods.

 

1. Introduction to 1.1 DOM Interpretation

Note:The full name of DOM is Document Object Model, which is the Document Object Model. Abstract A document into a tree structure. The tags, tag attributes, or TAG content in the document can be expressed as nodes on the tree.

 

1.2 DOM Classification

Different operation objects can be divided into Core DOM, xml dom, and html dom.

Core Dom:Core Dom, a standard model for any structured document.

Xml dom:Used to operate XML elements in the standard model of XML documents.

Html dom:It is used for standard models of HTML documents to operate HTML elements.

 

1.3 DOM Functions

① Query an element

② Query the ancestor, sibling, and descendant elements of an element

③ Obtain and modify attributes of an element

④ Obtain and modify the Element Content

⑤ Create, insert, and delete Elements

 

2. DOM Node

All content in the document can be expressed as a node. For example, the entire document, each tag, attributes and text of each tag in HTML can be used as a node.

2.1 node Classification

①Document Node(Document): entire XML and HTML documents

②Element Node(Element): Each XML or HTML Element

③Attribute node(Attr): attributes of each XML or HTML Element

④Text Node(Text): Text in each XML or HTML Element

⑤Comment nodes(Comment): Each Comment

Note: The Document node here is a general term, which can be divided into XMLDocument and HTMLDocument. Similarly, elements can also be divided into XMLElement and HTMLElement.

 

2.2 html dom node hierarchy

Nodes have hierarchical relationships with each other: parent node, sibling node, and subnode.

2.2.1 example:

HTML document to html dom node tree

 

 

2.2.2 example:

1) The parent node of the

2) The

3) The <title> element is a subnode of the

 

3. html dom node attributes

Describes html dom node attributes, such as innerHTML, innerText, nodeName, nodeValue, and nodeType.

3.1 innerHTML: Get or set node content in HTML code format

Note:When an attribute is assigned to innerHTML in HTML format, it is displayed in HTML format. For example, node. innerHTML = "<input type = 'button 'value = 'button'/>" will display a button.

Example:

Document. getElementById ('div '). innerHTML = "<input type = 'button 'value = ''/>"; // sets innerHTML of the div element as a button document. getElementById ('div '). innerHTML; // => <input type = 'button 'value = 'button'/>: returns the content of a node in HTML format.

 

3.2 innerText: Get or set the text content of a node

Note:Obtain or set the content of a node in the form of a text string.

Example 1:

<Input type = 'button 'value = 'button'/> the value in HTML format is displayed as a string "<input type = 'button 'value = ''/> ".

Example 2:

Only the text content is obtained.

Document. getElementById ('div '). innerText; // => "text 1 text 2"

 

3.3 nodeName: Get the node name, read-only attribute

Note:

Node Type	NodeName
Document Node)	Return # document
Element)	Returns the upper-case element name.
Attribute node (Attr)	Returned property name
Text Node)	Return # text

Example:

Console. log (document. nodeName); // => # document: document node console. log (document. body. nodeName); // => BODY: Element Node console. log (document. getElementById ('div '). nodeName); // => DIV: Element Node console. log (document. getElementById ('div '). attributes. style. nodeName); // => style: attribute node

　　

3.4 nodeValue: Get or set the node Value

Note:This attribute returns null and is read-only.

Node Type	NodeValue
Document Node)	Read-only, return null
Element)	Read-only, return null
Attribute node (Attr)	Get or set attribute values
Text Node)	Get or set the text value

Example:

Console. log (document. nodeValue); // => null: Document node console. log (document. body. nodeValue); // => null: Element Node console. log (document. getElementById ('div '). nodeValue); // => null: Element Node console. log (document. getElementById ('div '). attributes. style. nodeValue); // => width: 200px; height: 100px; border: 1px solid black;: the value of the style attribute document. getElementById ('div '). attributes. style. nodeValue = 'width: 200px; height: 200px '; // you can specify the value of the style attribute.

 

 

3.5 nodeType: Return node type, read-only attribute

Note:

Node Type	NodeType
Document Node)	9
Element)	1
Attribute node (Attr)	2
Text Node)	3

Example:

Console. log (document. nodeType); // => 9: Document node console. log (document. body. nodeType); // => 1: Element Node console. log (document. getElementById ('div '). nodeType); // => 1: Element Node console. log (document. getElementById ('div '). attributes. style. nodeType); // => 2: attribute node

 

4. Methods for retrieving HTML element nodes

The document and element nodes can be obtained through the getElementById, getElementsByName, getElementsByClassName, and getElementsByTagName methods.

4.1 getElementById (id): gets the element of the specified ID

Parameters:

① Id {string}: Element ID.

Return Value:

{HtmlElement} Element Node object. If no value is found, null is returned.

Note:

① The HTML element ID is case sensitive.

② If no element with the specified ID is found, null is returned.

③ If there are multiple identical ID elements under a parent node, the first (rather than the highest level) is selected by default ).

Example:

Document. getElementById ('div '); // => get the element whose ID is div

 

4.2 getElementsByName (name): returns an array of elements containing the specified name.

Parameters:

① Name {string}: name.

Return Value:

{Array} Array of elements that meet the condition. If no matching condition is found, an empty array is returned.

Example:

Document. getElementsByName ('btn '); // returns an array of elements whose name is Btn.

 

4.3 getElementsByClassName (className): returns an array of elements containing the specified class name.

Parameters:

① ClassName {string}: class Name.

Return Value:

{Array} Array of elements that meet the condition. If no matching condition is found, an empty array is returned.

Example:

Document. getElementsByClassName ('show'); // returns an array of elements containing show in the class.

 

4.4 getElementsByTagName (elementName): returns an array of elements with the specified tag name.

Parameters:

① ElementName {string}: Tag name. Such as div and.

Return Value:

{Array} Array of elements that meet the condition. If no matching condition is found, an empty array is returned.

Example:

Document. getElementsByTagName ('div '); // returns an array of elements labeled as div.

 

====================================== Series of articles ==============================================

This article: 4.1 Introduction to HTML DOM

Web development path Series