JavaScript DOM 元素查找

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

  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%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  
  

  完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。

  前端实习面试的套路

  ---

  回顾项目

  往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

  面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

  重点在于基础知识

  这里指的基础知识包括：前端基础知识和学科基础知识。

  前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

  学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
  你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
  这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

  opics/618191877)。

  前端实习面试的套路

  ---

  回顾项目

  往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

  面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

  重点在于基础知识

  这里指的基础知识包括：前端基础知识和学科基础知识。

  前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

  学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
  你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
  这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。