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? 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

	
		
	
	
		
我是测试代码
		
	

Rendering:

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:

Hello World!


     
The DOM is very useful.
     
本例演示 getElementsByTagName 方法。

Effect picture:

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:

	
		
	
	
		

			
我是测试代码1
			
我是测试代码2
		
		
	

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

JavaScript graphic tutorial

JavaScriptOnline Manual

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!