dom查询
程序员文章站
2022-06-17 18:58:21
你喜欢哪个城市?
- 北京
- 上海
- 东京
- 首尔
<div id="total">
<div class="inner">
<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="rl">红警</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 class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</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>
<script>
var btn01 = document.getElementById("btn01")
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj")
// 通过innerHTML这个属性可以获取元素内部内容
alert(bj.innerHTML)
}
var btn02 = document.getElementById("btn02")
btn02.onclick = function(){
//查找所有li节点
var list = document.getElementsByTagName("li")
console.log(list)
for(var i = 0; i < list.length;i++){
alert(list[i].innerHTML)
}
}
//查找name=gender的所有节点
var btn03 = document.getElementById("btn03")
btn03.onclick = function(){
//查找所有li节点
var genders = document.getElementsByName("gender")
// console.log(genders)
for(var i = 0; i < genders.length;i++){
alert("hello")
}
}
//查找#city下所有li节点
var btn04 = document.getElementById("btn04")
btn04.onclick = function(){
查找#city下所有li节点
var city = document.getElementById("city")
console.log(city)
var list = city.getElementsByTagName("li")
for(var i = 0; i < list.length;i++){
alert(list[i].innerHTML)
}
}
var btn05 = document.getElementById("btn05")
btn05.onclick = function(){
//返回#city的所有子节点
var city = document.getElementById("city")
console.log(city)
// 返回 #city元素下所有的子节点
var list = city.childNodes
console.log(list)
// 返回#city元素下所有的子元素
var list1 = city.children
console.log(list1)
}
//返回#phone的第一个子节点
var btn06 = document.getElementById("btn06")
btn06.onclick = function(){
var phone = document.getElementById("phone")
console.log(phone)
// 返回 #phone元素下所有的子节点
var list = phone.childNodes
console.log(list)
// 返回#city元素下所有的子元素
// var list1 = phone.children
// console.log(list1)
}
//返回#bj的父节点
//返回#android的前一个兄弟节点
//读取#username的value属性值
//设置#username的value属性值
//返回#bj的文本值
}
</script>
本文地址：https://blog.csdn.net/weixin_51958409/article/details/110221038
上一篇： 初识计算机和Java语言
下一篇： 6张图！5G六大细分领域产业图谱