JavaScript DOM 元素查找

//直接获取

console.log(document) // document

console.log(document.documentElement) // html

console.log(document.head) // head

console.log(document.body) // body

按节点间的关系查找

---

Node 类型中定义了节点树中所有节点彼此间关系属性。

- 父节点（parent node）

- 子节点（child node）

- 兄弟节点（sibling）

节点树的节点彼此拥有层级关系，Node类型使用如下属性关联节点树上的内阁节点对象：

HTML

hello

标题一

• 查看全部

• JavaScript

  // 按节点关系查找

  // parentNode 父节点

  // childNodes 父节点集合

  // firstNode 第一个子节点

  // lastNode 最后一个子节点

  // previousSibling 前一个兄弟节点

  // nextSilbing 下一个兄弟节点

  //查看body的父节点

  console.log(document.body.parentNode) // html

  //查看HTML的直接子节点

  console.log(document.documentElement.childNodes) // 类数组集合

  console.log(document.documentElement.childNodes[0]) //

  console.log(document.documentElement.childNodes[1]) //

  console.log(document.documentElement.childNodes[2]) //

  // 查看 body 的直接子节点

  console.log(document.body.childNodes)

  // 查看body下的span

  console.log(document.body.firstChild.nextSibling)

  // 从body访问head

  console.log(document.body.previousSibling.previousSibling)

  按元素间关系查找

  ---

  仅包含元素节点不包含文字节点的树结构，我们称之为元素树。

  元素树不是一颗新的树，仅是节点树中所有元素节点组成的子集。

  通过元素树选取元素，可以吧空字符节点和文本节点忽略掉，只选取元素节点。

  

  通过元素树来选取元素，他和节点树的属性是一一对应的

  

  html :

  hello

  标题一
• 查看全部

• 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

  Hello Word!
• 电影
• 综艺
• 跑男
• 奇葩说
• 电视剧
• 男

  女

  JavaScript

  // 遍历所有的 li 元素

  var lis = document.getElementsByTagName(“li”)

  for (var i = 0; i < lis.length; i++) {

  console.log(lis[i])

  }

  

  如何遍历

  

  遍历代码优化：

  // 遍历所有的 li 元素

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

  遍历代码优化：

  // 遍历所有的 li 元素

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-mWnGBQqy-1715463628602)]

  [外链图片转存中…(img-hKTRbjiu-1715463628602)]

  [外链图片转存中…(img-sFdKDM3Z-1715463628602)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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