Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)-js tutoriel-php.cn

Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)

青灯夜游

Libérer： 2018-10-11 13:35:21

original

4501 Les gens l'ont consulté

Comment obtenir des éléments dom en js ? Cet article vous présentera la méthode d'utilisation de JS pour rechercher et obtenir des objets éléments via DOM, afin que vous puissiez comprendre ce qu'est DOM dans JS et comment rechercher et obtenir des éléments via DOM. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, comprenons brièvement Qu'est-ce que dom en js ?

dom : HTML DOM, abréviation de Document Object Model Lorsqu'une page Web est chargée, le navigateur crée le modèle objet de document de la page.

Habituellement, via JavaScript, nous devons manipuler des éléments HTML. Pour ce faire, vous devez d’abord trouver et obtenir l’élément. Présentons trois façons courantes de rechercher et d'obtenir l'objet élément via dom en JavaScript :

1 Recherchez et obtenez l'élément par identifiant : getElementById()

Méthode getElementById() : récupère l'élément nœud par ID. Si la page contient plusieurs objets nœud avec le même ID, seul le premier objet nœud sera renvoyé.

Syntaxe :

document.getElementById("元素的id");

Copier après la connexion

Exemple de code : Cliquez sur la case id="box" et une fenêtre pop-up apparaîtra, affichant le contenu de la case id="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>

Copier après la connexion

Rendu :

Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)

Remarque : Il n'est pas nécessaire d'ajouter "#" devant les parenthèses getElementById(), car le La méthode détermine la valeur entre parenthèses. La valeur id d'un élément. Cette méthode renvoie un objet DOM.

2. Rechercher et obtenir des éléments par nom de balise : getElementsByTagName()

Méthode getElementsByTagName() : Rechercher et obtenir un ensemble d'éléments par le nom de balise de l'élément. Objets (en obtenir autant qu'il y en a), qui renvoie une collection d'objets avec le nom de balise spécifié.

Syntaxe :

document.getElementsByClassName("元素的标签名");

Copier après la connexion

Exemple de code :

<!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(&#39;id 为 "main" 的 div 中的第一段文本是：&#39; + y[0].innerHTML);
</script>

</body>
</html>

Copier après la connexion

Rendu :

Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)

3 . Rechercher et obtenir des éléments via la classe : méthode getElementsByClassName()

getElementsByClassName() : recherche et obtient des éléments via la valeur d'attribut de classe spécifiée et renvoie Il s'agit d'une collection d'éléments avec un nom de classe spécifié. On peut dire que c'est une collection d'objets.

Syntaxe :

document.getElementsByClassName("元素的class");

Copier après la connexion

Exemple de code :

<!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(&#39;id 为 "main" 的 div 中的第一段文本是：&#39; + y[0].innerHTML);
		</script>
	</body>
</html>

Copier après la connexion

Rendu :

Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)

Résumé : Ci-dessus, c'est tout le contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique JavaScript

Manuel JavaScript en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!