NodeName, NodeValue, and NodeType contain information about the nodes.
The NodeName property contains the name of a node.
The nodename of the element node is the label name
The nodename of the attribute node is the property name
The nodename of the text node is always #text
The nodename of the document node is always #document
Note: The label name of the XML element contained in NodeName is always uppercase
NodeValue
For text nodes, the NodeValue property contains text.
For an attribute node, the NodeValue property contains the property value.
The NodeValue property is not available for document nodes and ELEMENT nodes.
NodeType
The NodeType property can return the type of the node.
The most important node types are:
| element Type |
node Type |
| Elemental Element |
1 |
| Attribute attr |
2 |
| Textual text |
3 |
| Annotation comments |
8 |
| Documents document |
9 |
Add:
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 Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>dom Standard </title>
<script type= "Text/javascript" src= "Test.js" ></js>
<body>
<H1 id= "H1" >an HTML document<p id= "P1" >this is a <i>w3c HTML dom</i>
<p><input id= "BtnDemo1" type= "button" value= "Take H1 element node value" ></p>
<p><input id= "BtnDemo2" type= "button" value= "Take H1 element node text" ></p>
<p><input id= "BtnDemo3" type= "button" value= "Fetch document element node text" ></p>
<p><input type= "button" alt= "This is a demo button" title= "demo button prompt title" Name= "Btnshowattr" id= "btnshowattr" value= "button node Demo"/ ></p>
</body>
Js:
Copy Code code 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 text node's nodevalue is its textual content
text.nodevalue=text.nodevalue+ "ABC"; Text content add modify delete and so on.
Alert (' nodename: ' +text.nodename);
alert (text.data); Data is also its content, and this attribute can also be added to the deletion.
}
function showdocument () {
Alert (' NodeType: ' +document.nodetype); 9
Alert (' nodename: ' +document.nodename);
alert (document);
}
function showattr () {
var Btnshowattr=document.getelementbyid ("Btnshowattr"); Demo button, with many properties
var attrs=btnshowattr.attributes;
for (var i=0;i<attrs.length; i++) {
var attr=attrs[i];
Alert (' NodeType: ' +attr.nodetype); The nodetype=2 of attribute
Alert (' attr: ' +attr);
Alert (' Attr.name: ' +attr.name+ ' = ' +attr.value ');
}
}
Function Demo () {
var Btndemo1=document.getelementbyid ("BtnDemo1");
Btndemo1.onclick=showelement; Button 1 Fetch 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;
