Home > Article > Web Front-end > JS access DOM object selected node method
This time I will bring you JS accessDOM objectSelect the node method, JS access to the DOM object to select the nodeWhat are the precautions, the following is a practical case, let’s take a look .
Introduction
Use the getElementById()
method to access the node with the specified id, and use nodeName attribute, nodeType attribute and nodeValue attribute to display the node name, node type and node value.
1, nodeNameAttribute
This attribute is used to obtain the name of a node.
[sName=]obj.nodeName
sName: StringThe variable is used to store the name of the node.
2, nodeTypeAttribute
This attribute is used to obtain the type of a node.
[sType=]obj.nodeType
sType: String variable, used to store the type of node, the value of this type is numeric . The type of this parameter is shown in the table below.
Type | Value | Node name | Description |
Element ) | 1 | tag | Any HTML or XML tag |
Attribute | 2 | Attribute | Attribute in tag |
Text (text) | 3 | #text | Contains the text in the tag |
Comment | 8 | #comment | HTML comment |
Document | 9 | #document | Document Object |
Document Type (documentType) | 10 | DOCTYPE | DTD Specification |
3. nodeValueProperty
This property will return the value of the node.
[txt=]obj.nodeValue
txt: String variable is used to store the value of the node, except for text node types. The node values of the type are all "null".
Second application
Access the specified node. In this example, the name of the specified node and the type of the node are displayed in the prompt box that pops up on the page. and the value of the node.
Three codes
<!DOCTYPE html> <html> <head> <title>访问指定节点</title> </head> <body id="b1"> <h3 >三号标题</h3> <b>加粗内容</b> <script language="javascript"> <!-- var by=document.getElementById("b1"); var str; str="节点名称:"+by.nodeName+"\n"; str+="节点类型:"+by.nodeType+"\n"; str+="节点值:"+by.nodeValue+"\n"; alert(str); --> </script> </body> </html>
Fourth run will pop up the following prompt box:
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How React Native implements floating buttons
How webpack implements hot module replacement
The above is the detailed content of JS access DOM object selected node method. For more information, please follow other related articles on the PHP Chinese website!