js基础_59、DOM查询
获取元素节点
通过document对象调用
getElementById()
–—通过id属性获取一个元素节点对象
getElementsByTagName()
–—通过标签名获取一组元素节点对象，这个方法给我们返回一个类数组对象，所有查询到的元素都会封装到类数组对象(arguments)中，即使查询到的元素只有一个，也会封装到数组中返回。
getElementByName()
–—通过name属性获取一组元素节点对象
innerText：该属性可以获取到元素内部的文本内容，它和innerHtml相似，不同的是，它会自动将html去除。innerText获取到内容没有元素标签，是纯文本，而innerHtml获取的内容有标签。
innerHtml：用于获取元素内部的HTML代码的(针对于双标签，单标签没有内部的HTML代码)。对于自结束标签，这个属性没有任何意义。
比如：
<p>内部代码文本</p>//有内部代码
<input type="radio" value="值文本"/>无内部代码
如果要读取一个节点的属性，直接使用 元素.属性名
比如：
元素.id
元素.name
注意：class属性不能采用这种方式，读取class属性要用： 元素.ClassName
获取元素节点的子节点
通过具体的元素节点调用
getElementsByTagName()
—-方法，，返回当前节点的指定标签名的后代节点（根据标签名来指定当前节点的后代节点）
比如：
var city=document.getElementById(“city”);
var citys=city.getElementsByTagName(“li”);
childNodes
—-属性，表示当前节点的所有子节点，会获取包括文本节点在内的所有节点，根据DOM标签与标签之间的空白(包括换行)也会当成文本节点。注意：在IE8及以下的浏览器中，不会将空白文本当成子节点。
firstChild
—-属性，表示当前节点的第一个子节点，可以获取到当前元素的第一个子节点(包括空白文本节点，换行符也算空白文本节点)
lastChild
—-属性，表示当前节点的最后一个子节点
获取元素节点的子元素（获取子元素节点）
children属性
可以获取当前元素的所有子元素。（获取元素节点）
firstElementChild属性
可以获取当前元素的第一个子元素。
不支持IE8以下的浏览器
var phone2=phone.firstElementChild;
获取父节点和兄弟节点
通过具体的节点调用
parentNode
—-属性，表示当前节点的父节点
previousSibling
—-属性，表示当前节点的前一个兄弟节点(包括空白文本节点，换行符也算空白文本节点)
nextSibling
—-属性，表示当前节点的后一个兄弟节点
获取元素节点的兄弟元素（获取兄弟元素节点，不会获取文本节点）
previousElementSibling属性：获取元素节点的兄弟元素
var nownode=document.getElementById(“android”);
var nd=nownode.previousElementSibling;
查询练习：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
<script>
//定义一个函数，专门用来为指定元素绑定单击响应函数。参数：btnid要绑定单击响应函数的对象的id属性值
//fun 事件的回调函数，当单击元素时，该函数将会被触发。
var myClick=function(btnid,fun){
//查找#bj节点
var btn=document.getElementById(btnid);
btn.onclick=fun;
}
window.onload=function(){
//查找#bj节点
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
var bj=document.getElementById("bj");
alert(bj.innerHTML);
}
//查找所有li节点
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
var bj=document.getElementsByTagName("li");
for (var i=0;i<bj.length;i++) {
alert(bj[i].innerHTML);
}
}
//查找name=gender的所有节点
var btn03=document.getElementById("btn03");
btn03.onclick=function(){
var city=document.getElementsByName("gender");
for (var i=0;i<city.length;i++) {
alert(city[i].value);
}
}
//查找#city下所有li节点
myClick("btn04",function(){
var lis=document.getElementById("city");
var liarray=lis.getElementsByTagName("li");
for (var i=0;i<liarray.length;i++) {
alert(liarray[i].innerHTML);
}
});
//返 回#city的所有子节点
var btn05=document.getElementById("btn05");
btn05.onclick=function(){
var city=document.getElementById("city");
var citys=city.childNodes;//var citys=city.children;获取子元素
for (var i=0;i<citys.length;i++) {
alert(citys[i].innerHTML);
}
}
//返回#phone的第一个子节点
var btn06=document.getElementById("btn06");
btn06.onclick=function(){
var phone=document.getElementById("phone");
//var phone2=phone.firstElementChild;
//var phone2=phone.childNodes[0];
var phone2=phone.firstChild;//都是获取节点
alert(phone2.innerHTML);
}
//返回#bj的父节点
myClick("btn07",function(){
var nowNode=document.getElementById('bj');
var myparent=nowNode.parentNode;
alert( myparent.innerText);
})
//返回#android的前一个兄弟节点
myClick("btn08",function(){
var nownode=document.getElementById("android");
//var nd=nownode.previousElementSibling;
var nd=nownode.previousSibling;
alert(nd.innerHTML);
})
//读取#username的value属性值
myClick("btn09",function(){
var val=document.getElementById("username");
alert(val.value);
})
//设置#username的value属性值
myClick("btn10",function(){
var val=document.getElementById("username");
val.value='hello word';
})
//返回#bj的文本值
myClick("btn11",function(){
var val=document.getElementById("bj");
alert(val.firstChild.nodeValue);
})
}
</script>
</head>
<body>
<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 class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" 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>
</body>
</html>
css代码：
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！