search
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

JavaScript gets node type, node name and node value

Node type

In DOM nodes, each node has a different type.

The commonly used DOM node types in W3C specifications are as follows:

QQ截图20161013092538.png

Syntax for obtaining node types:
nodeObject.nodeType
Among them, nodeObject is the DOM node (node ​​object). This property returns the node type as a number, for example, 1 for an element node and 2 for an attribute node.

For example, get the node type of the <div> tag with id="demo":

document.getElementById("demo").nodeType;

The return value of this statement is 1.

For example, get the type value of element node and text node: <div id="demo1">Click here to display the node class

<div id="demo1">点击这里显示节点类型</div>
<script type="text/javascript">
    document.getElementById("demo1").onclick=function(){
        var divType=this.nodeType;
        var textType=this.firstChild.nodeType;   //  this 指当前发生事件的HTML元素,这里是<div>标签
        alert(
            "<div>标签的节点类型是:"+divType+"\n"+
            "<div>标签内部文本的节点类型是:"+textType
        );
    }
</script>

Please see the demo:QQ截图20161013092836.png

Node name

The node name is the name of the DOM node. Different types of nodes correspond to different node names.

QQ截图20161013092653.png

Syntax for getting the node name:

    nodeObject.nodeName


Among them, nodeObject is the DOM node (node ​​object).

For example, get the node name of the <div> tag with id="demo":

document.getElementById("demo").nodeName;

The return value of this statement is DIV.

For example, get the element node name, text node name and document node name:

<div id="demo2">点击这里显示节点名称</div>
<script type="text/javascript">
    document.getElementById("demo2").onclick=function(){
        var divName=this.nodeName;
        var textName=this.firstChild.nodeName;   //  this 指当前发生事件的HTML元素,这里是<div>标签
        var documentName=document.nodeName
        alert(
            "<div>标签的节点名称是:"+divName+"\n"+
            "<div>标签内部文本的节点名称是:"+textName+"\n"+
            "文档节点的节点名称是:"+documentName
        );
    }
</script>

QQ截图20161013092844.png

Node value

For text nodes, the node value is the text content; for attribute nodes, the node value is the value of the attribute.

Node values ​​are not available for document nodes and element nodes.

Syntax for getting node value:

 nodeObject.nodeValue

Among them, nodeObject is the DOM node (node ​​object).

For example, get the node value of the text node:

<div id="demo3">点击这里显示文本节点的值</div>
<script type="text/javascript">
    document.getElementById("demo3").onclick=function(){
        alert(this.firstChild.nodeValue);   //  this 指当前发生事件的HTML元素,这里是<div>标签
    }
</script>

QQ截图20161013092852.png

new file
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML DOM树型结构图</title> <div id="demo2">点击这里显示节点名称</div> <script type="text/javascript"> document.getElementById("demo2").onclick=function(){ var divName=this.nodeName; var textName=this.firstChild.nodeName; // this 指当前发生事件的HTML元素,这里是<div>标签 var documentName=document.nodeName alert( "<div>标签的节点名称是:"+divName+"\n"+ "<div>标签内部文本的节点名称是:"+textName+"\n"+ "文档节点的节点名称是:"+documentName ); } </script> </head> <body> </body> </html>
Reset Code
Automatic operation
submit
Preview Clear