主要学习dom查询相关的
草稿代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
}
</style>
<script type="text/javascript">
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function () {
// var btn = document.getElementById("btn");
// btn.onclick = function () {
// var ul = document.getElementsByTagName("ul");
// console.log(ul);
// console.log(ul.length);
// var cns = ul.item(0).firstChild;
// console.log(cns);
// alert(cns.length);
// }
myClick("btn", function () {
var ul = document.getElementsByTagName("ul");// HTMLCollection
console.log(ul);
console.log(ul.length);
console.log(ul.namedItem("ul")); // 这里相当于item(0);找到HTMLCollection中id为ul的ul标签对象
var cns = ul.item(0).firstChild.nextElementSibling;
// cns为第一个ul标签对象ul[0]的第一个孩子节点li的下一个兄弟元素节点
// 这里是空白文本节点的下一个节点,即<li>li1</li>
// nextElementSibling会跳过文本节点和注释节点
// nextSibling不会跳过
console.log(cns);
console.log(cns.nodeName); // 查看文章后面的节点属性图,元素节点会打印标签名
//console.log(cns.nextSibling.nextElementSibling);
alert(cns);
alert(cns.innerText);
});
}
</script>
</head>
<body>
<ul id="ul">
<li>li1</li><!-- 123 -->
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
<button id="btn">按钮</button>
</body>
</html>
运行效果(点击按钮后):
知识点摘要:
children 属性返回元素的子元素的集合,是一个 HTMLCollection 对象。
提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量,然后使用序列号(index,起始值为0)访问每个子元素。
children 属性与 childNodes 属性的差别:
- childNodes 属性返回所有的节点,包括文本节点、注释节点;
- children 属性只返回元素节点;
如果节点是文本节点和属性节点,innerText和nodeValue是一个效果。
dom其他方法:
<!DOCTYPE html>
<html>
<head>
<title>dom查询</title>
<script>
window.onload = function () {
var body = document.getElementsByTagName("body")[0];
console.log(body);
var body2 = document.body; // body和body2效果一样
console.log(body2);
var html = document.documentElement; // html标签
console.log(html);
console.log("==============");
var all = document.all;
console.log(all);
console.log(all.length);
console.log(typeof all); // undefined
for (let i = 0; i < all.length; ++i) {
console.log("===" + all[i]);
console.log("===typeof:" + typeof all[i]);
}
console.log("============");
var all2 = document.getElementsByTagName("*"); // all和all2除了typeof属性不同,其余效果一样
console.log(all2);
console.log(all2.length);
console.log(typeof all2); // object
}
</script>
</head>
<body></body>
</html>
运行结果图:
===============Talk is cheap, show me the code================