获取属性节点的N种方式

document对象：

本身是window对象上的一个子对象。
我们写的Html代码，载入到浏览器中，就会形成document对象。
利用document对象，就可以获取dom树上的元素节点。

---

了解内容：

document.head  了解
    获取head元素
document.title  了解
    获取不是title元素，是title标签中的文本节点
document.body  了解
    获取body元素
document.childNodes  了解
    获取所有的子节点
document.children 了解
    获取所有的元素节点
....

---

根据ID获取元素节点： 重要

let app1 = document.getElementById("app1")

---

根据标签名获取元素节点： 重要

let divs = document.getElementsByTagName("div")
for (let div of Array.from(divs)) {
    console.log(div)
}

---

根据name获取元素节点： 了解 有兼容性问题

let res = document.getElementsByName("div1")
for (let div of Array.from(res)) {
    console.log(div)
}

---

根据class的名字获取元素节点： 了解 有兼容性问题

let res = document.getElementsByClassName("div1")
for (let div of Array.from(res)) {
    console.log(div)
}

---

根据选择器来获取一个元素名点：

// .son 类选择器 querySelector选择满足条件的第1个元素
// let res = document.querySelector(".son")
// .father .son 后代选择器

let res = document.querySelector(".father .son")
console.log(res)

---

根据选择器来获取多个元素名点：

// querySelectorAll  选中所有   querySelectorAll返回值也是一个伪数组
let res = document.querySelectorAll(".father .son")
console.log(res)
console.log(Array.isArray(res))
console.log(Array.from(res))

---

通过节点关系来获取某一个元素节点：

parentNode  获取父节点   重要  没有兼容性问题  忽略换行节点
parentElement 获取父节点    重要  没有兼容性问题

---

firstChild

获取标签中第一个子节点  不要用 因为它会考虑换行节点 注释节点

firstElementChild

 获取标签中第一个子元素节点  可以使用

代码：

let father = document.querySelector(".father")
console.log(father.firstChild); // 获取是换行节点

console.log(father.firstElementChild); // 获取子元素节点

lastChild

获取标签中最后一个子节点  不要用 因为它会考虑换行节点 注释节点

lastElementChild

 获取标签中最后一个子元素节点  可以使用

代码：

let father = document.querySelector(".father")
console.log(father.lastChild); // 获取换行节点
console.log(father.lastElementChild); // 获取元素节点

---

nextSibling:

获取下一个兄弟节点  会有换行节点影响

nextElementSibling:

获取下一个兄弟节点

---

previousSibling:

获取上一个兄弟节点  会有换行节点影响

previousElementSibling:

获取上一个兄弟节点

---

总结：

获取一个或多个元素节点方案：
1） document.head  document.title  document.body
2） 根据ID获取元素节点  document.getElementById("app1")
3） 根据标签名获取元素节点  document.getElementsByTagName("div")
4） 根据name获取元素节点  document.getElementsByName("div1")
5） 根据class的名字获取元素节点 document.getElementsByClassName("div1")
6） 根据选择器来获取一个元素名点 document.querySelector(".father")  document.querySelectorAll(".father .son")
7） 通过节点关系来获取某一个元素节点
    parentElement
    firstElementChild
    lastElementChild
    nextElementSibling:
    previousElementSibling:
    children

---

你只需要记的：

1）根据ID获取元素节点  document.getElementById("app1")   非常标准的
2）根据标签名获取元素节点  document.getElementsByTagName("div")   非常标准的
3）根据选择器来获取一个元素名点 document.querySelector(".father")  document.querySelectorAll(".father .son")
4）parentElement

---