本篇文章為大家帶來了關於javascript的相關知識,其中主要整理了DOM API知識串講的相關問題,包括了選取頁面標籤、操作頁面標籤的屬性等等內容,下面一起來看一下,希望對大家有幫助。
【相關推薦:javascript影片教學、web前端】
##JavaScript DOM API知識串講.DOM API知識串講null。
let obj = document.querySelector("选择器");如果選擇的標籤在頁面有多個,只會選擇第一次出現在頁面的標籤。
如果想要把這些元素都選中,就需要使用querySelectorAll函數。
let var_name = document.querySelectorAll("选择器");該函數會傳回一個類似與數組的對象,用法和數組一模一樣,但是除此之外,還能添加鍵值對。
對該數組裡面的元素展開,會發現很多屬性,這些屬性都是DOM原生的一些屬性。
let button = document.querySelector("button");button.onclick = function (){ alert("嘻嘻嘻!");}栗子與運行JavaScript DOM API知識串講:
//JavaScript DOM API知識串講.选中标签let var_name = document.querySelector();//JavaScript DOM API知識串講.获取内容let content = var_name.innnerHTML;//JavaScript DOM API知識串講.修改内容var_name.innerHTML = 修改内容;栗子:
JavaScript DOM API知識串講:
我們發現相同的元素都被折疊輸出了,我們可以點擊開發者工具的設定欄,來設定展開輸出。
上面我們在所選的標籤裡面放置的是文本,如果不是文本呢?其實也是一樣的,假設裡面放了一個清單標籤,那麼拿到的結果就是裡面標籤的HTML程式碼。
JavaScript DOM API知識串講:
JavaScript DOM API知識串講:
欸,好像与我们的预期有点不一致,原因就是修改元素内容时,拿到的内容是字符串类型的,发生的是拼接JavaScript DOM API知識串講,而不是算术JavaScript DOM API知識串講,所以我们需要进行转换,那如何转换?我们可以使用与java非常类似且同名的一个方法,它就是parseInt,同理如果需要小数那就有parseFloat,注意这里没有parseDouble方法哦!
JavaScript DOM API知識串講:
我们来丰富一下,加一个按钮,可以完成减的功能。
页面JavaScript DOM API知識串講:
<style> #screen{ width: 88px; height: JavaScript DOM API知識串講0px; text-align: center; line-height: JavaScript DOM API知識串講0px; border-radius: JavaScript DOM API知識串講px; background-color: rgb(JavaScript DOM API知識串講00, JavaScript DOM API知識串講00, JavaScript DOM API知識串講00); } #plus, #sub{ width: JavaScript DOM API知識串講JavaScript DOM API知識串講px; height: JavaScript DOM API知識串講0px; border-radius: JavaScript DOM API知識串講0px; margin-top: JavaScript DOM API知識串講px; border: 0px; background-color: rgb(JavaScript DOM API知識串講80, JavaScript DOM API知識串講00, JavaScript DOM API知識串講JavaScript DOM API知識串講JavaScript DOM API知識串講); } </style> <p> 0 </p> <button>计数+JavaScript DOM API知識串講</button> <button>计数-JavaScript DOM API知識串講</button> <script> </script>
JavaScriptJavaScript DOM API知識串講:
let plus = document.querySelector("#plus");let sub = document.querySelector("#sub");let plus_func = function() { //JavaScript DOM API知識串講.获取值 let add_btn = document.querySelector("#screen"); let val = add_btn.innerHTML; val = parseInt(val); //JavaScript DOM API知識串講.+JavaScript DOM API知識串講 val = val + JavaScript DOM API知識串講; //JavaScript DOM API知識串講.写回 add_btn.innerHTML = val;}let sub_func = function() { //JavaScript DOM API知識串講.获取值 let sub_btn = document.querySelector("#screen"); let val =sub_btn.innerHTML; val = parseInt(val); //JavaScript DOM API知識串講.-JavaScript DOM API知識串講 val = val - JavaScript DOM API知識串講; //JavaScript DOM API知識串講.写回 sub_btn.innerHTML = val;}plus.onclick = plus_func;sub.onclick = sub_func;
JavaScript DOM API知識串講:
但是对于但标签是没有innerHTML属性的,比如input
标签,虽然不能通过innerHTML获取属性,但是可以通过value
属性获取内容。
页面JavaScript DOM API知識串講:
<input> <button>+JavaScript DOM API知識串講</button> <script> </script>
JavaScriptJavaScript DOM API知識串講:
let add = document.querySelector("#add");add.onclick = function() { //JavaScript DOM API知識串講.获取值 let add_btn = document.querySelector("#in"); let val = add_btn.value; val = parseInt(val); //JavaScript DOM API知識串講.+JavaScript DOM API知識串講 val = val + JavaScript DOM API知識串講; //JavaScript DOM API知識串講.写回 add_btn.value = val;}
JavaScript DOM API知識串講:
我们想实现一个小案例,就是点击一个图片就能切换图片,再点击一次又能够切换回来,我们可以利用DOM来修改元素的属性来实现,在这个案例中,我们只需JavaScript DOM API知識串講点击事件为修改图片的路径,也就是src
属性,就可以实现图片的切换。
假设第一张图片的路径是./jee.png
,第二张图片的路径是./樱花.png
,实现图片切换的基本思路为:
img
元素。ee
,包含就将src
属性换成./樱花.png
,反过来,判断路径是否包含樱花
,包含就将src
属性换成./jee.png
indexOf
方法判断是否包含某个字符串。JavaScriptJavaScript DOM API知識串講:
let img = document.querySelector("img");img.onclick = function() { console.log(img.src); if (img.src.indexOf("ee") >= 0) { img.src = JavaScript DOM API知識串講9;./樱花.pngJavaScript DOM API知識串講9;; } else if (img.src.indexOf("樱花")) { img.src = JavaScript DOM API知識串講9;./jee.pngJavaScript DOM API知識串講9; }}
页面JavaScript DOM API知識串講:
<style> img { height: JavaScript DOM API知識串講JavaScript DOM API知識串講0px; } </style> <img alt="JavaScript DOM API知識串講" > <script> </script>
JavaScript DOM API知識串講:
具体哪些属性可以修改,我们可以使用console.dir
函数来获取某个元素DOM API能够操作的全部属性。
实现一个按钮,点击之后按钮文字从"播放"变为"暂停",再点击一次,按钮文字从"暂停"变为"播放"。
实现逻辑和切换逻辑是差不多的,具体看JavaScript DOM API知識串講吧:
JavaScriptJavaScript DOM API知識串講:
let play = document.querySelector("#play");play.onclick = function(){ if (play.value == "播放") { play.value = "暂停"; } else if (play.value = "暂停") { play.value = "播放"; }}
页面JavaScript DOM API知識串講:
<input>
实现JavaScript DOM API知識串講:
首先我们需要创建若干个复选框,只有一个全选框,我们选中全选框,其他元素需要被全部选中,一旦其他元素有未选中的,全选也必须是未选中的。
实现的基本思路:
JavaScriptJavaScript DOM API知識串講:
let all = document.querySelector("#all");let gameroles = document.querySelectorAll(".gamerole");//checked属性为checked表示选中状态,为空字符串表示未选中//JavaScript DOM API知識串講all的点击事件all.onclick = function() { for (let i = 0; i页面JavaScript DOM API知識串講:
<input>全选
<input>胡桃
<input>可莉
<input>万叶
<input>心海
<input>锅巴实际JavaScript DOM API知識串講:
JavaScript DOM API知識串講.JavaScript DOM API知識串講.8点击文字放大 DOM API知識串講>DOM还可以修改
style
属性,下面来尝试运用选中元素与修改元素的知识,来实现点击文字放大的一个小案例。因为CSS中不区分大小写,属性与变量的命名采用脊柱式命名,而JS中
-
不能用于变量的命名,为了能够将CSS属性与JS变量名匹配,JS使用驼峰的形式表示CSS的属性,例如font-size
属性,对应JS的变量名为fontSize
。对于文字的放大,我们可以给文本所在的标签注册一个点击事件,每点击一次就将字体大小增大,即修改CSS的
font-size
属性。JavaScriptJavaScript DOM API知識串講:
let p = document.querySelector("p");p.onclick = function() { //JavaScript DOM API知識串講.获取文字大小属性 let wordsSize = parseInt(p.style.fontSize); console.log("修改前" + wordsSize); //JavaScript DOM API知識串講.修改文字大小 wordsSize += JavaScript DOM API知識串講; //JavaScript DOM API知識串講.写回到属性 p.style.fontSize = wordsSize + "px"; console.log("修改后" + wordsSize);}页面JavaScript DOM API知識串講:
<p dom api> 我是一段文本 </p>实现JavaScript DOM API知識串講:
JavaScript DOM API知識串講.JavaScript DOM API知識串講.9实现关灯/开灯(夜间/白间模式切换) DOM API知識串講>很多情况下一个个修改样式属性太麻烦了,我们也可以直接修改类属性来达到JavaScript DOM API知識串講,可以通过
选中元素变量名.className
来获取和修改类属性。由于JavaScript里面的
class
是一个关键字,因此获取元素的class
不能使用class
,而需要使用className
,多个class
属性可以使用classList
。JavaScriptJavaScript DOM API知識串講:
let p = document.querySelector(JavaScript DOM API知識串講9;pJavaScript DOM API知識串講9;);let button = document.querySelector(JavaScript DOM API知識串講9;buttonJavaScript DOM API知識串講9;);button.onclick = function(){ if (p.className == "light") { p.className = JavaScript DOM API知識串講9;blackJavaScript DOM API知識串講9;; button.innerHTML = JavaScript DOM API知識串講9;开灯JavaScript DOM API知識串講9;; } else if (p.className == JavaScript DOM API知識串講9;blackJavaScript DOM API知識串講9;) { p.className = JavaScript DOM API知識串講9;lightJavaScript DOM API知識串講9;; button.innerHTML = JavaScript DOM API知識串講9;关灯JavaScript DOM API知識串講9;; }}页面JavaScript DOM API知識串講:
<style> p{ width: JavaScript DOM API知識串講00px; text-align: center; } .light, .black{ width: JavaScript DOM API知識串講00px; height: JavaScript DOM API知識串講00px; text-align: center; line-height: JavaScript DOM API知識串講00px; font-size: JavaScript DOM API知識串講0px; } button{ width: JavaScript DOM API知識串講00px; height: JavaScript DOM API知識串講0px; font-size: JavaScript DOM API知識串講0px; background-color: rgb(JavaScript DOM API知識串講00,JavaScript DOM API知識串講00,JavaScript DOM API知識串講00); border: 0cm; border-radius: JavaScript DOM API知識串講0px; } .light{ background-color: aliceblue; color: black; } .black{ background-color: black; color: aliceblue; } </style> <p>我是一段文本</p> <p> <button>关灯</button> </p>实际JavaScript DOM API知識串講:
JavaScript DOM API知識串講.JavaScript DOM API知識串講操作页面结点 DOM API知識串講>JavaScript DOM API知識串講.JavaScript DOM API知識串講.JavaScript DOM API知識串講新增结点 DOM API知識串講>除了修改元素的属性和内容,我们还可以在页面上添加元素,要添加元素,那就得先新建一个元素,并且还需要依赖一个父元素(已经创建好的),把这个新建的元素插入到父元素中就能实现元素的添加(依赖与DOM树),这个操作也被称为新增页面结点。
新建元素:let newp = document.createElement("元素标签");补充元素内容:
newp.属性 = 值;插入到DOM树:
选中的父元素.appendChild(创建的子元素);实例:
JavaScriptJavaScript DOM API知識串講:let cnt = JavaScript DOM API知識串講;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++;}页面JavaScript DOM API知識串講:
<p></p> <button>新增节点</button>实际JavaScript DOM API知識串講:
JavaScript DOM API知識串講.JavaScript DOM API知識串講.JavaScript DOM API知識串講删除结点 DOM API知識串講>删除结点就更容易了,在DOM树上删除结点就行。
删除结点:
获取到的父元素.removeChild(需要删除的子元素);实例:
JavaScriptJavaScript DOM API知識串講:let cnt = JavaScript DOM API知識串講;let add = document.querySelector("#add");let parent = document.querySelector("#container");let arr = [];add.onclick = function() { let newp = document.createElement("p"); arr[cnt-JavaScript DOM API知識串講] = 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-JavaScript DOM API知識串講]); } else { console.log( "该父元素已经没有元素可以删除了"); cnt++; }}页面JavaScript DOM API知識串講:
<p></p> <button>新增节点</button>实际JavaScript DOM API知識串講:
JavaScript DOM API知識串講.综合案例 DOM API知識串講>JavaScript DOM API知識串講.JavaScript DOM API知識串講猜数字 DOM API知識串講>目标页面
猜数字的逻辑我就不赘述了,不过里面需要取随机数,我们可以通过js中的
Math.random()
函数来获取随机数,该函数生成随机数的范围是[0,JavaScript DOM API知識串講)
区间内的一个小数,我们需要的是[JavaScript DOM API知識串講,JavaScript DOM API知識串講00]
之间的整数,我们可以乘上JavaScript DOM API知識串講00
后向下取整加一就能得到目标区间的数了,实现向下取整的函数是Math.floor(数字)
。然后前端页面部分是通过HTML加上CSS弹性布局实现的,交互通过JavaScript DOM实现,下面的JavaScript DOM API知識串講案例也是一样的,就不多说了。
JavaScriptJavaScript DOM API知識串講:
//获取元素let input = document.querySelector("#guess");let ret = document.querySelector("#result");let cnt = document.querySelector("#count");let guessBtn = document.querySelector("#bJavaScript DOM API知識串講");let flash = document.querySelector("#bJavaScript DOM API知識串講");//生成JavaScript DOM API知識串講-JavaScript DOM API知識串講00的随机数//floor表示只取浮点数整数部分let ansNumber = Math.floor(Math.random() * JavaScript DOM API知識串講00) + JavaScript DOM API知識串講;//实现按钮猜数字的点击事件guessBtn.onclick = function(){ //输入框没有值,表示用户没有输入,不处理 if(input.value == JavaScript DOM API知識串講9;JavaScript DOM API知識串講9;) { return; } let guessNumber = parseInt(input.value); if (guessNumber > ansNumber) { ret.innerHTML = "YO!猜大了!"; ret.style.color = "red"; } else if (guessNumber <p>页面JavaScript DOM API知識串講:</p><pre class="brush:php;toolbar:false">nbsp;html> <meta> <meta> <meta dom api> <title>猜数字</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; background-color: aliceblue; } hJavaScript DOM API知識串講 { width: JavaScript DOM API知識串講00%; height: JavaScript DOM API知識串講0px; text-align: center; line-height: JavaScript DOM API知識串講0px; color: blueviolet; margin: JavaScript DOM API知識串講0px 0; } .guessp { width: JavaScript DOM API知識串講00%; height: JavaScript DOM API知識串講0px; text-align: center; display: flex; justify-content: center; } .guessp #bJavaScript DOM API知識串講{ height: JavaScript DOM API知識串講0px; width: JavaScript DOM API知識串講0%; background-color: rgb(JavaScript DOM API知識串講00,JavaScript DOM API知識串講00,JavaScript DOM API知識串講JavaScript DOM API知識串講JavaScript DOM API知識串講); color: aliceblue; border: 0cm; border-radius: JavaScript DOM API知識串講px; } .guessp #bJavaScript DOM API知識串講:active{ background-color: gray; } .guessp #guess{ width: JavaScript DOM API知識串講0%; height: JavaScript DOM API知識串講0px; border: JavaScript DOM API知識串講px solid rgb(JavaScript DOM API知識串講00,JavaScript DOM API知識串講00,JavaScript DOM API知識串講JavaScript DOM API知識串講JavaScript DOM API知識串講); border-radius: JavaScript DOM API知識串講px; text-indent: 0.6em; outline: none; } .guessp #number{ width: JavaScript DOM API知識串講0%; text-align: right; } .guessp #in { width: 70%; margin-left: JavaScript DOM API知識串講%; text-align: left; } .cnt, .ret{ width: JavaScript DOM API知識串講00%; height: JavaScript DOM API知識串講0px; text-align: center; } .rev{ width: JavaScript DOM API知識串講00%; height: JavaScript DOM API知識串講0px; text-align: center; } .rev #bJavaScript DOM API知識串講{ margin: JavaScript DOM API知識串講px; height: JavaScript DOM API知識串講0px; width: JavaScript DOM API知識串講00px; background-color: rgb(JavaScript DOM API知識串講00,JavaScript DOM API知識串講00,JavaScript DOM API知識串講00); color: aliceblue; border: 0cm; border-radius: JavaScript DOM API知識串講px; } .rev #bJavaScript DOM API知識串講:active{ background-color: gray; } .ret, .cnt{ width: JavaScript DOM API知識串講00%; height: JavaScript DOM API知識串講0px; display: flex; justify-content:center; } .guessp #messr, .guessp #messc { width: JavaScript DOM API知識串講0%; text-align: right; } .guessp #result, .guessp #count{ width: 70%; text-align: left; margin-left: JavaScript DOM API知識串講%; } </style> <hjavascript dom api>猜数字游戏</hjavascript>DOM API知識串講> <p> <span>要猜的数字:</span> <span> <input dom api> <button dom api>我就要猜它</button> </span> </p> <p> <span>结果:</span> <span>你还没有猜哦!</span> </p> <p> <span>次数:</span> <span>0</span> </p> <p> <button dom api> 开始/重新开始猜数字 </button> </p> <script> </script>实际JavaScript DOM API知識串講:
JavaScript DOM API知識串講.JavaScript DOM API知識串講JavaScript DOM API知識串講 DOM API知識串講>目标页面
JavaScriptJavaScript DOM API知識串講:
//获取元素let loveBtn = document.querySelector("#submit");let adv = ["深情地", "温柔地", "随便地", "紧张地", "幽默地", "滑稽地", "开心地", ""];//用户点击表白将表白记录显示在表白按钮下面let record = [];let i = 0;loveBtn.onclick = function() { //JavaScript DOM API知識串講.获取表白内容 let inputs = document.querySelectorAll("input"); let from = inputs[0].value; let to = inputs[JavaScript DOM API知識串講].value; let message = inputs[JavaScript DOM API知識串講].value; //JavaScript DOM API知識串講.如果有一项内天为空,不处理 if (from == JavaScript DOM API知識串講9;JavaScript DOM API知識串講9; || to == JavaScript DOM API知識串講9;JavaScript DOM API知識串講9; || message == JavaScript DOM API知識串講9;JavaScript DOM API知識串講9;) { return; } //JavaScript DOM API知識串講.汇总表白语言 let n = adv.length; let index = (Math.floor(Math.random() * JavaScript DOM API知識串講000) + JavaScript DOM API知識串講) % n; let romAdv = adv[index]; let loveMess = from + romAdv + "对" + to + "说" + message; record[i] = "留言" + (i+JavaScript DOM API知識串講) + ":" + loveMess; //JavaScript DOM API知識串講.新建结点,插入表白记录 let p = document.createElement("p"); p.innerHTML = record[i]; p.className = JavaScript DOM API知識串講9;ohJavaScript DOM API知識串講9;; let container = document.querySelector(".container"); container.appendChild(p); i++; //JavaScript DOM API知識串講.表白完,清空输入框 for (let i = 0; i页面JavaScript DOM API知識串講:
nbsp;html>JavaScript DOM API知識串講
"真的是"JavaScript DOM API知識串講 DOM API知識串講>输入后点击提交, 会将信息显示在表白按钮下方
这是一个正经的JavaScript DOM API知識串講,这真的不是一个JavaScript DOM API知識串講
是谁: <input>
向谁: <input>
说: <input>
实际JavaScript DOM API知識串講:
【相关推荐:javascript视频教程、web前端】
以上是JavaScript DOM API知識串講的詳細內容。更多資訊請關注PHP中文網其他相關文章!