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>section suivante