javascript的組成
javascript是由三部分組成:
- ECMAscript
定義了基本的語法，比如說數(shù)據(jù)類型筐钟， 函數(shù)揩瞪， 流程控制等 - BOM
定義了操作瀏覽器的接口 - DOM
定義了操作html結(jié)構(gòu)的接口，比如說獲取html元素, 增加刪除html元素篓冲，
操作html元素屬性李破，修改樣式等
DOM的概念及子節(jié)點(diǎn)類型
基本概念
什么是DOM
DOM: Document Object Model 文檔對(duì)象模型
文檔: html頁面
文檔對(duì)象: html頁面中的元素
文檔對(duì)象模型: DOM是JavaScript操作網(wǎng)頁的接口。從本質(zhì)上說壹将，它將web 頁面和腳本或編程語言連接起來了嗤攻。
document.getElementById
document.getElementsByTagName
都是DOM提供的獲取網(wǎng)頁元素的方法
節(jié)點(diǎn)
DOM的最小組成單位叫做節(jié)點(diǎn)（node）。文檔的樹形結(jié)構(gòu)（DOM樹）瞭恰，就是由各種不同類型的節(jié)點(diǎn)組成屯曹。每個(gè)節(jié)點(diǎn)可以看作是文檔樹的一片葉子。
節(jié)點(diǎn)的類型有七種惊畏。
- Document：整個(gè)文檔樹的頂層節(jié)點(diǎn)
- 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é)點(diǎn)都屬于瀏覽器原生提供的節(jié)點(diǎn)對(duì)象的派生對(duì)象密任，具有一些共同的屬性和方法颜启。
節(jié)點(diǎn)樹
一個(gè)文檔的所有節(jié)點(diǎn)，按照所在的層級(jí)浪讳，可以抽象成一種樹狀結(jié)構(gòu)缰盏。這種樹狀結(jié)構(gòu)就是DOM。
最頂層的節(jié)點(diǎn)就是document節(jié)點(diǎn)，它代表了整個(gè)文檔口猜。文檔里面最高一層的HTML標(biāo)簽负溪，一般是<html>，它構(gòu)成樹結(jié)構(gòu)的根節(jié)點(diǎn)（root node）济炎，其他HTML標(biāo)簽節(jié)點(diǎn)都是它的下級(jí)川抡。
除了根節(jié)點(diǎn)以外，其他節(jié)點(diǎn)對(duì)于周圍的節(jié)點(diǎn)都存在三種關(guān)系须尚。
- 父節(jié)點(diǎn)關(guān)系（parentNode）：直接的那個(gè)上級(jí)節(jié)點(diǎn)
- 子節(jié)點(diǎn)關(guān)系（childNodes）：直接的下級(jí)節(jié)點(diǎn)
- 同級(jí)節(jié)點(diǎn)關(guān)系（sibling）：擁有同一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)
DOM提供操作接口崖堤，用來獲取三種關(guān)系的節(jié)點(diǎn)。其中耐床，子節(jié)點(diǎn)接口包括firstChild（第一個(gè)子節(jié)點(diǎn)）和lastChild（最后一個(gè)子節(jié)點(diǎn)）等屬性密幔，同級(jí)節(jié)點(diǎn)接口包括nextSibling（緊鄰在后的那個(gè)同級(jí)節(jié)點(diǎn)）和previousSibling（緊鄰在前的那個(gè)同級(jí)節(jié)點(diǎn)）屬性。
特征相關(guān)的屬性
所有節(jié)點(diǎn)對(duì)象都是瀏覽器內(nèi)置的Node對(duì)象的實(shí)例撩轰，繼承了Node屬性和方法胯甩。這是所有節(jié)點(diǎn)的共同特征。
以下屬性與節(jié)點(diǎn)對(duì)象本身的特征相關(guān)堪嫂。
Node.nodeName蜡豹，Node.nodeType
nodeName屬性返回節(jié)點(diǎn)的名稱，nodeType屬性返回節(jié)點(diǎn)類型的常數(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é)點(diǎn)為例愚战，它的nodeName屬性等于#document娇唯，nodeType屬性等于9。
document.nodeName // "#document"
document.nodeType // 9
如果是一個(gè)<p>節(jié)點(diǎn)寂玲，它的nodeName是P塔插，nodeType是1。文本節(jié)點(diǎn)的nodeName是#text拓哟，nodeType是3想许。
通常來說，使用nodeType屬性確定一個(gè)節(jié)點(diǎn)的類型断序，比較方便
document.getElementsByTagName('a').nodeType === 1
// true
document.getElementsByTagName('a').nodeType === Node.ELEMENT_NODE
// true
