Maison > Article > interface Web > Analyse des objets DOM en JavaScript
Analyse des objets DOM en JavaScript
- 不言original
- 2018-07-14 16:21:091321parcourir
1. Introduction au DOM
Lorsqu'une page Web est chargée, le navigateur créera le modèle objet de document de la page, c'est-à-dire , DOM (Modèle Objet de Document) ).
2.Opération DOM HTML
2.1 Modifier le flux de sortie HTML
N'utilisez pas document.write() une fois le chargement du document terminé. Écrasera le document
2.2 Rechercher un élément
Rechercher un élément HTML
par id Via la balise Rechercher l'élément HTML
2.3 Modifier le contenu HTML
Utiliser les attributs : innerHTML
2.4 Modifier Attribut HTML
Utiliser les attributs : attribut
Object_HTML.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--修改-->
<p id="pid">Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo(){ var nv=document.getElementById("pid");
nv.innerHTML="World";
document.getElementsByName("p");//p如果相同，相同元素的第一个 } </script>
<!--修改属性-->
<br />
<a id="aid" href="http://www.baidu.com">百度</a>
<button onclick="demobd()">跳转</button>
<script>
function demobd(){
document.getElementById("aid").href="index.html";
} </script>
<br />
<img id="iid" src="img/294224.jpg" height="200" width="300"/>
<button onclick="demoimg()">切换</button>
<script>
function demoimg(){
document.getElementById("iid").src="img/308048.jpg";
} </script>
</body></html>
3.Opération DOM CSS
Modification du CSS via les objets DOM
Syntaxe：document.getElementById(id).style.property=new style
Object_CSS.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/Object_CSS.css" />
</head>
<body>
<p id="p" class="p">
hello </p>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("p").style.background="blue";
document.getElementById("p").style.color="white";
} </script>
</body></html>css/Object_CSS.css
.p{
background-color: blueviolet;
height: 200px;
width: 300px;
}4.DOM EventListener
4.1 DOM EventListener
Méthode : addEventListener()
removeEventListener()
4.2 addEventListener()
La méthode est utilisée pour spécifier l'élément à ajouter handle
4.3 RemoveEventListener()
La méthode Remove ajoute un handle
EventListener.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){
alert("hello");
}); </script>
<button id="btnjb">句柄</button>
<script>
var x=document.getElementById("btnjb");
x.addEventListener("click",hello);
x.addEventListener("click",world);
x.removeEventListener("click",hello); function hello(){
alert("hello");
} function world(){
alert("world");
} </script>
</body></html> Ce qui précède est l'article de cet article. Tout le contenu, j'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! Recommandations associées :
Analyse des objets intégrés de jsCode de
Personnalisé dans js Parsing d'objets
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!