Maison > Article > interface Web > Partage de connaissances sur l'API JavaScript DOM

Partage de connaissances sur l'API JavaScript DOM

WBOYavant: 2022-06-29 15:10:352128parcourir

Cet article vous apporte des connaissances pertinentes sur javascript. Il organise principalement les problèmes liés à la connaissance de l'API DOM, notamment la sélection des balises de page, l'exploitation des attributs de balise de page, etc.

[Recommandations associées : Tutoriel vidéo javascript, front-end web]

Partage de connaissances sur lAPI JavaScript DOM.Partage des connaissances de l'API DOMde connaissances sur lAPI JavaScript DOM>Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM Sélectionnez la balise de pagede connaissances sur lAPI JavaScript DOM>

Dans le DOM, l'objet global de la page du document, les fonctions querySelector et querySelectorAll sont utilisés pour sélectionner des éléments en passant un sélecteur CSS. La plage de sélection est le sélecteur qui existe avant la fonction. Si elle n'est pas trouvée, la valeur de retour est null.

let obj = document.querySelector("选择器");

Partage de connaissances sur lAPI JavaScript DOM

S'il y a plusieurs balises sélectionnées sur la page, seule la balise qui apparaît sur la page pour la première fois sera sélectionnée.

Partage de connaissances sur lAPI JavaScript DOM
Si vous souhaitez sélectionner tous ces éléments, vous devez utiliser la fonction querySelectorAll.

L'utilisation est la même que celle de querySelector.

let var_name = document.querySelectorAll("选择器");

Cette fonction renverra un objet similaire à un tableau. L'utilisation est exactement la même qu'un tableau, mais en plus, des paires clé-valeur peuvent être ajoutées.
Partage de connaissances sur lAPI JavaScript DOM
Développez les éléments du tableau et vous trouverez de nombreux attributs, qui sont tous des attributs natifs du DOM.

Partage de connaissances sur lAPI JavaScript DOM

Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM Manipuler les propriétés des balises de pagede connaissances sur lAPI JavaScript DOM>Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM Événementsde connaissances sur lAPI JavaScript DOM>

De nombreux codes JS sont déclenchés par des "événements", tels que le mouvement de la souris, le défilement de la souris, la saisie au clavier, la modification de la taille du navigateur, etc.

Trois éléments d'un événement :

Source de l'événement, quel élément HTML a généré l'événement.
Types d'événements, tels que mouvement de la souris, clic de souris, changement de taille de fenêtre, etc.
Méthode de gestion des événements, quel code js doit être exécuté lorsque l'événement se produit.

Par exemple, cliquez sur le code d'opération d'événement :

let button = document.querySelector("button");button.onclick = function (){
    alert("嘻嘻嘻！");}

Effet marron et courant :
Partage de connaissances sur lAPI JavaScript DOM

L'image montre une manière d'écrire équivalente, mais la manière d'écrire équivalente rendra la structure du code HTML plus complexe, donc c'est plus compliqué. Suggérez la première façon d'écrire dans l'image.

Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM Obtenir la classification de l'élément de connaissances sur lAPI JavaScript DOM>

L'élément d'opération :

Le contenu de l'élément.
Attributs des éléments.
Le style de l'élément.

Tout d'abord, pour manipuler le contenu d'un élément, vous pouvez utiliser l'attribut innerHTML pour récupérer le contenu à l'intérieur d'une balise.

//Partage de connaissances sur lAPI JavaScript DOM.选中标签let var_name = document.querySelector();//Partage de connaissances sur lAPI JavaScript DOM.获取内容let content = var_name.innnerHTML;//Partage de connaissances sur lAPI JavaScript DOM.修改内容var_name.innerHTML = 修改内容;

Chestnut :

Partage de connaissances sur lAPI JavaScript DOM
Effet :

Nous avons constaté que les mêmes éléments sont tous réduits et affichés. Nous pouvons cliquer sur la barre de paramètres des outils de développement pour définir la sortie étendue.

