The nodeName attribute contains the name of a node.
The nodeName of the element node is the label name.
The nodeName of the attribute node is the attribute name.
The nodeName of the text node is always # text
The nodeName of the document node is always # document
Note: The Tag Name of the XML element contained by nodeName is always capitalized.
NodeValue
For text nodes, the nodeValue attribute contains text.
For an attribute node, the nodeValue attribute contains the attribute value.
The nodeValue attribute is unavailable for document nodes and element nodes.
NodeType
The nodeType attribute returns the node type.
The most important node types are:
| Element type | Node Type |
|---|---|
| Element | 1 |
| Attribute attr | 2 |
| Text | 3 |
| Comment comments | 8 |
| Document | 9 |
Supplement:
Value-element type
1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION
HTML file:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> DOM Standard </title>
<Script type = "text/javascript" src = "test. js"> </js>
</Head>
<Body>
<H1 id = "h1"> An HTML Document <P id = "p1"> This is a <I> W3C html dom </I> document. </p>
<P> <input id = "btnDemo1" type = "button" value = "H1 Element Node value"> </p>
<P> <input id = "btnDemo2" type = "button" value = "retrieve H1 Element Node text"> </p>
<P> <input id = "btnDemo3" type = "button" value = "retrieve Document Element Node text"> </p>
<P> <input type = "button" alt = "this is a demo button" title = "prompt title" name = "btnShowAttr" id = "btnShowAttr" value = "button node Demo "/> </p>
</Body>
</Html>
JS:Copy codeThe Code is as follows: function showElement (){
Var element = document. getElementById ("h1"); // h1 is a Alert ('nodetype: '+ element. nodetype); // nodeType = 1
Alert ('nodename: '+ element. nodeName );
Alert ('nodevalue: '+ element. nodeValue); // null
Alert ('element: '+ element );
}
Function showText (){
Var element = document. getElementById ("h1 ");
Var text = element. childNodes [0];
Alert ('nodetype: '+ text. nodeType); // nodeType = 3
Alert ('nodevalue: '+ text. nodeValue); // The nodeValue of the text node is the text content.
Text. nodeValue = text. nodeValue + "abc"; // Add, modify, delete, and so on.
Alert ('nodename: '+ text. nodeName );
Alert (text. data); // data is the same content, which can also be added, deleted, or modified.
}
Function showDocument (){
Alert ('nodetype: '+ document. nodeType); // 9
Alert ('nodename: '+ document. nodeName );
Alert (document );
}
Function showAttr (){
Var btnShowAttr = document. getElementById ("btnShowAttr"); // The demo button has many attributes.
Var attrs = btnShowAttr. attributes;
For (var I = 0; I <attrs. length; I ++ ){
Var attr = attrs [I];
Alert ('nodetype: '+ attr. nodeType); // attribute's nodeType = 2
Alert ('attr: '+ attr );
Alert ('attr. name: '+ attr. name +' = '+ attr. value );
}
}
Function demo (){
Var btnDemo1 = document. getElementById ("btnDemo1 ");
BtnDemo1.onclick = showElement; // click button 1 to obtain the node nodetype value.
Var btnDemo2 = document. getElementById ("btnDemo2 ");
BtnDemo2.onclick = showText;
Var btnDemo3 = document. getElementById ("btnDemo3 ");
BtnDemo3.onclick = showDocument;
Var btnShowAttr = document. getElementById ("btnShowAttr ");
BtnShowAttr. onclick = showAttr;
}
Window. onload = demo;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
