JavaScript——DOM

JavaScript——DOM

---

---

---

一、获取 DOM 元素

1.简介

文档对象模型，是可扩展语言标准的编程接口，通过DOM接口可以改变网页的内容，结构和样式。

2.DOM树

3.获取 DOM 元素

1.根据ID获取

<div id="list"></div>
    
let list = document.getElementByld("#list");

2.根据标签名获取

<div></div>
    
let list = document.getElementByTagName("div");

4.通过H5新增的方法获取

5.特殊元素获取

二、DOM 关系

1.常用节点类型

 - - 1 元素节点 （标签名称）
 - - 3 文本节点  (#text)
 - - 8 注释节点  (#comment)
 - - 9 document  (#document)
 - - 10 文档声明 (html)

2.查找节点

1.查找子级

 - childNodes 子节点 (包含所有节点: 文本节点、注释节点、元素节点……)    | - children 子元素 (只包含元素节点)

<div id="div">
    <p>p1</p>
    <h3>h1</h3>
    <p>p2</p>
    <!-- 注释 -->
    <p>p3</p>
</div>    

{
   
    let div = document.querySelector("#div");
    console.log(div.childNodes);//[text, p, text, h3, text, p, text, comment, text, p, text]
    console.log(div.children);//[p, h3, p, p]
}

 - firstChild 第0个子节点 | - firstElementChild 第0个子元素 
 - lastChild 最后一个子节点  | - lastElementChild 最后一个子元素

<div id="div">
    <p>p1</p>
    <h3>h1</h3>
    <p>p2</p>
    <!-- 注释 -->
    <p>p3</p>
</div>    
/* 
查找子级 
    childNodes 子节点 (包含所有节点: 文本节点、注释节点、元素节点……)
    children 子元素 (只包含元素节点)
    firstChild 第0个子节点
    firstElementChild 第0个子元素
    lastChild 最后一个子节点
    lastElementChild 最后一个子元素
*/
    let div = document.querySelector("#div");
    console