1.Dom: le modèle d'objet de document DOM (modèle d'objet de document) définit les méthodes standard pour accéder et traitement des documents HTML. Dom rend les documents HTML en tant que structure d'arbre (arbre de nœud) avec des éléments, des attributs et du texte.
2. Certaines propriétés couramment utilisées de DOM
2.1 Obtenez des éléments par ID
(1) Syntaxe:
La copie de code est la suivante:
document.getElementById ("id");
(2) Fonction: ID fait référence à la carte d'identité d'une personne. Nous pouvons trouver la balise en recherchant l'ID de balise, puis effectuer des opérations correspondantes.
(3) Remarque: n'oubliez pas d'écrire un document!
2.2 Attributs innerhtml
(1) Syntaxe:
La copie de code est la suivante:
Obgect.innerhtml = "Hello World"
(2) Fonction: principalement pour obtenir ou remplacer le contenu dans la balise
(3) Exemple:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> innerhtml </Title>
</ head>
<body>
<h2 id = "con"> javascript </h2>
<p> JavaScript est un langage de script simple basé sur l'objet et les événements pilotés. Il est intégré dans des documents HTML et est interprété et exécuté par le navigateur, créant un effet d'affichage dynamique sur la page Web et implémentant les fonctions d'interaction utilisateur. </p>
<script type = "text / javascript">
var mychar = document.getElementById ("con");
Document.Write ("Titre original:" + mychar.innerhtml + "<br>"); // Sortie du contenu de la balise H2 d'origine
mychar.innerhtml = "Hello World!";
Document.Write ("Titre modifié:" + mychar.innerhtml); // Sortie du contenu de la balise H2 modifiée
</cript>
</docy>
</html>
(4) Remarque: L'objet est l'élément objet obtenu, tel que l'élément obtenu via document.getElementById ("id").
2.3 Changer le style HTML
(1) Syntaxe:
La copie de code est la suivante:
Object.style.property
(2) Fonction: utilisée pour modifier le style HTML
(3) Exemple:
La copie de code est la suivante:
<body>
<h2 id = "con"> J'adore JavaScript </h2>
<p> javascript permet aux pages Web d'afficher les effets dynamiques et implémente les fonctions d'interaction utilisateur. </p>
<script type = "text / javascript">
var mychar = document.getElementById ("con");
mychar.style.color = "red";
mychar.style.backgroundcolor = "# ccc";
mychar.style.width = "300px";
</cript>
</docy>
(4) Remarque: La propriété a de nombreux styles, tels que la couleur, la hauteur, etc., qui peuvent être modifiés à l'aide de cette méthode. N'oubliez pas d'ajouter un point-virgule aux propriétés après eux.
2.4 Afficher et masquer (attribut d'affichage)
(1) Syntaxe:
Object.style.display = valeur
(2) Fonction: l'affichage et la cachette sont souvent visibles sur les pages Web, qui sont réalisées en utilisant l'attribut d'affichage.
(3) Exemple:
La copie de code est la suivante:
<script type = "text / javascript">
fonction Hiddentext ()
{
var mychar = document.getElementById ("con");
mychar.style.display = "aucun";
}
fonction showText ()
{
var mychar = document.getElementById ("con");
mychar.style.display = "bloc";
}
</cript>
(4) Remarque: La valeur de la valeur n'est pas et le bloc, où aucune n'est affichée, et le bloc est affiché.
2.5 ClassName Attribut
(1) Syntaxe:
La copie de code est la suivante:
Object.classname = className
(2) Fonction: 1. Obtenez l'attribut de classe de l'élément; 2. Spécifiez un style CSS pour un élément de la page Web pour modifier l'apparence de l'élément.
(3) Exemple:
La copie de code est la suivante:
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
<Title> ClassName Attribut </Title>
<style>
corps {taille de police: 16px;}
.un{
Border: 1px solide #eee;
Largeur: 230px;
hauteur: 50px;
Contexte: #ccc;
Couleur: rouge;
}
.deux{
Border: 1px solide #ccc;
Largeur: 230px;
hauteur: 50px;
Contexte: # 9CF;
Couleur: bleu;
}
</ style>
</ head>
<body>
<p id = "p1"> javascript permet aux pages Web d'afficher les effets dynamiques et implémente les fonctions d'interaction utilisateur. </p>
<input type = "bouton" value = "add style" onclick = "add ()" />
<p id = "p2"> JavaScript permet aux pages Web d'afficher les effets dynamiques et implémente les fonctions d'interaction utilisateur. </p>
<input type = "Button" value = "modifier l'apparence" onclick = "modify ()" />
<script type = "text / javascript">
fonction add () {
var p1 = document.getElementById ("p1");
p1.classname = "One";
}
fonction modify () {
var p2 = document.getElementById ("p2");
p2.className = "Two";
}
</cript>
</docy>
Ce qui précède est tout sur cet article, j'espère que vous l'aimez.