Maison >interface Web >js tutoriel >Partage de connaissances sur l'API JavaScript DOM
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]
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("选择器");
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.
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.
Développez les éléments du tableau et vous trouverez de nombreux attributs, qui sont tous des attributs natifs du 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 :
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 :
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.
L'élément d'opération :
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 :
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.
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.
Nous pouvons également modifier le contenu du HTML, comme changer une liste en titre.
Effet :
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:
但是对于但标签是没有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:
我们想实现一个小案例,就是点击一个图片就能切换图片,再点击一次又能够切换回来,我们可以利用DOM来修改元素的属性来实现,在这个案例中,我们只需Partage de connaissances sur lAPI JavaScript DOM点击事件为修改图片的路径,也就是src
属性,就可以实现图片的切换。
假设第一张图片的路径是./jee.png
,第二张图片的路径是./樱花.png
,实现图片切换的基本思路为:
img
元素。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:
具体哪些属性可以修改,我们可以使用console.dir
函数来获取某个元素DOM API能够操作的全部属性。
实现一个按钮,点击之后按钮文字从"播放"变为"暂停",再点击一次,按钮文字从"暂停"变为"播放"。
实现逻辑和切换逻辑是差不多的,具体看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:
首先我们需要创建若干个复选框,只有一个全选框,我们选中全选框,其他元素需要被全部选中,一旦其他元素有未选中的,全选也必须是未选中的。
实现的基本思路:
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 DOM de 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 DOM de 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!