DOMHTML


HTML DOM permet à JavaScript de modifier le contenu des éléments HTML.

Modifier le flux de sortie HTML

JavaScript peut créer du contenu HTML dynamique :

La date d'aujourd'hui est :

Mardi 18 octobre 2016 09:59:23 GMT+0800


En JavaScript, document.write() peut être utilisé pour écrire du contenu directement au flux de sortie HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

lamp绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

Modifier le contenu HTML

Le moyen le plus simple de modifier le contenu HTML est d'utiliser la propriété innerHTML.

Pour modifier le contenu d'un élément HTML, utilisez cette syntaxe :

document.getElementById(id).innerHTML=new HTML

Cet exemple modifie le contenu de l'élément <p> :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

</body>
</html>

Exécuter Exemple»

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

Cet exemple modifie le contenu de l'élément <h1> >Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Explication de l'instance :

Le document HTML ci-dessus contient l'élément <h1> avec id="header"

    • Nous utilisons le DOM HTML pour obtenir l'élément avec id="header"

    • JavaScript Changer le contenu de cet élément (innerHTML)


    • Modifier les attributs HTML
Pour modifier les attributs d'un élément HTML, utilisez cette syntaxe :

document.getElementById(

id
).
attribut=nouvelle valeur d'attribut Cet exemple modifie l'attribut src de l'élément <img> :

Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<img id="image" src="/upload/course/000/000/009/580469a2a27e3327.gif" width="160" height="120">
<script>
document.getElementById("image").src="/upload/course/000/000/009/58058303e12c0481.jpg";
</script>
<p>原图片为 /upload/course/000/000/009/580469a2a27e3327.gif,脚本将图片修改为/upload/course/000/000/009/58058303e12c0481.jpg</p>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

Explication de l'instance :

Le document HTML ci-dessus contient id= L'élément <img> de "image"

  • Nous utilisons HTML DOM pour obtenir l'élément avec id=" image"

  • JavaScript pour modifier les attributs de cet élément (remplacez "/upload/course/000/000/009/58058303e12c0481.jpg" par "/upload/course/000/000/009 /580469a2a27e3327.gif
    • ")