JS包括哪幾部分
- ES：一門語言，學(xué)習(xí)ES學(xué)習(xí)的是語法。(ECMA:歐洲計(jì)算機(jī)協(xié)會(huì) ECMAScript)
-
BOM：瀏覽器對(duì)象模型
用途：提供給ES?個(gè)接口來操作瀏覽器 -
DOM：文檔對(duì)象模型
用途：提供ES?個(gè)接口來操作文檔
BOM是什么
- BOM:
Browser Object Model瀏覽器對(duì)象模型 - BOM把瀏覽器的?切定義成了?個(gè)對(duì)象模型。
-
Window: 整個(gè)瀏覽器被定義成了window對(duì)象-
document：把?檔定義成?個(gè)對(duì)象 -
Histroy: 把歷史記錄定義成?個(gè)對(duì)象 -
Screen: 把顯示瀏覽器窗?的屏幕定義成?個(gè)對(duì)象 -
Location: 把地址欄定義成?個(gè)對(duì)象 -
Navigator: 把瀏覽器的介紹信息定義成?個(gè)對(duì)象
-
-
- BOM用途：允許ES操作瀏覽器的?切
- BOM目前沒有標(biāo)準(zhǔn)
DOM是什么
- DOM ： Dcoument Object Model ?檔對(duì)象模型
- 用途：DOM就是為了操作文檔用的。
- 在DOM眼里，整個(gè)文檔內(nèi)容都是對(duì)象
- DOM把文檔的?切內(nèi)容都定義成了對(duì)象
- 文檔是對(duì)象
- 元素是對(duì)象
- 文本是對(duì)象
- 屬性是對(duì)象
- 樣式是對(duì)象
- DOM是W3C制定的?套標(biāo)準(zhǔn)
DOM樹
DOM樹.png
- document對(duì)象
- element對(duì)象
- attribute對(duì)象
- text對(duì)象
- node對(duì)象
Document對(duì)象
定義
- 表示：Document對(duì)象表示網(wǎng)頁文檔。
- 地位：Document對(duì)象是DOM的核心對(duì)象。
- 用途：Document對(duì)象是訪問文檔的入口
用途
- Document對(duì)象主要用途是操作文檔，具體內(nèi)容如下：
- 增：創(chuàng)建元素
- 刪：刪除元素
- 改：替換元素
- 查：獲取元素
獲取元素的方法
傳統(tǒng)方法
- 通過id獲取元素：getElementById()
window.document.getElementById('id')
//等同于
document.getElementById('id')
- 通過標(biāo)簽名獲取元素:
document.getElementsByTagName('標(biāo)簽')
window.document.getElemntsByTagName('tag')
//等同于
document.getElemntsByTagName('tag')
- element.getElementsByTagName('標(biāo)簽')
const ul1 = document.getElementById('ul1')
const arr2 = ul1.getElementsByTagName('li')//通過element獲取
console.log(arr2);
H5新增方法
- 通過class獲取元素:
- document.getElementsByClassName('class')
- element.getElementsByClassName('class')
- 通過css選擇器獲取元素: document.querySelector('selector')
- 通過css選擇器獲取元素:
- document.querySelectorAll('selector')
- element.querySelectorAll('selector')
特殊方法
- document.documentElement： 獲取?檔中的 ``<html> 元素
- document.body： 獲取文檔中的
<body>元素 - document.head： 獲取文檔中的
<head>元素 - document.title： 獲取文檔中的
<title>元素 - document.links： 獲取文檔中的
<a>元素 - document.images: 獲取文檔中的
<img>元素
操作文檔內(nèi)容
DOM定義了兩套API：
-
Node API（節(jié)點(diǎn)API) : 把DOM樹中的對(duì)象看成節(jié)點(diǎn)(node)樹。 -
Element API(元素API): 把DOm樹中的對(duì)象看出元素樹
Node API
定義
- Node API 把文檔中的?切對(duì)象看出是節(jié)點(diǎn)(node)。
Node對(duì)象是Node API的核心的對(duì)象
用途
- 查找節(jié)點(diǎn)的基本信息：節(jié)點(diǎn)名稱、節(jié)點(diǎn)類型、節(jié)點(diǎn)的值
- 查找節(jié)點(diǎn)之間的關(guān)系：父子、兄弟
- 操作節(jié)點(diǎn)：增、刪、改、查
三大基本屬性
Node.nodeType
定義：nodeType表示節(jié)點(diǎn)的類型。節(jié)點(diǎn)類型使??個(gè)數(shù)字表示。Node API把節(jié)點(diǎn)類型分為了9種：
| 節(jié)點(diǎn)名稱 | 數(shù)字表示 |
|---|---|
| 元素節(jié)點(diǎn) | 1 |
| 屬性節(jié)點(diǎn) | 2 |
| 文本節(jié)點(diǎn) | 3 |
| 注釋節(jié)點(diǎn) | 8 |
| 文檔節(jié)點(diǎn) | 9 |
Node.nodeName
Node.nodeValue
節(jié)點(diǎn)定義
父節(jié)點(diǎn)：?個(gè)節(jié)點(diǎn)之上的直接節(jié)點(diǎn)
子節(jié)點(diǎn)：?個(gè)節(jié)點(diǎn)之下的直接節(jié)點(diǎn)
兄弟節(jié)點(diǎn)：具有相同父節(jié)點(diǎn)的節(jié)點(diǎn)
后代節(jié)點(diǎn)：?個(gè)節(jié)點(diǎn)之下的所有層級(jí)的節(jié)點(diǎn)
查找節(jié)點(diǎn)關(guān)系
-
Node.parentNode: 返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)對(duì)象 -
Node.childNodes: 返回當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)列表 -
Node.nextSibling：返回當(dāng)前節(jié)點(diǎn)的下?個(gè)兄弟節(jié)點(diǎn) -
Node.previousSibling: 返回當(dāng)前節(jié)點(diǎn)的上?個(gè)兄弟節(jié)點(diǎn) -
Node.firstChild：返回當(dāng)前節(jié)點(diǎn)的第?個(gè)子節(jié)點(diǎn) -
Node.lastChild： 返回當(dāng)前節(jié)點(diǎn)的最后?個(gè)子節(jié)點(diǎn)
