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>

Copier après la connexion

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>

Copier après la connexion

css/Object_CSS.css

.p{
    background-color: blueviolet;
    height: 200px;
    width: 300px;
}

Copier après la connexion

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>

Copier après la connexion

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!