JavaScript
// 按元素关系查找
// parentElement 父元素
// children 子元素集合
// firstElementChild 第一个子元素
// lastElementChild 最后一个子元素
// previousElementSibling 前一个兄弟元素
// nextElementSilbing 下一个兄弟元素
//查看body的父元素
console.log(document.body.parentElement) // html
//查看HTML的直接子元素
console.log(document.documentElement.children) // 类数组集合
console.log(document.documentElement.children[0]) //
console.log(document.documentElement.children[1]) //
// 查看 body 的直接子元素
console.log(document.body.children)
// 查看body下的span
console.log(document.body.firstElementChild)
// 从body访问head
console.log(document.body.previousElementSibling)
按 HTML 查找
按 HTML 查找元素,可以快速的定位到目标元素上。
四种方式:
- 按 id 查找
- 按 name 查找
- 按 标签名 查找
- 按 class 查找
按 id 查找
可查找具有某个 id 属性的元素。
- document.getElementById(" id 值 ");
返回一个元素对象。
如果没有找到,返回 null。
只能在 document 上调用。
按 name 查找
可查找具有某个 name 属性值得元素,用于表单元素和具有 name 属性的锚点元素。
- document.getElementsByName(" name 值 ");
返回一个动态元素集合。
如果没有找到,则返回空集合。
只能在 document 上调用。
按 标签名 查找
可查找某个父元素下,具有指定标签名的后代元素。
- parent.getElementsByTagName(" 标签名 ");
返回一个动态元素集合。
如果没有找到,返回空集合。
可在任意父元素上调用。
按 class 查找
可查找某个父元素下,具有指定 class 属性值得后代元素。
- parent.getElementsByClassName(" class 名 ")
返回一个动态的元素集合。
如果没找到,返回空集合。
可在任意父元素上调用。
代码案例
HTML:
Hello Word!
- 电影
- 综艺
- 跑男
- 奇葩说
- 电视剧
男
女
JavaScript
/* 按 HTML 查找
document.getElementById(“id”)
document.getElementsByName(“name”)
parent.getElementsByTagName(“tagName”)
parent.getElementsByClassName(“class”)
*/
// 查找id为nav的元素
console.log(document.getElementById(“nav”));
// 查找id为n的元素 ,没有输出为 null
console.log(document.getElementById(“n”));
// 查找name 为 gender的元素
console.log(document.getElementsByName(“gender”))
console.log(document.getElementsByName(“gender”)[0])
console.log(document.getElementsByName(“gender”).length)
// 查找所有的 li 元素
console.log(document.getElementsByTagName(“li”))
// 查找 id 为subnav 下所有的的li
console.log(document.getElementById(“subnav”).getElementsByTagName(“li”))
var subnav = document.getElementById(“subnav”)
var subli = subnav.getElementsByTagName(“li”)
console.log(subli)
// 查找所有class为 active 的元素
console.log(document.getElementsByClassName(“active”))
console.log(document.getElementsByClassName(“a”))
元素遍历
HTML
DOM Tree Hello Word!
- 电影
- 综艺
- 跑男
- 奇葩说
- 电视剧
男
女
JavaScript
// 遍历所有的 li 元素
var lis = document.getElementsByTagName(“li”)
for (var i = 0; i < lis.length; i++) {
console.log(lis[i])
}
如何遍历
遍历代码优化:
// 遍历所有的 li 元素
var lis = document.getElementsByTagName(“li”)
for (var i = 0, len = lis.length; i < len; i++) {
console.log(lis[i])
}
实现显示和隐藏
HTML
考勤管理
- 日常考勤
- 请假申请
- 加班/出差
-
操作流程
案例代码
HTML
考勤管理
- 日常考勤
- 请假申请
- 加班/出差
JavaScript
// 1.构建 DOM 树
// 2.查找触发事件的元素
var tree = document.getElementById(“tree”);
var h3 = tree.firstElementChild;
console.log(h3)
// 3.绑定事件 elem.onclick = function(){/* 处理程序 */}
h3.onclick = function () {
// 4.查找要修改的元素
var ul = h3.nextElementSibling;
// 5.修改 获取或修改 class : elem.className = 新值
if (ul.className == “show” || ul.className == “”) {
ul.className = “hide”; // 改为 隐藏
} else {
ul.className = “show”; // 改为 显示
}
}
安 选择器 查找
可以按 css 的选择器查找,查找父元素下的后代元素。
- parent.querySelector(" selector ");
- 返回匹配到的第一个元素。
- parent.querySelectorAll(" selector ");
-
返回一个非动态元素集合。
-
若没找到,返回空集合。
案例
HTML