JavaScriptDOMAPI怎么使用
今天小編給大家分享一下JavaScript DOM API怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有楚雄州免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
1.DOM API知識(shí)串講
1.1選中頁(yè)面標(biāo)簽
在DOM中，document頁(yè)面全局對(duì)象，里面的函數(shù)querySelector和querySelectorAll 用于選擇元素，通過(guò)傳入CSS選擇器來(lái)達(dá)到目的，選擇的范圍是位于該函數(shù)之前所存在的選擇器，沒(méi)找到返回值為null。
let obj = document.querySelector("選擇器");
如果選擇的標(biāo)簽在頁(yè)面有多個(gè)，只會(huì)選擇第一次出現(xiàn)在頁(yè)面的標(biāo)簽。
如果想要把這些元素都選中，就需要使用querySelectorAll函數(shù)。
用法和querySelector 是一樣的。
let var_name = document.querySelectorAll("選擇器");該函數(shù)會(huì)返回一個(gè)類似與數(shù)組的對(duì)象，用法和數(shù)組一模一樣，但是除此之外，還能添加鍵值對(duì)。
對(duì)該數(shù)組里面的元素進(jìn)行展開(kāi)，會(huì)發(fā)現(xiàn)很多屬性，這些屬性都是DOM原生的一些屬性。
1.2操作頁(yè)面標(biāo)簽的屬性
1.2.1事件
JS很多代碼都是通過(guò)“事件”來(lái)觸發(fā)的，比如鼠標(biāo)移動(dòng)，鼠標(biāo)滾動(dòng)，鍵盤(pán)輸入，修改瀏覽器大小等等都會(huì)產(chǎn)生事件。
事件的三要素：
事件源，哪個(gè)HTML元素產(chǎn)生的事件。
事件類型，如鼠標(biāo)移動(dòng)，鼠標(biāo)點(diǎn)擊，窗口大小改變等。
事件處理方式，當(dāng)事件產(chǎn)生后，要執(zhí)行什么js代碼。
例如，點(diǎn)擊事件操作代碼：
let button = document.querySelector("button");button.onclick = function (){
alert("嘻嘻嘻！");}栗子與運(yùn)行效果：
圖中給出了一種等價(jià)的寫(xiě)法，但是等價(jià)的寫(xiě)法會(huì)使HTML代碼的結(jié)構(gòu)更加復(fù)雜，所以更建議圖中的第一種寫(xiě)法。
1.2.2獲取元素
操作元素的分類：
元素的內(nèi)容。
元素的屬性。
元素的樣式。
首先，操作元素的內(nèi)容可以使用innerHTML屬性來(lái)獲取一個(gè)標(biāo)簽里面的內(nèi)容。
//1.選中標(biāo)簽let var_name = document.querySelector();//2.獲取內(nèi)容let content = var_name.innnerHTML;//3.修改內(nèi)容var_name.innerHTML = 修改內(nèi)容;
栗子：
效果：
我們發(fā)現(xiàn)相同的元素都被折疊輸出了，我們可以點(diǎn)擊開(kāi)發(fā)者工具的設(shè)置欄，來(lái)設(shè)置展開(kāi)輸出。
上面我們?cè)谒x中的標(biāo)簽里面放置的是文本，如果不是文本呢？其實(shí)也是一樣的，假設(shè)里面放了一個(gè)列表標(biāo)簽，那么拿到的結(jié)果就是里面標(biāo)簽的HTML代碼。
1.2.3修改元素
我們也可以來(lái)修改HTML的內(nèi)容，比如將列表改為一個(gè)標(biāo)題。
效果：
1.2.4計(jì)數(shù)器
根據(jù)獲取與修改元素的知識(shí)，我們可以來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的計(jì)數(shù)器，基本思路就是：
獲取元素內(nèi)容
修改元素內(nèi)容（加一操作）
寫(xiě)回到元素里面
效果：
欸，好像與我們的預(yù)期有點(diǎn)不一致，原因就是修改元素內(nèi)容時(shí)，拿到的內(nèi)容是字符串類型的，發(fā)生的是拼接效果，而不是算術(shù)效果，所以我們需要進(jìn)行轉(zhuǎn)換，那如何轉(zhuǎn)換？我們可以使用與java非常類似且同名的一個(gè)方法，它就是parseInt，同理如果需要小數(shù)那就有parseFloat，注意這里沒(méi)有parseDouble方法哦！
效果：
我們來(lái)豐富一下，加一個(gè)按鈕，可以完成減的功能。
頁(yè)面代碼：
<style>
#screen{
width: 88px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 4px;
background-color: rgb(100, 200, 100);
}
#plus, #sub{
width: 42px;
height: 20px;
border-radius: 10px;
margin-top: 4px;
border: 0px;
background-color: rgb(180, 200, 255);
}
</style>
<p id="screen">
0 </p>
<button id="plus">計(jì)數(shù)+1</button>
<button id="sub">計(jì)數(shù)-1</button>
<script src="./document.js">
</script>JavaScript代碼：
let plus = document.querySelector("#plus");let sub = document.querySelector("#sub");let plus_func = function() {
//1.獲取值
let add_btn = document.querySelector("#screen");
let val = add_btn.innerHTML;
val = parseInt(val);
//2.+1
val = val + 1;
//3.寫(xiě)回
add_btn.innerHTML = val;}let sub_func = function() {
//1.獲取值
let sub_btn = document.querySelector("#screen");
let val =sub_btn.innerHTML;
val = parseInt(val);
//2.-1
val = val - 1;
//3.寫(xiě)回
sub_btn.innerHTML = val;}plus.onclick = plus_func;sub.onclick = sub_func;效果：
但是對(duì)于但標(biāo)簽是沒(méi)有innerHTML屬性的，比如input標(biāo)簽，雖然不能通過(guò)innerHTML獲取屬性，但是可以通過(guò)value屬性獲取內(nèi)容。
頁(yè)面代碼：
<input type="text" id="in" value="0"> <button id="add">+1</button> <script src="./document.js"> </script>
JavaScript代碼:
let add = document.querySelector("#add");add.onclick = function() {
//1.獲取值
let add_btn = document.querySelector("#in");
let val = add_btn.value;
val = parseInt(val);
//2.+1
val = val + 1;
//3.寫(xiě)回
add_btn.value = val;}效果：
1.2.5點(diǎn)擊圖片切換
我們想實(shí)現(xiàn)一個(gè)小案例，就是點(diǎn)擊一個(gè)圖片就能切換圖片，再點(diǎn)擊一次又能夠切換回來(lái)，我們可以利用DOM來(lái)修改元素的屬性來(lái)實(shí)現(xiàn)，在這個(gè)案例中，我們只需設(shè)置點(diǎn)擊事件為修改圖片的路徑，也就是src屬性，就可以實(shí)現(xiàn)圖片的切換。
假設(shè)第一張圖片的路徑是./jee.png，第二張圖片的路徑是./櫻花.png，實(shí)現(xiàn)圖片切換的基本思路為：
獲取
img元素。設(shè)置onclick。
點(diǎn)擊事件的細(xì)節(jié)就是判斷路徑是否包含
ee，包含就將src屬性換成./櫻花.png，反過(guò)來(lái)，判斷路徑是否包含櫻花，包含就將src屬性換成./jee.png可以使用
indexOf方法判斷是否包含某個(gè)字符串。
JavaScript代碼：
let img = document.querySelector("img");img.onclick = function() {
console.log(img.src);
if (img.src.indexOf("ee") >= 0) {
img.src = './櫻花.png';
} else if (img.src.indexOf("櫻花")) {
img.src = './jee.png'
}}頁(yè)面代碼：
<style>
img {
height: 450px;
}
</style>
<img src="./jee.png" alt="">
<script src="./document.js">
</script>效果：
具體哪些屬性可以修改，我們可以使用console.dir函數(shù)來(lái)獲取某個(gè)元素DOM API能夠操作的全部屬性。
1.2.6暫停/播放切換
實(shí)現(xiàn)一個(gè)按鈕，點(diǎn)擊之后按鈕文字從"播放"變?yōu)?quot;暫停"，再點(diǎn)擊一次，按鈕文字從"暫停"變?yōu)?quot;播放"。
實(shí)現(xiàn)邏輯和切換邏輯是差不多的，具體看代碼吧：
JavaScript代碼：
let play = document.querySelector("#play");play.onclick = function(){
if (play.value == "播放") {
play.value = "暫停";
} else if (play.value = "暫停") {
play.value = "播放";
}}頁(yè)面代碼：
<input id="play" type="button" value="播放">
實(shí)現(xiàn)效果：
1.2.7全選/取消全選
首先我們需要?jiǎng)?chuàng)建若干個(gè)復(fù)選框，只有一個(gè)全選框，我們選中全選框，其他元素需要被全部選中，一旦其他元素有未選中的，全選也必須是未選中的。
實(shí)現(xiàn)的基本思路：
獲取全選框元素，獲取其他元素。
注冊(cè)全選框的點(diǎn)擊事件，檢查其他框是否都被選中，如果選中，則全選框也選中，否則全選框不選中。
對(duì)每一個(gè)其他復(fù)選框設(shè)置點(diǎn)擊事件，并將狀態(tài)與全選復(fù)選框關(guān)聯(lián)。
每次點(diǎn)擊其他框都要檢測(cè)其他框是否都選中，以確定全選框的狀態(tài)。
JavaScript代碼：
let all = document.querySelector("#all");let gameroles = document.querySelectorAll(".gamerole");//checked屬性為checked表示選中狀態(tài)，為空字符串表示未選中//設(shè)置all的點(diǎn)擊事件all.onclick = function() {
for (let i = 0; i < gameroles.length; i++) {
//使gameroles元素狀態(tài)與all相同
gameroles[i].checked = all.checked;
}}//為gameroles的每個(gè)成員注冊(cè)點(diǎn)擊事件，并狀態(tài)確定all的狀態(tài)for (let i = 0; i < gameroles.length; i++) {
gameroles[i].onclick = function() {
all.checked = checkRole();
}}//檢查所有成員是否選中，確定all的狀態(tài)function checkRole() {
for (let i = 0; i < gameroles.length; i++) {
//只要有一個(gè)成員未選中，all狀態(tài)就是未選中
if (gameroles[i].checked == '') {
return '';
}
}
return "checked";}頁(yè)面代碼：
<input id="all" type="checkbox">全選 <br> <input class="gamerole" type="checkbox">胡桃 <br> <input class="gamerole" type="checkbox">可莉 <br> <input class="gamerole" type="checkbox">萬(wàn)葉 <br> <input class="gamerole" type="checkbox">心海 <br> <input class="gamerole" type="checkbox">鍋巴 <br>
實(shí)際效果：
1.2.8點(diǎn)擊文字放大
DOM還可以修改style屬性，下面來(lái)嘗試運(yùn)用選中元素與修改元素的知識(shí)，來(lái)實(shí)現(xiàn)點(diǎn)擊文字放大的一個(gè)小案例。
因?yàn)镃SS中不區(qū)分大小寫(xiě)，屬性與變量的命名采用脊柱式命名，而JS中-不能用于變量的命名，為了能夠?qū)SS屬性與JS變量名匹配，JS使用駝峰的形式表示CSS的屬性，例如font-size屬性，對(duì)應(yīng)JS的變量名為fontSize。
對(duì)于文字的放大，我們可以給文本所在的標(biāo)簽注冊(cè)一個(gè)點(diǎn)擊事件，每點(diǎn)擊一次就將字體大小增大，即修改CSS的font-size屬性。
JavaScript代碼：
let p = document.querySelector("p");p.onclick = function() {
//1.獲取文字大小屬性
let wordsSize = parseInt(p.style.fontSize);
console.log("修改前" + wordsSize);
//2.修改文字大小
wordsSize += 5;
//3.寫(xiě)回到屬性
p.style.fontSize = wordsSize + "px";
console.log("修改后" + wordsSize);}頁(yè)面代碼：
<p style="font-size: 20px;"> 我是一段文本 </p>
實(shí)現(xiàn)效果：
1.2.9實(shí)現(xiàn)關(guān)燈/開(kāi)燈（夜間/白間模式切換）
很多情況下一個(gè)個(gè)修改樣式屬性太麻煩了，我們也可以直接修改類屬性來(lái)達(dá)到效果，可以通過(guò)選中元素變量名.className來(lái)獲取和修改類屬性。
由于JavaScript里面的class是一個(gè)關(guān)鍵字，因此獲取元素的class不能使用class，而需要使用className，多個(gè)class屬性可以使用classList。
JavaScript代碼：
let p = document.querySelector('p');let button = document.querySelector('button');button.onclick = function(){
if (p.className == "light") {
p.className = 'black';
button.innerHTML = '開(kāi)燈';
} else if (p.className == 'black') {
p.className = 'light';
button.innerHTML = '關(guān)燈';
}}頁(yè)面代碼：
<style>
p{
width: 500px;
text-align: center;
}
.light, .black{
width: 500px;
height: 500px;
text-align: center;
line-height: 500px;
font-size: 50px;
}
button{
width: 100px;
height: 50px;
font-size: 20px;
background-color: rgb(100,200,100);
border: 0cm;
border-radius: 10px;
}
.light{
background-color: aliceblue;
color: black;
}
.black{
background-color: black;
color: aliceblue;
}
</style>
<p class="light" >我是一段文本</p>
<p>
<button>關(guān)燈</button>
</p>實(shí)際效果：
1.3操作頁(yè)面結(jié)點(diǎn)
1.3.1新增結(jié)點(diǎn)
除了修改元素的屬性和內(nèi)容，我們還可以在頁(yè)面上添加元素，要添加元素，那就得先新建一個(gè)元素，并且還需要依賴一個(gè)父元素（已經(jīng)創(chuàng)建好的），把這個(gè)新建的元素插入到父元素中就能實(shí)現(xiàn)元素的添加（依賴與DOM樹(shù)），這個(gè)操作也被稱為新增頁(yè)面結(jié)點(diǎn)。
新建元素：
let newp = document.createElement("元素標(biāo)簽");補(bǔ)充元素內(nèi)容：
newp.屬性 = 值;
插入到DOM樹(shù):
選中的父元素.appendChild(創(chuàng)建的子元素);
實(shí)例：
JavaScript代碼：
let cnt = 1;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++;}頁(yè)面代碼：
<p id="container"></p> <button id="add">新增節(jié)點(diǎn)</button>
實(shí)際效果：
1.3.2刪除結(jié)點(diǎn)
刪除結(jié)點(diǎn)就更容易了，在DOM樹(shù)上刪除結(jié)點(diǎn)就行。
刪除結(jié)點(diǎn)：
獲取到的父元素.removeChild(需要?jiǎng)h除的子元素);
實(shí)例：
JavaScript代碼：
let cnt = 1;let add = document.querySelector("#add");let parent = document.querySelector("#container");let arr = [];add.onclick = function() {
let newp = document.createElement("p");
arr[cnt-1] = 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( "成功刪除一個(gè)元素");
parent.removeChild(arr[cnt-1]);
} else {
console.log( "該父元素已經(jīng)沒(méi)有元素可以刪除了");
cnt++;
}}頁(yè)面代碼：
<p id="container"></p> <button id="add">新增節(jié)點(diǎn)</button> <button id="del">刪除節(jié)點(diǎn)</button>
實(shí)際效果：
2.綜合案例
2.1猜數(shù)字
目標(biāo)頁(yè)面
猜數(shù)字的邏輯我就不贅述了，不過(guò)里面需要取隨機(jī)數(shù)，我們可以通過(guò)js中的Math.random()函數(shù)來(lái)獲取隨機(jī)數(shù)，該函數(shù)生成隨機(jī)數(shù)的范圍是[0,1)區(qū)間內(nèi)的一個(gè)小數(shù)，我們需要的是[1,100]之間的整數(shù)，我們可以乘上100后向下取整加一就能得到目標(biāo)區(qū)間的數(shù)了，實(shí)現(xiàn)向下取整的函數(shù)是Math.floor(數(shù)字)。
然后前端頁(yè)面部分是通過(guò)HTML加上CSS彈性布局實(shí)現(xiàn)的，交互通過(guò)JavaScript DOM實(shí)現(xiàn)，下面的表白墻案例也是一樣的，就不多說(shuō)了。
JavaScript代碼：
//獲取元素let input = document.querySelector("#guess");let ret = document.querySelector("#result");let cnt = document.querySelector("#count");let guessBtn = document.querySelector("#b1");let flash = document.querySelector("#b2");//生成1-100的隨機(jī)數(shù)//floor表示只取浮點(diǎn)數(shù)整數(shù)部分let ansNumber = Math.floor(Math.random() * 100) + 1;//實(shí)現(xiàn)按鈕猜數(shù)字的點(diǎn)擊事件guessBtn.onclick = function(){
//輸入框沒(méi)有值，表示用戶沒(méi)有輸入，不處理
if(input.value == '') {
return;
}
let guessNumber = parseInt(input.value);
if (guessNumber > ansNumber) {
ret.innerHTML = "YO!猜大了！";
ret.style.color = "red";
} else if (guessNumber < ansNumber) {
ret.innerHTML = "YO!猜小了！";
ret.style.color = "red";
} else {
ret.innerHTML = "Bingo!猜對(duì)了！";
ret.style.color = "green";
}
if (ret.innerHTML != "Bingo!猜對(duì)了！") {
let guessCount = parseInt(cnt.innerHTML) + 1;
cnt.innerHTML = guessCount;
}}//點(diǎn)擊flash按鈕刷新頁(yè)面，重置游戲、flash.onclick = function() {
location.reload();}頁(yè)面代碼：
<!DOCTYPE html><html lang="ch"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜數(shù)字</title></head><body>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: aliceblue;
}
h4 {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
color: blueviolet;
margin: 10px 0;
}
.guessp {
width: 100%;
height: 30px;
text-align: center;
display: flex;
justify-content: center;
}
.guessp #b1{
height: 20px;
width: 20%;
background-color: rgb(100,200,255);
color: aliceblue;
border: 0cm;
border-radius: 5px;
}
.guessp #b1:active{
background-color: gray;
}
.guessp #guess{
width: 50%;
height: 20px;
border: 1px solid rgb(100,200,255);
border-radius: 5px;
text-indent: 0.6em;
outline: none;
}
.guessp #number{
width: 30%;
text-align: right;
}
.guessp #in {
width: 70%;
margin-left: 2%;
text-align: left;
}
.cnt, .ret{
width: 100%;
height: 30px;
text-align: center;
}
.rev{
width: 100%;
height: 20px;
text-align: center;
}
.rev #b2{
margin: 4px;
height: 20px;
width: 100px;
background-color: rgb(100,200,100);
color: aliceblue;
border: 0cm;
border-radius: 5px;
}
.rev #b2:active{
background-color: gray;
}
.ret, .cnt{
width: 100%;
height: 30px;
display: flex;
justify-content:center;
}
.guessp #messr, .guessp #messc {
width: 30%;
text-align: right;
}
.guessp #result, .guessp #count{
width: 70%;
text-align: left;
margin-left: 5%;
}
</style>
<h4>猜數(shù)字游戲</h4>
<p class="guessp">
<span id="number">要猜的數(shù)字:</span>
<span id="in">
<input id="guess" type="text" value placeholder="請(qǐng)猜1-100之間的數(shù)字，否則你永遠(yuǎn)猜不對(duì)!">
<button id="b1">我就要猜它</button>
</span>
</p>
<p class="guessp">
<span id="messr">結(jié)果:</span>
<span id="result">你還沒(méi)有猜哦！</span>
</p>
<p class="guessp">
<span id="messc">次數(shù):</span>
<span id="count">0</span>
</p>
<p class="rev">
<button id="b2">
開(kāi)始/重新開(kāi)始猜數(shù)字 </button>
</p>
<script src="./猜數(shù)字.js">
</script>
</body></html>實(shí)際效果：
2.2表白墻
目標(biāo)頁(yè)面
JavaScript代碼：
//獲取元素let loveBtn = document.querySelector("#submit");let adv = ["深情地", "溫柔地", "隨便地", "緊張地", "幽默地", "滑稽地", "開(kāi)心地", ""];//用戶點(diǎn)擊表白將表白記錄顯示在表白按鈕下面let record = [];let i = 0;loveBtn.onclick = function() {
//1.獲取表白內(nèi)容
let inputs = document.querySelectorAll("input");
let from = inputs[0].value;
let to = inputs[1].value;
let message = inputs[2].value;
//2.如果有一項(xiàng)內(nèi)天為空，不處理
if (from == '' || to == '' || message == '') {
return;
}
//3.匯總表白語(yǔ)言
let n = adv.length;
let index = (Math.floor(Math.random() * 1000) + 1) % n;
let romAdv = adv[index];
let loveMess = from + romAdv + "對(duì)" + to + "說(shuō)" + message;
record[i] = "留言" + (i+1) + ":" + loveMess;
//4.新建結(jié)點(diǎn)，插入表白記錄
let p = document.createElement("p");
p.innerHTML = record[i];
p.className = 'oh';
let container = document.querySelector(".container");
container.appendChild(p);
i++;
//5.表白完，清空輸入框
for (let i = 0; i < inputs.length; i++) {
inputs[i].value = '';
}}頁(yè)面代碼：
<!DOCTYPE html><html lang="ch"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墻</title></head><body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: aliceblue;
}
.container {
width: 100%;
}
h4 {
text-align: center;
padding: 30px 0;
font-size: 24px;
color: rgb(255, 140,160);
}
p {
text-align: center;
color: gray;
padding: 5px 0;
}
.row {
width: 400px;
height: 50px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.row span{
width: 100px;
height: 40px;
text-align:center;
padding-right: 0px;
font-size: 24px;
color: rgb(255, 140,160);
}
.row input{
width: 300px;
height: 40px;
border: 2px solid rgb(255, 140,160);
border-radius: 5px;
outline: 0;
text-align: left;
padding-left: 0px;
margin-left: 0px;
text-indent: 0.4em;
font-size: 20px;
color: rgb(100,160,255);
}
.row #submit{
width: 200px;
height: 40px;
border-radius: 10px;
font-size: 24px;
border: 0px solid rgb(255, 140, 160);
background-color: rgb(255, 140, 160);
color: aliceblue;
line-height: 40px;
margin-top: 8px;
}
.row #submit:active{
background-color: rgb(140,180,255);
}
.oh {
width: 100%;
height: 30px;
margin-top: 8px;
font-size: 16px;
color: rgb(180,140,220);
text-align: center;
line-height: 30px;
}
</style>
<p class="container">
<h4>"真的是"表白墻</h4>
<p>輸入后點(diǎn)擊提交, 會(huì)將信息顯示在表白按鈕下方</p>
<p>這是一個(gè)正經(jīng)的表白墻，這真的不是一個(gè)表白墻</p>
<p></p>
<p class="row">
<span>是誰(shuí):</span>
<input type="text" value placeholder="大白">
</p>
<p class="row">
<span>向誰(shuí):</span>
<input type="text" value placeholder="小白">
</p>
<p class="row">
<span>說(shuō):</span>
<input type="text" value placeholder="你好">
</p>
<p class="row">
<button id="submit">表白</button>
</p>
</p>
<script src="./表白墻0.0.js"></script></body></html>實(shí)際效果：
以上就是“JavaScript DOM API怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目：JavaScriptDOMAPI怎么使用
網(wǎng)站URL：http://chinadenli.net/article28/jiigjp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、微信公眾號(hào)、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 教你怎樣更好地選擇網(wǎng)站建設(shè)建站公司? 2016-10-20
- 找不到專業(yè)建站公司？上海網(wǎng)站建設(shè)公司推薦 2016-08-13
- 深圳建站公司淺談網(wǎng)站的運(yùn)營(yíng)模式 2022-05-26
- 成都建站公司教你建站要點(diǎn) 2016-11-02
- 成都建站公司解答定制網(wǎng)站建設(shè)的優(yōu)勢(shì) 2023-03-27
- 成都建站公司如何跟上移動(dòng)互聯(lián)網(wǎng)腳步？ 2023-03-05
- 選擇建站公司需的幾個(gè)標(biāo)準(zhǔn) 2017-10-02
- 海珠區(qū)外貿(mào)建站公司：專注歐美英文網(wǎng)頁(yè)設(shè)計(jì)制作！ 2016-02-07
- 為什么要找建站公司建設(shè)營(yíng)銷(xiāo)型網(wǎng)站？ 2015-05-15
- 找建站公司制作網(wǎng)須做好哪些準(zhǔn)備！ 2022-12-01
- 如何制作自己的網(wǎng)站 北京建站公司 2021-05-22
- 不一樣的建站公司為何建站價(jià)錢(qián)會(huì)少許多 2016-11-16