Maison >interface Web >js tutoriel >Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)
Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)
- 青灯夜游original
- 2018-10-11 13:31:564556parcourir
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");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>Rendu :
 "153923382790633Comment obtenir des éléments dom en js ? méthode js pour rechercher et obtenir des objets élément via dom (exemple de code)")
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("元素的标签名");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('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>Rendu :
 "153923504791804Comment 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"); 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('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html> Rendu :
Tutoriel vidéo JavaScript !
Recommandations associées :Tutoriel vidéo de formation sur le bien-être public php
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!