Maison > interface Web > js tutoriel > le corps du texte

Analyse des objets DOM en JavaScript

不言
Libérer: 2018-07-14 16:21:09
original
1351 Les gens l'ont consulté

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!