Partage de connaissances sur lAPI JavaScript DOM
Ce que nous avons placé dans l'étiquette sélectionnée ci-dessus est du texte. Et si ce n'était pas du texte ? En fait, c'est pareil en supposant qu'une balise list soit placée à l'intérieur, le résultat obtenu est le code HTML de la balise à l'intérieur.
Partage de connaissances sur lAPI JavaScript DOM

Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM Modifier des élémentsde connaissances sur lAPI JavaScript DOM>

Nous pouvons également modifier le contenu du HTML, comme changer une liste en titre.

Partage de connaissances sur lAPI JavaScript DOM
Effet :

Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM Compteurde connaissances sur lAPI JavaScript DOM>

Basé sur la connaissance de l'obtention et de la modification d'éléments, nous pouvons implémenter un compteur simple. L'idée de base est :

获取元素内容
修改元素内容（加一操作）
写回到元素里面

Partage de connaissances sur lAPI JavaScript DOM：

欸，好像与我们的预期有点不一致，原因就是修改元素内容时，拿到的内容是字符串类型的，发生的是拼接Partage de connaissances sur lAPI JavaScript DOM，而不是算术Partage de connaissances sur lAPI JavaScript DOM，所以我们需要进行转换，那如何转换？我们可以使用与java非常类似且同名的一个方法，它就是parseInt，同理如果需要小数那就有parseFloat，注意这里没有parseDouble方法哦！

Partage de connaissances sur lAPI JavaScript DOM：

我们来丰富一下，加一个按钮，可以完成减的功能。

页面Partage de connaissances sur lAPI JavaScript DOM：

    <style>
        #screen{
            width: 88px;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            text-align: center;
            line-height: Partage de connaissances sur lAPI JavaScript DOM0px;
            border-radius: Partage de connaissances sur lAPI JavaScript DOMpx;

            background-color: rgb(Partage de connaissances sur lAPI JavaScript DOM00, Partage de connaissances sur lAPI JavaScript DOM00, Partage de connaissances sur lAPI JavaScript DOM00);
        }
        #plus, #sub{
            width: Partage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOMpx;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            border-radius: Partage de connaissances sur lAPI JavaScript DOM0px;
            margin-top: Partage de connaissances sur lAPI JavaScript DOMpx;
            border: 0px;

            background-color: rgb(Partage de connaissances sur lAPI JavaScript DOM80, Partage de connaissances sur lAPI JavaScript DOM00, Partage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOM);
        }
    </style>
    <p>
        0    </p>
    <button>计数+Partage de connaissances sur lAPI JavaScript DOM</button>
    <button>计数-Partage de connaissances sur lAPI JavaScript DOM</button>

    <script>

    </script>

JavaScriptPartage de connaissances sur lAPI JavaScript DOM：

let plus = document.querySelector("#plus");let sub = document.querySelector("#sub");let plus_func = function() {
    //Partage de connaissances sur lAPI JavaScript DOM.获取值
    let add_btn = document.querySelector("#screen");
    let val = add_btn.innerHTML;
    val = parseInt(val);
    //Partage de connaissances sur lAPI JavaScript DOM.+Partage de connaissances sur lAPI JavaScript DOM
    val = val + Partage de connaissances sur lAPI JavaScript DOM;
    //Partage de connaissances sur lAPI JavaScript DOM.写回
    add_btn.innerHTML = val;}let sub_func = function() {
    //Partage de connaissances sur lAPI JavaScript DOM.获取值
    let sub_btn = document.querySelector("#screen");
    let val =sub_btn.innerHTML;
    val = parseInt(val);
    //Partage de connaissances sur lAPI JavaScript DOM.-Partage de connaissances sur lAPI JavaScript DOM
    val = val - Partage de connaissances sur lAPI JavaScript DOM;
    //Partage de connaissances sur lAPI JavaScript DOM.写回
    sub_btn.innerHTML = val;}plus.onclick = plus_func;sub.onclick = sub_func;

Partage de connaissances sur lAPI JavaScript DOM：

Partage de connaissances sur lAPI JavaScript DOM
但是对于但标签是没有innerHTML属性的，比如input标签，虽然不能通过innerHTML获取属性，但是可以通过value属性获取内容。

页面Partage de connaissances sur lAPI JavaScript DOM：

    <input>
    <button>+Partage de connaissances sur lAPI JavaScript DOM</button>

    <script>

    </script>

