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
Hello World!
- 电影
- 综艺
- 跑男
- 奇葩说
- 电视剧
男
女
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些简单的前端面试题以及学习路线给大家,狂戳这里即可免费领取
!**
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-z75rUx97-1712115485535)]
[外链图片转存中…(img-mLEaK0Vo-1712115485536)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-nUmJIGtB-1712115485537)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些简单的前端面试题以及学习路线给大家,狂戳这里即可免费领取
[外链图片转存中…(img-fRg5C9fi-1712115485537)]