JS-19-获取DOM元素

一、JavaScript-DOM开篇

1.什么是window?
window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象；

2.什么是document?
document是window的一个属性, 这个属性是一个对象；
document: 代表当前窗口中的整个网页；
document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容；

3.什么是DOM?
DOM 定义了访问和操作 HTML文档(网页)的标准方法；
DOM全称: Document Object Model, 即文档模型对象；
所以学习DOM就是学习如何通过document对象操作网页上的内容；

---

二、JavaScript-获取DOM元素上

1.在JavaScript中HTML标签也称之为DOM元素；
2.使用document的时候前面不用加window；

1.通过id获取指定元素：
由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null;

• 注意点: DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象);

let oDiv = document.getElementById("box");

2.通过class名称获取：
由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组;

let oDivs = document.getElementsByClassName("father");

3.通过name名称获取：
由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组;

• 注意点: getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素。

let oDivs = document.getElementsByName("test");

4.通过标签名称获取：
由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组;

let oDivs = document.getElementsByTagName("div");

5.通过选择器获取:
querySelector只会返回根据指定选择器找到的第一个元素;

 // let oDiv = document.querySelector("#box");
 // let oDiv = document.querySelector(".father");
 let oDiv = document.querySelector("div>form");

6.通过选择器获取:
querySelectorAll会返回指定选择器找到的所有元素;

let oDivs = document.querySelectorAll(".father");

---

三、JavaScript-获取DOM元素下

1.获取指定元素所有的子元素:

 let oDiv = document.querySelector("div");
 // children属性获取到的是指定元素中所有的子元素
 // console.log(oDiv.children);
 // childNodes属性获取到的是指定元素中所有的节点（包括元素和文本）
 // console.log(oDiv.childNodes);
 for(let node of oDiv.childNodes){
     // console.log(node.nodeType);
     // if(node.nodeType === 1){      // 只要节点中的元素；
     if(node.nodeType === Node.ELEMENT_NODE){
         console.log(node);
     }
 }

2.什么是节点?
DOM对象(document), 这个对象以树的形式保存了界面上所有的内容;
HTML页面每一部分都是由节点(标签(元素),文本,属性);

3.获取指定节点中的第一个子节点:

    // let oDiv = document.querySelector("div");
    // console.log(oDiv.firstChild);
    //   获取指定元素中的第一个子元素
    // console.log(oDiv.firstElementChild);

4.获取指定节点中最后一个子节点:
console.log(oDiv.lastChild);
获取指定元素中最后一个子元素
console.log(oDiv.lastElementChild);

5.通过子元素获取父元素/父节点:

let item = document.querySelector(".item");
// console.log(item.parentElement)
// console.log(item.parentNode);

6.获取相邻上一个节点:
console.log(item.previousSibling);
获取相邻上一个元素
console.log(item.previousElementSibling);

7.获取相邻下一个节点:
console.log(item.nextSibling);
// 获取相邻下一个元素
console.log(item.nextElementSibling);

---

-End