JavaScriptPartage de connaissances sur lAPI JavaScript DOM:

let add = document.querySelector("#add");add.onclick = function() {
    //Partage de connaissances sur lAPI JavaScript DOM.获取值
    let add_btn = document.querySelector("#in");
    let val = add_btn.value;
    val = parseInt(val);
    //Partage de connaissances sur lAPI JavaScript DOM.+Partage de connaissances sur lAPI JavaScript DOM
    val = val + Partage de connaissances sur lAPI JavaScript DOM;
    //Partage de connaissances sur lAPI JavaScript DOM.写回
    add_btn.value = val;}

Partage de connaissances sur lAPI JavaScript DOM：

Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM点击图片切换de connaissances sur lAPI JavaScript DOM>

我们想实现一个小案例，就是点击一个图片就能切换图片，再点击一次又能够切换回来，我们可以利用DOM来修改元素的属性来实现，在这个案例中，我们只需Partage de connaissances sur lAPI JavaScript DOM点击事件为修改图片的路径，也就是src属性，就可以实现图片的切换。

假设第一张图片的路径是./jee.png，第二张图片的路径是./樱花.png，实现图片切换的基本思路为：

获取img元素。
Partage de connaissances sur lAPI JavaScript DOMonclick。
点击事件的细节就是判断路径是否包含ee，包含就将src属性换成./樱花.png，反过来，判断路径是否包含樱花，包含就将src属性换成./jee.png
可以使用indexOf方法判断是否包含某个字符串。

JavaScriptPartage de connaissances sur lAPI JavaScript DOM：

let img = document.querySelector("img");img.onclick = function() {
    console.log(img.src);
    if (img.src.indexOf("ee") >= 0) {
        img.src = Partage de connaissances sur lAPI JavaScript DOM9;./樱花.pngPartage de connaissances sur lAPI JavaScript DOM9;;
    } else if (img.src.indexOf("樱花")) {
        img.src = Partage de connaissances sur lAPI JavaScript DOM9;./jee.pngPartage de connaissances sur lAPI JavaScript DOM9;
    }}

页面Partage de connaissances sur lAPI JavaScript DOM：

    <style>
        img {
            height: Partage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOM0px;
        }
    </style>
    <img  alt="Partage de connaissances sur l'API JavaScript DOM" >

    <script>

    </script>

Partage de connaissances sur lAPI JavaScript DOM：
jsPartage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOM
具体哪些属性可以修改，我们可以使用console.dir函数来获取某个元素DOM API能够操作的全部属性。

Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.6暂停/播放切换de connaissances sur lAPI JavaScript DOM>

实现一个按钮，点击之后按钮文字从"播放"变为"暂停"，再点击一次，按钮文字从"暂停"变为"播放"。

实现逻辑和切换逻辑是差不多的，具体看Partage de connaissances sur lAPI JavaScript DOM吧：

JavaScriptPartage de connaissances sur lAPI JavaScript DOM：

let play = document.querySelector("#play");play.onclick = function(){
    if (play.value == "播放") {
        play.value = "暂停";
    } else if (play.value = "暂停") {
        play.value = "播放";
    }}

页面Partage de connaissances sur lAPI JavaScript DOM：

    <input>

实现Partage de connaissances sur lAPI JavaScript DOM：

Partage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOM

Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.7全选/取消全选de connaissances sur lAPI JavaScript DOM>

首先我们需要创建若干个复选框，只有一个全选框，我们选中全选框，其他元素需要被全部选中，一旦其他元素有未选中的，全选也必须是未选中的。

实现的基本思路：

获取全选框元素，获取其他元素。
注册全选框的点击事件，检查其他框是否都被选中，如果选中，则全选框也选中，否则全选框不选中。
对每一个其他复选框Partage de connaissances sur lAPI JavaScript DOM点击事件，并将状态与全选复选框关联。
每次点击其他框都要检测其他框是否都选中，以确定全选框的状态。

JavaScriptPartage de connaissances sur lAPI JavaScript DOM：

