JavaScript HTML DOM
JavaScript HTML DOM
Grâce au HTML DOM, tous les éléments d'un document HTML JavaScript sont accessibles.
HTML DOM (Document Object Model)
Lorsqu'une page Web est chargée, le navigateur crée le modèle d'objet de document de la page.
Grâce au modèle objet programmable, JavaScript gagne suffisamment de puissance pour créer du HTML dynamique.
JavaScript peut modifier tous les éléments HTML de la page
JavaScript peut modifier tous les attributs HTML de la page
JavaScript peut modifier tous les styles CSS de la page
JavaScript est capable de réagir à tous les événements de la page
Trouver des éléments HTML
Habituellement, avec JavaScript, vous devez manipuler des éléments HTML.
Pour ce faire, vous devez d'abord trouver l'élément. Il existe trois façons de procéder :
Rechercher l'élément HTML par identifiant
Rechercher l'élément HTML par nom de balise
Rechercher l'élément HTML par nom de classe
Recherche d'éléments HTML par identifiant
Le moyen le plus simple de rechercher des éléments HTML dans le DOM consiste à utiliser l'identifiant de l'élément.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
</body>
</html>Si l'élément est trouvé, cette méthode renvoie l'élément sous forme d'objet (dans x ).
Si l'élément n'est pas trouvé, x contiendra null.
Rechercher des éléments HTML par nom de balise
Cet exemple recherche l'élément avec id="main", puis trouve tous les éléments <p> dans l'élément avec id="main":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
</html> Rechercher des éléments HTML par nom de classe
Cet exemple utilise la fonction getElementsByClassName pour rechercher des éléments avec class="intro":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>
