Home >Web Front-end >JS Tutorial >How to get dom elements in js? js method to find and get element objects through dom (code example)
How to get dom elements in js? js method to find and get element objects through dom (code example)
- 青灯夜游Original
- 2018-10-11 13:31:564541browse
How to get dom elements in js? This article will introduce to you the method of using JS to find and obtain element objects through DOM, so that you can understand what DOM in JS is and how to find and obtain elements through DOM. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First of all, let’s briefly understand what is dom in js?
dom: HTML DOM, short for Document Object Model. When a web page is loaded, the browser will create the document object model of the page.
Usually, through JavaScript, we need to operate HTML elements. In order to do this, you must first find and obtain the element. Let's introduce three common methods to find and obtain element objects through dom in JavaScript:
1. Find and obtain elements by id: getElementById()
getElementById() method: Get the node element by ID. If the page contains multiple node objects with the same ID, only the first node object will be returned.
Syntax:
document.getElementById("元素的id");Code example: Click on the id="box" box and a pop-up window will appear, displaying the contents of the id="box" box
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="box" onclick="getValue()">我是测试代码</div>
<script>
function getValue(){
var x=document.getElementById("box")
alert(x.innerHTML)
}
</script>
</body>
</html>Rendering:
 "153923382790633How to get dom elements in js? js method to find and get element objects through dom (code example)")
Note: There is no need to add "#" in front of the getElementById() brackets, because the method determines that the value in the brackets is the id of an element. value. This method returns a DOM object.
2. Find and obtain elements by tag name: getElementsByTagName()
getElementsByTagName() method: Find and obtain a set of elements by the tag name of the element Objects (get as many as there are), which returns a collection of objects with the specified tag name.
Grammar:
document.getElementsByClassName("元素的标签名");Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>Effect picture:
 "153923504791804How to get dom elements in js? js method to find and get element objects through dom (code example)")
3. Through class (Class) Find and get elements: getElementsByClassName()
getElementsByClassName() method: Find and get elements through the specified class (class) attribute value, and return the The collection of elements of the class name can be said to be a collection of objects.
Grammar:
document.getElementsByClassName("元素的class");Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="main">
<p class="a">我是测试代码1</p>
<p class="a">我是测试代码2</p>
</div>
<script>
var x = document.getElementById("main");
var y = x.getElementsByClassName("a");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>Rendering:
Summary: The above is this article The entire content, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial!
Related recommendations:
php public welfare training video tutorial
The above is the detailed content of How to get dom elements in js? js method to find and get element objects through dom (code example). For more information, please follow other related articles on the PHP Chinese website!