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="ipnx.cn">Javascript DOM</a></h2>
<p id="sp">php中文網(wǎng)</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中文網(wǎng)</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中文網(wǎng)</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中文網(wǎng)</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中文網(wǎng)</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var sum=document.getElementsByTagName("li");
//alert(sum); //返回一個數(shù)組集合
//alert(sum.length);//返回數(shù)組數(shù)量
//alert(sum[0]); //返回HTMLLIElement li的節(jié)點對象
//alert(sum.item(0)); //同上，意義一樣
//alert(sum[0].tagName); //返回第一個標簽的名字
alert(sum[0].innerHTML); //顯示第一個標簽的內(nèi)容
</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中文網(wǎng)</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 中文網(wǎng)</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 中文網(wǎng)</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 中文網(wǎng)</div>
<script type="text/javascript">
var sum=document.getElementsByClassName("dv")[0];
alert(sum);
</script>
</body>
</html> 
