<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>調查表</title>
<style>
*{
margin:0;
padding:0;
}
#total{
width:300px;
height:200px;
margin:0 auto;
border:1px solid black;
}
#city li,#game li,#phone li{
list-style: none;
float: left;
border:1px solid black;
margin:0 10px;
background-color: green;
}
.inner1{
width:300px;
height: 80px;
border:1px solid black;
margin: 10px auto 0;
}
#btnList div button{
width:220px;
margin-top:10px;
}
#btnList div button:hover{
color:red;
background-color: yellow;
}
</style>
<script>
/*定義函式：專門為指定元素系結單擊回應函式
*引數：idStr:系結單擊回應函式的物件id屬性值
* */
function myClick(idStr,fun){
const btn = document.getElementById(idStr);
btn.onclick=fun;
}
window.onload=function () { //此處不加，會導致頁面無法顯示
myClick("btn01",function () {
//查找#bj節點
const bj = document.getElementById("bj");
//列印bj
//通過innerHTML獲取元素內部的html代碼
alert(bj.innerHTML);
});
myClick("btn02",function () {
//查找li節點，封裝到陣列中
const lis = document.getElementsByName("li");
// alert(lis.length);
for(let i=0; i<lis.length; i++){
alert(lis[i].innerHTML)
}
});
myClick("btn03",function () {
//查找name=gender的所有節點
const inputs = document.getElementsByName("gender");
// alert(inputs.length);
for(let i=0; i<inputs.length; i++){
//innerHTML用于獲取元素內部的HTML代碼，但是Input沒有內部，對于單標簽沒有意義
//讀取元素的屬性
alert(inputs[i].value)
/*如果讀取元素節點屬性，直接使用元素.屬性名
例子： 元素.id 元素.name 元素.value
注意：class屬性不能采用這種方式，可以使用 元素.className*/
}});
myClick("btn04",function () {
// 查找#city下的所有li節點
//獲得id為city的元素
const city = document.getElementById("city");
//查找#city下所有li節點
const lis = city.getElementsByTagName('li');
for(let i=0; i<lis.length; i++){
alert(lis[i].innerHTML)
}});
//回傳#city下的所有子節點
// childNodes屬性會獲取包括文本節點在內的所有節點（包括空格也是文本）
// 注意：IE8以下的瀏覽器中不會將空白文本當成子節點
//children屬性可以獲取當前元素的所有子元素
myClick("btn05",function () {
const city = document.getElementById("city");
const cns = city.children;
alert(cns.length);
});
myClick("btn06",function () {
const phone=document.getElementById("phone");
//包括空白文本節點
// const pho1=phone.firstChild;
//firstElementChild獲得當前元素的第一個子元素
const pho1=phone.firstElementChild;
alert(pho1.innerHTML);
});
myClick("btn07",function () {
//回傳#bj的父節點
const bj=document.getElementById("bj");
const pn=bj.parentNode;
//alert(pn.innerHTML);
//innerText:該屬性可以獲取到元素內部的文本內容,與innerHTML不同，會自動將html標簽去除
alert(pn.innerText);
});
myClick("btn08",function () {
//回傳#android的前一個兄弟節點
const android=document.getElementById("android");
//前一個兄弟節點（可能獲取到空白的文本）
// const ad0=android.previousSibling;
//前一個元素兄弟
const ad=android.previousElementSibling;
alert(ad.innerText);
});
myClick("btn09",function () {
//讀取#username的value屬性值
const um=document.getElementById("username");
//讀取um的屬性值
alert(um.value);
});
myClick("btn10",function () {
//設定#username的value屬性值
const um=document.getElementById("username");
//設定um的屬性值
um.value="https://www.cnblogs.com/huaweimian/p/xxxxx";
});
myClick("btn11",function () {
//回傳#bj的文本值
const bj=document.getElementById("bj");
// alert(bj.innerText);
alert(bj.firstChild.nodeValue);
});
}
</script>
</head>
<body>
<div id="total">
<div >
<p>
你喜歡哪個城市？
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br/>
<br/>
<p>你喜歡哪款單機游戲?</p>
<ul id="game">
<li id="r1">紅警</li>
<li>實況</li>
<li>極品飛機</li>
<li>魔獸</li>
</ul>
<br/>
<br/>
<p>你手機的作業系統是?</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
</div>
<div >
<label>
gender:
<input type="radio" name="gender" value="https://www.cnblogs.com/huaweimian/p/male"/>
</label>
<label>
Male:
<input type="radio" name="gender" value="https://www.cnblogs.com/huaweimian/p/female"/>
</label>
Female
<br>
<br>
<label>
name:
<input type="text" name="name" id="username" value="https://www.cnblogs.com/huaweimian/p/abcde"/>
</label>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj節點</button></div>
<div><button id="btn02">查找所有li節點</button></div>
<div><button id="btn03">查找name=gender的所有節點</button></div>
<div><button id="btn04">查找#city下的所有li節點</button></div>
<div><button id="btn05">回傳#city下的所有子節點</button></div>
<div><button id="btn06">回傳#phone的第一個子節點</button></div>
<div><button id="btn07">回傳#bj的父節點</button></div>
<div><button id="btn08">回傳#android的前一個兄弟節點</button></div>
<div><button id="btn09">讀取#username的value屬性值</button></div>
<div><button id="btn10">設定#username的value屬性值</button></div>
<div><button id="btn11">回傳#bj的文本值</button></div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7211.html
標籤：JavaScript