dom查询
2022-07-17 本文已影响0人
冰点雨
1.dom查询
var html = document.documentElement;
var body = document.body;
// 页面中的所有元素
var all = document.all;
document.getElementsByClassName("box");
querySelector()
需要一个选择器的字符串作为参数，可根据一个css选择器来获取一个元素节点对象
使用该方法返回唯一一个元素，如果满足条件的元素有多个，那么它只会返回第一个
document.querySelector(".box div");
querySelectorAll() 和querySelector()用法类似，返回元素数组
var boxs = document.querySelectorAll("box");
console.log(boxs.length);//3
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
window.onload = function(){
var html = document.documentElement;
var body = document.body;
// 页面中的所有元素
var all = document.all;
var box = document.getElementsByClassName("box");
// 获取页面中所有div
var divs = document.getElementsByClassName("div");
/*
querySelector()
需要一个选择器的字符串作为参数，可根据一个css选择器来获取一个元素节点对象
使用该方法返回唯一一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box div");
/*
querySelectorAll()
和querySelector()用法类似，返回元素数组
*/
var boxs = document.querySelectorAll("box");
console.log(boxs.length);//3
}
</script>
</head>
<body>
<div class="box">
<div></div>
</div>
<div class="box">
<div></div>
</div>
<div class="box">
<div></div>
</div>
</body>
</html>
getElementById("bj") // 查找#bj节点
innerHtml 通过这个可以获取元素内部的HTML代码
getElementsByTagName("li") 查找所有li节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签 标签间空白也会当成文本节点
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
所以属性在IE8会返回4个元素而其他浏览器是9个
firstChild()获取当前元素的第一个子节点（包括空格）
firstElementChild()获取第一个子元素（不包含空格） 不支持IE8
lastChild() 获取当前元素的最后一个子节点（包括空格）
bj.parentNode;获取父节点
innerText
—— 该属性可以获取到元素内容
—— 和innerHTML类似，不同：会将HTML去掉
ad.previousSibling查找前一个兄弟节点
previousElementSibling获取前一个兄弟元素，不包含空格 IE8及以下不支持
WeChat91f0bd15d25c7ec076e0261bed8ecc7a.png
WeChat5a9b853f6e54cfbda80e4e3af6d531e6.png
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
// 查找#bj节点
var bj = document.getElementById("bj");
// innerHtml 通过这个可以获取元素内部的HTML代码
alert(bj.innerHTML);
};
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
// 查找所有li节点
var lis = document.getElementsByTagName("li");
// getElementsByTagName()根据标签名来获取一组节点元素对象，封装在类数组中
for(var i=0;i < lis.length;i++){
alert(lis[i].innerHTML);
}
};
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
// 查找name=sex的所有节点
var inputs = document.getElementsByName("sex");
for(var i=0;i < inputs.length;i++){
/*
innerHtml 取元素HTML内容，用于自结束标签
*/
/*
如果需要读取元素节点属性：
元素.属性名
例：元素.id 元素.name 元素.value
读取class 元素.className
*/
alert(inputs[i].value);
}
};
var btn4 = document.getElementById("btn4");
btn4.onclick = function(){
var city = document.getElementById("city");
// 查找#city下所有li节点
var lis = city.getElementsByTagName("li");
for(var i=0;i < lis.length;i++){
alert(lis[i].innerHTML);
}
};
var btn5 = document.getElementById("btn5");
btn5.onclick = function(){
var city = document.getElementById("city");
// 查找#city下所有子节点
/*
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签 标签间空白也会当成文本节点
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
所以属性在IE8会返回4个元素而其他浏览器是9个
*/
var cns = city.childNodes;
// children 获取当前元素的所有子元素
var cns2 = city.children;//4
};
var btn6 = document.getElementById("btn6");
btn6.onclick = function(){
var phone = document.getElementById("phone");
// 查找#phone的第一个子节点
/*
firstChild()获取当前元素的第一个子节点（包括空格）
firstElementChild()获取第一个子元素（不包含空格） 不支持IE8
*/
//
var first = phone.firstChild;
// lastChild() 获取当前元素的最后一个子节点（包括空格）
var last = phone.lastChild;
};
myClick("btn7",function(){
var bj = document.getElementById("bj");
// 查找#bj的父节点
var pn = bj.parentNode;
// alert(pn.innerHTML);
/*
innerText
—— 该属性可以获取到元素内容
—— 和innerHTML类似，不同：会将HTML去掉
*/
alert(pn.innerText);
});
myClick("btn8",function(){
var ad = document.getElementById("andriod");
// 查找#android的前一个兄弟节点
var ps = ad.previousSibling;
// previousElementSibling获取前一个兄弟元素，不包含空格 IE8及以下不支持
var ps1 = ad.previousElementSibling;
alert(ps);
});
// 查找#username的value属性值
myClick("btn9",function(){
var username = document.getElementById("username");
alert(username.value);
});
// 设置#username的value属性值
myClick("btn10",function(){
var username = document.getElementById("username");
username.value = "你好啊";
});
// 返回#bj的文本值
myClick("btn11",function(){
var bj = document.getElementById("bj");
// alert(bj.innerHTML);
// alert(bj.innerText);
var fir = bj.firstChild;
alert(fir.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>
<p>你喜欢哪个游戏？</p>
<ul id="game">
<li>王者荣耀</li>
<li>红警</li>
<li>QQ飞车</li>
</ul>
<br>
<p>你手机的系统是？</p>
<ul id="phone">
<li>iOS</li>
<li id="andriod">安卓</li>
<li>Windows iPhone</li>
</ul>
</div>
<div class="inner">
性别:
<input type="radio" name="sex" value="boy">
男
<input type="radio" name="sex" value="girl">
女
<br>
名字:
<input type="text" name="name" id="username" value="小花">
</div>
<div id="btnList">
<div><button id="btn1">查找#bj节点</button></div>
<div><button id="btn2">查找所有li节点</button></div>
<div><button id="btn3">查找name=sex的所有节点</button></div>
<div><button id="btn4">查找#city下所有li节点</button></div>
<div><button id="btn5">查找#city下所有子节点</button></div>
<div><button id="btn6">查找#phone的第一个子节点</button></div>
<div><button id="btn7">查找#bj的父节点</button></div>
<div><button id="btn8">查找#android的前一个兄弟节点</button></div>
<div><button id="btn9">查找#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</div>
</body>
</html>