let all = document.querySelector("#all");let gameroles = document.querySelectorAll(".gamerole");//checked属性为checked表示选中状态，为空字符串表示未选中//Partage de connaissances sur lAPI JavaScript DOMall的点击事件all.onclick = function() {
    for (let i = 0; i 页面Partage de connaissances sur lAPI JavaScript DOM：
    <input>全选 

    <input>胡桃 

    <input>可莉 

    <input>万叶 

    <input>心海 

    <input>锅巴 
实际Partage de connaissances sur lAPI JavaScript DOM：
Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.8点击文字放大de connaissances sur lAPI JavaScript DOM>DOM还可以修改style属性，下面来尝试运用选中元素与修改元素的知识，来实现点击文字放大的一个小案例。
因为CSS中不区分大小写，属性与变量的命名采用脊柱式命名，而JS中-不能用于变量的命名，为了能够将CSS属性与JS变量名匹配，JS使用驼峰的形式表示CSS的属性，例如font-size属性，对应JS的变量名为fontSize。
对于文字的放大，我们可以给文本所在的标签注册一个点击事件，每点击一次就将字体大小增大，即修改CSS的font-size属性。
JavaScriptPartage de connaissances sur lAPI JavaScript DOM：
let p = document.querySelector("p");p.onclick = function() {
    //Partage de connaissances sur lAPI JavaScript DOM.获取文字大小属性
    let wordsSize = parseInt(p.style.fontSize);
    console.log("修改前" + wordsSize);
    //Partage de connaissances sur lAPI JavaScript DOM.修改文字大小
    wordsSize += Partage de connaissances sur lAPI JavaScript DOM;
    //Partage de connaissances sur lAPI JavaScript DOM.写回到属性
    p.style.fontSize = wordsSize + "px";
    console.log("修改后" + wordsSize);}
页面Partage de connaissances sur lAPI JavaScript DOM：
    <p de connaissances sur lapi javascript dom0px>
        我是一段文本    </p>
实现Partage de connaissances sur lAPI JavaScript DOM：
Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.9实现关灯/开灯（夜间/白间模式切换）de connaissances sur lAPI JavaScript DOM>很多情况下一个个修改样式属性太麻烦了，我们也可以直接修改类属性来达到Partage de connaissances sur lAPI JavaScript DOM，可以通过选中元素变量名.className来获取和修改类属性。
由于JavaScript里面的class是一个关键字，因此获取元素的class不能使用class，而需要使用className，多个class属性可以使用classList。
JavaScriptPartage de connaissances sur lAPI JavaScript DOM：
let p = document.querySelector(Partage de connaissances sur lAPI JavaScript DOM9;pPartage de connaissances sur lAPI JavaScript DOM9;);let button = document.querySelector(Partage de connaissances sur lAPI JavaScript DOM9;buttonPartage de connaissances sur lAPI JavaScript DOM9;);button.onclick = function(){
    if (p.className == "light") {
        p.className = Partage de connaissances sur lAPI JavaScript DOM9;blackPartage de connaissances sur lAPI JavaScript DOM9;;
        button.innerHTML = Partage de connaissances sur lAPI JavaScript DOM9;开灯Partage de connaissances sur lAPI JavaScript DOM9;;
    } else if (p.className == Partage de connaissances sur lAPI JavaScript DOM9;blackPartage de connaissances sur lAPI JavaScript DOM9;) {
        p.className = Partage de connaissances sur lAPI JavaScript DOM9;lightPartage de connaissances sur lAPI JavaScript DOM9;;
        button.innerHTML = Partage de connaissances sur lAPI JavaScript DOM9;关灯Partage de connaissances sur lAPI JavaScript DOM9;;
    }}
页面Partage de connaissances sur lAPI JavaScript DOM：
    <style>        
        p{
            width: Partage de connaissances sur lAPI JavaScript DOM00px;
            text-align: center;
        }
        .light, .black{
            width: Partage de connaissances sur lAPI JavaScript DOM00px;
            height: Partage de connaissances sur lAPI JavaScript DOM00px;

            text-align: center;
            line-height: Partage de connaissances sur lAPI JavaScript DOM00px;
            font-size: Partage de connaissances sur lAPI JavaScript DOM0px;
        }

        button{
            width: Partage de connaissances sur lAPI JavaScript DOM00px;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            font-size: Partage de connaissances sur lAPI JavaScript DOM0px;
            background-color: rgb(Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOM00);
            border: 0cm;
            border-radius: Partage de connaissances sur lAPI JavaScript DOM0px;
        }
        .light{
            background-color: aliceblue;
            color: black;
        }
        .black{
            background-color: black;
            color: aliceblue;
        }
    </style>
    <p>我是一段文本</p>
    <p>
        <button>关灯</button>
    </p>
实际Partage de connaissances sur lAPI JavaScript DOM：
Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM操作页面结点de connaissances sur lAPI JavaScript DOM>Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM新增结点de connaissances sur lAPI JavaScript DOM>除了修改元素的属性和内容，我们还可以在页面上添加元素，要添加元素，那就得先新建一个元素，并且还需要依赖一个父元素（已经创建好的），把这个新建的元素插入到父元素中就能实现元素的添加（依赖与DOM树），这个操作也被称为新增页面结点。
 新建元素：
let newp = document.createElement("元素标签");
补充元素内容：
newp.属性 = 值;
插入到DOM树:
选中的父元素.appendChild(创建的子元素);
实例：
 JavaScriptPartage de connaissances sur lAPI JavaScript DOM：
let cnt = Partage de connaissances sur lAPI JavaScript DOM;let add = document.querySelector("#add");let parent = document.querySelector("#container");add.onclick = function() {
    let newp = document.createElement("p");
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}
页面Partage de connaissances sur lAPI JavaScript DOM：
    <p></p>
    <button>新增节点</button>
实际Partage de connaissances sur lAPI JavaScript DOM：
Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM删除结点de connaissances sur lAPI JavaScript DOM>删除结点就更容易了，在DOM树上删除结点就行。
删除结点：
获取到的父元素.removeChild(需要删除的子元素);
实例：
 JavaScriptPartage de connaissances sur lAPI JavaScript DOM：
let cnt = Partage de connaissances sur lAPI JavaScript DOM;let add = document.querySelector("#add");let parent = document.querySelector("#container");let arr = [];add.onclick = function() {
    let newp = document.createElement("p");
    arr[cnt-Partage de connaissances sur lAPI JavaScript DOM] = newp;
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}let del = document.querySelector("#del");del.onclick = function() {
    cnt--;
    if (cnt > 0) {
        console.log( "成功删除一个元素");
        parent.removeChild(arr[cnt-Partage de connaissances sur lAPI JavaScript DOM]);
    } else {
        console.log( "该父元素已经没有元素可以删除了");
        cnt++;
    }}
页面Partage de connaissances sur lAPI JavaScript DOM：
    <p></p>
    <button>新增节点</button>
    
实际Partage de connaissances sur lAPI JavaScript DOM：
Partage de connaissances sur lAPI JavaScript DOM.综合案例de connaissances sur lAPI JavaScript DOM>Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOM猜数字de connaissances sur lAPI JavaScript DOM>目标页面
猜数字的逻辑我就不赘述了，不过里面需要取随机数，我们可以通过js中的Math.random()函数来获取随机数，该函数生成随机数的范围是[0,Partage de connaissances sur lAPI JavaScript DOM)区间内的一个小数，我们需要的是[Partage de connaissances sur lAPI JavaScript DOM,Partage de connaissances sur lAPI JavaScript DOM00]之间的整数，我们可以乘上Partage de connaissances sur lAPI JavaScript DOM00后向下取整加一就能得到目标区间的数了，实现向下取整的函数是Math.floor(数字)。
然后前端页面部分是通过HTML加上CSS弹性布局实现的，交互通过JavaScript DOM实现，下面的Partage de connaissances sur lAPI JavaScript DOM案例也是一样的，就不多说了。
JavaScriptPartage de connaissances sur lAPI JavaScript DOM：
//获取元素let input = document.querySelector("#guess");let ret = document.querySelector("#result");let cnt = document.querySelector("#count");let guessBtn = document.querySelector("#bPartage de connaissances sur lAPI JavaScript DOM");let flash = document.querySelector("#bPartage de connaissances sur lAPI JavaScript DOM");//生成Partage de connaissances sur lAPI JavaScript DOM-Partage de connaissances sur lAPI JavaScript DOM00的随机数//floor表示只取浮点数整数部分let ansNumber = Math.floor(Math.random() * Partage de connaissances sur lAPI JavaScript DOM00) + Partage de connaissances sur lAPI JavaScript DOM;//实现按钮猜数字的点击事件guessBtn.onclick = function(){
    //输入框没有值，表示用户没有输入，不处理
    if(input.value == Partage de connaissances sur lAPI JavaScript DOM9;Partage de connaissances sur lAPI JavaScript DOM9;) {
        return;
    }
    let guessNumber = parseInt(input.value);
    if (guessNumber > ansNumber) {
        ret.innerHTML = "YO!猜大了！";
        ret.style.color = "red";
    } else if (guessNumber <p>页面Partage de connaissances sur lAPI JavaScript DOM：</p><pre class="brush:php;toolbar:false">nbsp;html>
    <meta>
    <meta>
    <meta de connaissances sur lapi javascript dom.0>
    <title>猜数字</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: aliceblue;
        }
        hPartage de connaissances sur lAPI JavaScript DOM {
            width: Partage de connaissances sur lAPI JavaScript DOM00%;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            text-align: center;
            line-height: Partage de connaissances sur lAPI JavaScript DOM0px;
            color: blueviolet;
            margin: Partage de connaissances sur lAPI JavaScript DOM0px 0;
        }
        .guessp {
            width: Partage de connaissances sur lAPI JavaScript DOM00%;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            text-align: center;
            display: flex;
            justify-content: center;
        }
        .guessp #bPartage de connaissances sur lAPI JavaScript DOM{
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            width: Partage de connaissances sur lAPI JavaScript DOM0%;
            background-color: rgb(Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOM);
            color: aliceblue;
            border: 0cm;
            border-radius: Partage de connaissances sur lAPI JavaScript DOMpx;
        }
        .guessp #bPartage de connaissances sur lAPI JavaScript DOM:active{
            background-color: gray;
        }
        .guessp #guess{
            width: Partage de connaissances sur lAPI JavaScript DOM0%;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            border: Partage de connaissances sur lAPI JavaScript DOMpx solid rgb(Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOM);
            border-radius: Partage de connaissances sur lAPI JavaScript DOMpx;
            text-indent: 0.6em;
            outline: none;
        }
        .guessp #number{
            width: Partage de connaissances sur lAPI JavaScript DOM0%;
            text-align: right;
        }
        .guessp #in {
            width: 70%;
            margin-left: Partage de connaissances sur lAPI JavaScript DOM%;
            text-align: left;
        }
        .cnt, .ret{
            width: Partage de connaissances sur lAPI JavaScript DOM00%;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            text-align: center;
        }
        .rev{
            width: Partage de connaissances sur lAPI JavaScript DOM00%;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            text-align: center;
        }
        .rev #bPartage de connaissances sur lAPI JavaScript DOM{
            margin: Partage de connaissances sur lAPI JavaScript DOMpx;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            width: Partage de connaissances sur lAPI JavaScript DOM00px;
            background-color: rgb(Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOM00,Partage de connaissances sur lAPI JavaScript DOM00);
            color: aliceblue;
            border: 0cm;
            border-radius: Partage de connaissances sur lAPI JavaScript DOMpx;
        }
        .rev #bPartage de connaissances sur lAPI JavaScript DOM:active{
            background-color: gray;
        }
        .ret, .cnt{
            width: Partage de connaissances sur lAPI JavaScript DOM00%;
            height: Partage de connaissances sur lAPI JavaScript DOM0px;
            display: flex;
            justify-content:center;
        }
        .guessp #messr, .guessp #messc {
            width: Partage de connaissances sur lAPI JavaScript DOM0%;
            text-align: right;
        }
        .guessp #result, .guessp #count{
            width: 70%;
            text-align: left;
            margin-left: Partage de connaissances sur lAPI JavaScript DOM%;
        }


    </style>

    <hpartage de connaissances sur lapi javascript dom>猜数字游戏</hpartage>de connaissances sur lAPI JavaScript DOM>
    <p>
        <span>要猜的数字:</span>
        <span>
            <input de connaissances sur lapi javascript dom-partage dom00>
            <button de connaissances sur lapi javascript dom>我就要猜它</button>
        </span>
    </p>
    
    <p>
        <span>结果:</span>
        <span>你还没有猜哦！</span>
    </p>
    <p>
        <span>次数:</span>
        <span>0</span>
    </p>
    <p>
        <button de connaissances sur lapi javascript dom>
            开始/重新开始猜数字        </button>
    </p>


    <script>

    </script>
    
