javascript的組成
javascript是由三部分組成:
- ECMAscript
定義了基本的語法，比如說數(shù)據(jù)類型显沈， 函數(shù)， 流程控制等 - BOM
定義了操作瀏覽器的接口 - DOM
定義了操作html結(jié)構(gòu)的接口，比如說獲取html元素, 增加刪除html元素拉讯，
操作html元素屬性涤浇，修改樣式等
DOM的概念及子節(jié)點類型
基本概念
什么是DOM
DOM: Document Object Model 文檔對象模型
文檔: html頁面
文檔對象: html頁面中的元素
文檔對象模型: DOM是JavaScript操作網(wǎng)頁的接口。從本質(zhì)上說魔慷，它將web 頁面和腳本或編程語言連接起來了只锭。
document.getElementById
document.getElementsByTagName
都是DOM提供的獲取網(wǎng)頁元素的方法
節(jié)點
DOM的最小組成單位叫做節(jié)點（node）。文檔的樹形結(jié)構(gòu)（DOM樹）院尔，就是由各種不同類型的節(jié)點組成蜻展。每個節(jié)點可以看作是文檔樹的一片葉子。
節(jié)點的類型有七種邀摆。
- Document：整個文檔樹的頂層節(jié)點
- DocumentType：doctype標(biāo)簽（比如
<!DOCTYPE html>） - Element：網(wǎng)頁的各種HTML標(biāo)簽（比如
<body>纵顾、<a>等） - Attribute：網(wǎng)頁元素的屬性（比如
class="right"） - Text：標(biāo)簽之間或標(biāo)簽包含的文本
- Comment：注釋
- DocumentFragment：文檔的片段
這七種節(jié)點都屬于瀏覽器原生提供的節(jié)點對象的派生對象，具有一些共同的屬性和方法栋盹。
節(jié)點樹
一個文檔的所有節(jié)點施逾，按照所在的層級，可以抽象成一種樹狀結(jié)構(gòu)例获。這種樹狀結(jié)構(gòu)就是DOM汉额。
最頂層的節(jié)點就是document節(jié)點，它代表了整個文檔榨汤。文檔里面最高一層的HTML標(biāo)簽蠕搜，一般是<html>，它構(gòu)成樹結(jié)構(gòu)的根節(jié)點（root node）收壕，其他HTML標(biāo)簽節(jié)點都是它的下級妓灌。
除了根節(jié)點以外，其他節(jié)點對于周圍的節(jié)點都存在三種關(guān)系啼器。
- 父節(jié)點關(guān)系（parentNode）：直接的那個上級節(jié)點
- 子節(jié)點關(guān)系（childNodes）：直接的下級節(jié)點
- 同級節(jié)點關(guān)系（sibling）：擁有同一個父節(jié)點的節(jié)點
DOM提供操作接口旬渠，用來獲取三種關(guān)系的節(jié)點。其中端壳，子節(jié)點接口包括firstChild（第一個子節(jié)點）和lastChild（最后一個子節(jié)點）等屬性告丢，同級節(jié)點接口包括nextSibling（緊鄰在后的那個同級節(jié)點）和previousSibling（緊鄰在前的那個同級節(jié)點）屬性。
特征相關(guān)的屬性
所有節(jié)點對象都是瀏覽器內(nèi)置的Node對象的實例损谦，繼承了Node屬性和方法岖免。這是所有節(jié)點的共同特征。
以下屬性與節(jié)點對象本身的特征相關(guān)照捡。
Node.nodeName颅湘，Node.nodeType
nodeName屬性返回節(jié)點的名稱，nodeType屬性返回節(jié)點類型的常數(shù)值栗精。具體的返回值闯参，可查閱下方的表格瞻鹏。
| 類型 | nodeName | nodeType |
|---|---|---|
| ELEMENT_NODE | 大寫的HTML元素名 | 1 |
| ATTRIBUTE_NODE | 等同于Attr.name | 2 |
| TEXT_NODE | #text | 3 |
| COMMENT_NODE | #comment | 8 |
| DOCUMENT_NODE | #document | 9 |
| DOCUMENT_FRAGMENT_NODE | #document-fragment | 11 |
| DOCUMENT_TYPE_NODE | 等同于DocumentType.name | 10 |
以document節(jié)點為例，它的nodeName屬性等于#document鹿寨，nodeType屬性等于9新博。
document.nodeName // "#document"
document.nodeType // 9
如果是一個<p>節(jié)點，它的nodeName是P脚草，nodeType是1赫悄。文本節(jié)點的nodeName是#text，nodeType是3馏慨。
通常來說埂淮，使用nodeType屬性確定一個節(jié)點的類型，比較方便
document.getElementsByTagName('a').nodeType === 1
// true
document.getElementsByTagName('a').nodeType === Node.ELEMENT_NODE
// true
