JavaScript DOM 元素查找(1)

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 元素

  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