本文介绍了JavaScript中的DOM查询方法，包括通过document对象获取元素的方法如getElementById、getElementsByTagName和getElementsByName，以及通过元素节点获取子节点、父节点和兄弟节点的方法，如getElementsByTagName、childNodes、parentNode等。
Dom查询方法
一 ，获取元素节点
通过document对象调用
1.getElementById() 通过id属性获取一个元素节点对象
2.getElementsByTagName() 通过标签名获取一组元素节点对象
3.getElementsByName() 通过name属性获取一组元素节点对象
二，获取元素节点的子节点
通过具体的元素节点调用
1.getElementByTagName() 返回当前节点的指定标签名后代节点
2.childNodes 表示当前节点的所有子节点 chlidren属性可以获取当前元素的所有子元素
3.firstChild 表示当前节点的第一个子节点 firstElementChild获取当前元素的第一个子元素
4.lastChild 表示当前节点的最后一个字节点
三，获取父节点和兄弟节点
通过具体的节点调用
1.parentNode 表示当前节点的父节点
2.previousSibling 表示当前节点的前一个兄弟节点
3.nextSibling 表示当前节点的后一个兄弟节点
题目：
查找#bj的节点
查找所有li的节点
查找name=gender的节点
查找#city下所有li的节点
返回#city下所有子节点
返回#phone的第一个子节点
返回#bj的父节点
返回#android的前一个兄弟节点
返回#username的value属性值
设置#username的value属性值
返回#bj的文本值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM查询</title>
<style>
.total{
width:400px;
height:650px;
border:1px solid red;
}
li{
color:#20E15A;
}
</style>
<script>
/*
定义一个函数 ，专门用来为指定元素绑定单击响应函数
参数：
idstr 要绑定单击响应函数的对象的id属性值
*/
function Myclick(idstr,fun){
var btn=document.getElementById(idstr);
btn.onclick=fun;
}
window.onload=function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//查找#bj的节点
var bj=document.getElementById("bj");
alert(bj.innerHTML);
}
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
//查找所有li的节点
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会分装到对象中
var li=document.getElementsByTagName("li");
for(var i=0;i<=li.length;i++){
alert(li[i].innerHTML);
/*
innerHTML用于获取内部的HTML代码的
对于自结束标签，这个属性没有意义
*/
}
}
var btn03=document.getElementById("btn03");
btn03.onclick=function(){
//查找name=gender的节点
var gender=document.getElementsByName("gender");
for(
最低0.47元/天 解锁文章
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