实际Partage de connaissances sur lAPI JavaScript DOM：
Partage de connaissances sur lAPI JavaScript DOM.Partage de connaissances sur lAPI JavaScript DOMPartage de connaissances sur lAPI JavaScript DOMde connaissances sur lAPI JavaScript DOM>目标页面
JavaScriptPartage de connaissances sur lAPI JavaScript DOM：
//获取元素let loveBtn = document.querySelector("#submit");let adv = ["深情地", "温柔地", "随便地", "紧张地", "幽默地", "滑稽地", "开心地", ""];//用户点击表白将表白记录显示在表白按钮下面let record = [];let i = 0;loveBtn.onclick = function() {
    //Partage de connaissances sur lAPI JavaScript DOM.获取表白内容
    let inputs = document.querySelectorAll("input");
    let from = inputs[0].value;
    let to = inputs[Partage de connaissances sur lAPI JavaScript DOM].value;
    let message = inputs[Partage de connaissances sur lAPI JavaScript DOM].value;
    //Partage de connaissances sur lAPI JavaScript DOM.如果有一项内天为空，不处理
    if (from == Partage de connaissances sur lAPI JavaScript DOM9;Partage de connaissances sur lAPI JavaScript DOM9; || to == Partage de connaissances sur lAPI JavaScript DOM9;Partage de connaissances sur lAPI JavaScript DOM9; || message == Partage de connaissances sur lAPI JavaScript DOM9;Partage de connaissances sur lAPI JavaScript DOM9;) {
        return;
    }
    //Partage de connaissances sur lAPI JavaScript DOM.汇总表白语言
    let n = adv.length;
    let index = (Math.floor(Math.random() * Partage de connaissances sur lAPI JavaScript DOM000) + Partage de connaissances sur lAPI JavaScript DOM) % n;
    let romAdv = adv[index];
    let loveMess = from + romAdv + "对" + to + "说" + message;
    record[i] = "留言" + (i+Partage de connaissances sur lAPI JavaScript DOM) + ":" + loveMess;
    //Partage de connaissances sur lAPI JavaScript DOM.新建结点，插入表白记录
    let p = document.createElement("p");
    p.innerHTML = record[i];
    p.className = Partage de connaissances sur lAPI JavaScript DOM9;ohPartage de connaissances sur lAPI JavaScript DOM9;;
    let container = document.querySelector(".container");
    container.appendChild(p);
    i++;
    //Partage de connaissances sur lAPI JavaScript DOM.表白完，清空输入框
    for (let i = 0; i 页面Partage de connaissances sur lAPI JavaScript DOM：
nbsp;html>
    
    
    
    Partage de connaissances sur lAPI JavaScript DOM
    
    
        "真的是"Partage de connaissances sur lAPI JavaScript DOMde connaissances sur lAPI JavaScript DOM>
        
输入后点击提交, 会将信息显示在表白按钮下方
        这是一个正经的Partage de connaissances sur lAPI JavaScript DOM，这真的不是一个Partage de connaissances sur lAPI JavaScript DOM
        
        
            是谁:
            <input>
        
        
            向谁:
            <input>
        
        
            说:
            <input>
        
        
            
        
    
    
    
实际Partage de connaissances sur lAPI JavaScript DOM：
【相关推荐：javascript视频教程、web前端】

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!

Java JavaScript css html NULL math 字符串 class 字符串类型 JS console 对象事件 dom innerHTML 选择器 input

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer plusieurs objets en JavaScript ? Explication détaillée de quatre méthodesArticle suivant：Comment créer plusieurs objets en JavaScript ? Explication détaillée de quatre méthodes

Articles Liés

Voir plus