There are many ways to obtain DOM nodes. You can obtain them based on the id attribute and tag name, or you can obtain child nodes, parent nodes, previous nodes, and next nodes.
This section explains how to obtain nodes based on the id attribute and label name of HTML tags.
getElementById() method
To obtain DOM nodes based on the id attribute of the HTML tag, please use the getElementById() method. This method returns a node object.
Syntax:
document.getElementById(id)
Among them, id is the id attribute of the HTML tag.
For example, the statement to obtain the node with id="demo" is:
The return value of this statement is [object HTMLDivElement] (element node object).
For example, get several typical element nodes:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML DOM树型结构图</title>
<div id="demo_div">我是<div>标签</div>
<p id="demo_p">我是<P>标签</p>
<h5 id="demo_h5">我是<h5>标签</h5>
<script type="text/javascript">
function getNode(ele){
alert(
"获取到的元素节点："+ele+"\n"+
"id属性："+ele.getAttribute("id")+"\n"+
"节点类型："+ele.nodeType+"\n"+
"文本内容："+ele.firstChild.nodeValue
);
}
document.getElementById("demo_div").onclick=function(){
getNode(this); // this 指向当前发生鼠标单击事件的节点
}
document.getElementById("demo_p").onclick=function(){
getNode(this); // this 指向当前发生鼠标单击事件的节点
}
document.getElementById("demo_h5").onclick=function(){
getNode(this); // this 指向当前发生鼠标单击事件的节点
}
</script>
</head>
<body>
</body>
</html>Please see the following demonstration
getElementsByTagName( ) method
To obtain DOM nodes based on HTML tag names, please use the getElementsByTagName( ) method . This method returns the obtained element node as an array.
Syntax:
nodeObject.getElementsByTagName(tagName)
Among them, nodeObject is the element node and tagName is the name of the HTML tag.
Note: The getElementsByTagName() method can not only search all nodes in the entire HTML document, but also search the child nodes of a certain node. When using it, you must specify the search range, that is, specify nodeObject.
For example, to get all the <div> tags in the HTML document:
document.getElementsByTagName("div");
Get all the < inside the tag with id="demo" ;div> tag:
document.getElementById("demo").getElementsByTagName("div");
For example, count the number of all <div> tags and display their Text:
<div id="demo2"> <div>我是第 1 个<div>标签</div> <div>我是第 2 个<div>标签</div> <div>我是第 3 个<div>标签</div> <div>我是第 4 个<div>标签 <div>我是第 5 个<div>标签</div> <div>我是第 6 个<div>标签</div> </div> </div>
<script type="text/javascript">
// 使用 getElementsByTagName() 方法获得 id="demo2" 的标签内部的所有 <div> 标签
var nodeArr=document.getElementById("demo2").getElementsByTagName("div");
var len=nodeArr.length;
var nodeStr="";
for(i=0;i<len;i++){
nodeStr+="第 "+(i+1)+" 个节点的文本是："+nodeArr[i].firstChild.nodeValue+"\n";
}
document.getElementById("demo2").onclick=function(){
alert(
"节点个数："+len+"\n\n"+
"节点文本：\n"+nodeStr
);
}
</script>Note:
getElementById() is a method of document (root node), other element nodes cannot use this method. Because the id attribute is unique in the entire HTML document, it must be searched starting from the root node.
getElementsByTagName() is a method of all element nodes, not only the document (root node) can be used, but other nodes can also be used. Therefore, to obtain DOM nodes based on HTML tag names, you can not only search from the document (root node), but also from any other element node.
Next Section