Tutoriel de base Javascript : comment obtenir des éléments HTML

Obtenir l'élément HTML par ID

document.getElementById()

Exemple :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementById</title>	
</head>
<body>
	<h2><a href="www.php.cn">Javascript DOM</a></h2>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById('sp');
		document.write(sum);
	</script>
</body>
</html>

Veuillez noter que si nous mettons l'instruction de script dans la balise head, alors nous afficherons null

Ensuite, ci-dessous, nous examinerons un innerHTML pour obtenir le contenu du élément html

Écrivons un exemple ci-dessous :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		alert(sum.innerHTML);
	</script>
</body>
</html>

De cette façon, nous allons générer un site Web chinois php, puis exécuter le code js, puis afficher le site Web chinois php

On peut aussi réattribuer la somme, le code est le suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		sum.innerHTML="玩转javascript";
		alert(sum.innerHTML);
	</script>
</body>
</html>

Amis, ouvrez la page de débogage de Firebug, vous pouvez appuyer sur la touche de raccourci F12

Rechercher des éléments HTML par nom de balise

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementsByTagName("p");
		document.write(sum);
	</script>
</body>
</html>

renvoie une collection de tableaux, voir le code suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("li");
		//alert(sum);  //返回一个数组集合
		//alert(sum.length);//返回数组数量
		//alert(sum[0]);  //返回HTMLLIElement  li的节点对象
		//alert(sum.item(0)); //同上，意义一样
		//alert(sum[0].tagName);  //返回第一个标签的名字
		alert(sum[0].innerHTML);  //显示第一个标签的内容
	</script>
</body>
</html>

Regardons ce qui suit, comment obtenir l'objet nœud corps, mais en html, nous n'avons qu'une seule paire de corps, et il n'y a pas de deuxième paire de corps

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("body")[0];
		alert(sum);
	</script>
</body>
</html>

getElementsByName

Obtenir des éléments du même nom et renvoyer un tableau d'objets

Ce qui suit code :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByName("test")[0];
		alert(sum);
	</script>
</body>
</html>

Notez la différence entre IE Firefox et Google Chrome. Firefox et Google le prennent en charge. L'attribut name dans le navigateur IE n'est pas un attribut de div lui-même, donc IE l'ignore généralement. lorsque nous appliquons un nom à un formulaire, Plus

getElementsByClassName

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv");
		alert(sum);
	</script>
</body>
</html>

renvoie un objet :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv")[0];
		alert(sum);
	</script>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>getElementById</title> </head> <body> <h2><a href="www.php.cn">Javascript DOM</a></h2> <p id="sp">php中文网</p> <script type="text/javascript"> var sum = document.getElementById('sp'); document.write(sum); </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Tutoriel de base Javascript : comment obtenir des éléments HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]