文集上篇： JavaScript入門學習之旅(一)——JavaScript變數提升和函式提升

體驗了幾天斷網的生活(其實是因為家裡寬頻故障數天之久，仍未修好)，就把圖書館借來卻一直沒有看的《JavaScript DOM 程式設計藝術》給刷了一遍，整理了些學習筆記。

DOM節點

節點型別

DOM節點總共有三種型別:

• 元素節點:HTML檔案中所有元素，如p標籤，ul標籤。
• 文字節點:元素節點中的文字內容，如p標籤中的hello world。
• 屬性節點:標籤中的屬性key和value對，如img標籤的src屬性。

獲取元素節點

通過DOM獲取元素節點通常用3種DOM方法:

//獲取ID為divFirst的元素節點物件

var divFirst =document.getElementById('divFirst');

//獲取class為message的所有元素節點物件陣列

var message = document.getElementsByClassName('message');

//通過getElementsByClassName獲取的元素節點通常為值組成的陣列集合，可以通過length獲取陣列長度
var messageLength = message.length;
//遍歷所有class為message的元素節點
for(let i = 0; i < messageLength - 1;i++){
  document.write(message[i]);
}

//獲取所有li標籤的元素節點物件陣列
var li = document.getElementsByTagName('li');
//通過getElementsByTagName獲取的元素節點通常為值組成的陣列集合，可以通過length獲取陣列長度
var liLength = li.length;
//遍歷所有li的元素節點
for(let i = 0; i < liLength - 1;i++){
  document.write(li[i]);
}

而新DOM標準效仿jQuery，依照CSS選擇器提供了一套新的DOM獲取元素節點的方法，它能做到的不僅僅是獲取id，class以及元素標籤，還能以各種CSS選擇器的形式進行元素篩選的選取。

//獲取ID為divFirst的元素節點物件
var divFirst = document.querySelector('#divFirst');
//獲取Class為message的首個元素節點物件
var message = document.querySelector('.message');
//獲取li標籤的首個元素節點物件
var li = document.querySelector('li');

//獲取class為message的所有元素節點物件陣列
var message = document.querySelectorAll('.message');
var messageLength = message.length;
for(let i = 0; i < messageLength - 1;i++){
  document.write(message[i]);
}
//獲取所有li標籤的元素節點物件陣列
var li = document.querySelectorAll('li');
var liLength = li.length;
for(let i = 0; i < liLength - 1;i++){
  document.write(li[i]);
}

//還能依照其它CSS選擇器進行元素節點的獲取

獲取和修改屬性節點

//獲取id為message的title屬性值
var messageTitle  = document.querySelector('#message').getAttribute('title');
//如果title存在，則返回title的文字值，如果不存在，則返回null
document.write(messageTitle);

//修改或設定id為message的title屬性值
var messageTitle  = document.querySelector('#message').setAttribute('title','This is a message');
//如果title存在，則修改title的文字值，如果不存在，則建立並設定title的文字值
document.write(messageTitle);
```
# 獲取所有子節點
在一顆滑稽樹(不對~節點樹)上，childNodes屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素所有子元素的陣列:
```javascript
//選取body元素下所有子節點
var body_element = document.getElementsByTagName("body")[0].childNodes;
//獲取陣列長度
var body_element_length = body_element.length;
//列印陣列長度
alert(body_element_length);

獲取單個型別的所有子節點

通過childNodes屬性獲取到的節點子元素個數極為龐大，其實是因為文件的節點型別並非只有元素節點，它還包括一開始說到的屬性節點和文字節點。 - 元素節點的nodeType屬性值是1 - 屬性節點的nodeType屬性值是2 - 文字節點的nodeType屬性值是3 通過這個規則，獲取body元素內所有元素節點的方式可以這樣做:

//選取body元素的所有子節點
var body_element = document.getElementsByTagName("body")[0].childNodes;
//獲取陣列長度
var body_element_length = body_element.length;
//獲取單個型別的所有子節點
for(let i = 0; i < body_element.length;i++){
    if(body_element.nodeType == 1){
        document.write(body_element[i]);
    }
}

檢視/修改文字節點屬性值

假設有一個id為hello的p標籤，含有文字hello world，利用nodeValue屬性，能夠獲取或修改該標籤的文字。

var pElement = document.querySelector('#hello').nodeValue;
//檢視該文字節點的值
document.write(pElement);

firstCHild和lastChild屬性

firstChild和lastChild分別代表childNodes的首個節點和末尾節點，可說是childNodes的語義化屬性。

//firstChild等同於node.childNodes[0]
var body_element = document.getElementsByTagName("body")[0].childNodes[0];
var body_element_firstChild = document.getElementsByTagName("body")[0].firstChild;
//lastCHild等同於node.childNodes[node.childNodes.length-1]
var body_element = document.getElementsByTagName("body")[0].childNodes[body_element.length-1];
var body_element_firstChild = document.getElementsByTagName("body")[0].lastChild;

平穩退化

平穩退化的概念是在訪問者訪問不支援JavaScript的瀏覽器，仍然能過正常順利地瀏覽你網站的基本功能。在2017年，前端離不開javascript的今天，可能聽起來很荒謬，不過，無論是對特殊裝置的訪問者還是蜘蛛爬蟲而言，平穩退化都不是一個過時的概念。

漸進增強

所謂漸進增強，就是用一些額外的資訊層去包裹原始資料，按照“漸進增強”的原則建立的網頁，幾乎都符合“平穩退化原則”，簡而言之，就是儘可能去語義化文字標籤。