1.Document節點
DOM全稱為 Document Object Model，即文檔對象模型，是一套管理控制HTML文檔的規則，而Document節點則是一種具象化的表現形式
如果把整個HTML文檔看成一個對象，那么這個對象就是Document節點，而如何操作控制這個對象的標准，就是DOM
DOM中規定HTML頁面中所有的元素都是節點，可以通過Document點號運算符調用所有元素
Document節點又被稱作Document對象，每個載入瀏覽器的HTML文檔都會成為Document對象，document是HTML文檔的根節點
因此，為了在腳本（Script）中操作頁面，提出了Document節點和DOM規則
2.Document應用練習
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document滾動標題練習</title>
</head>
<body>
<script>
setInterval(function () {
var tempTitle=document.title;
var titleArr=tempTitle.split('');
titleArr.push(titleArr.shift());
var newTitle=titleArr.join('');
document.title=newTitle;
},600);
</script>
</body>
</html>
JavaScript計時事件，兩個關鍵方法：
setInterval，間隔指定的毫秒數不停地執行指定代碼
clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼
setTimeout，延遲指定的毫秒數后執行指定的代碼
clearTimeout() 方法用於停止執行setTimeout()方法的函數代碼
3.Document節點屬性
使用較多的屬性有以下三類
① doctype，documentElement，body，head， 用於返回文檔內部的某個節點
② documentURI，URL，domain，lastModified，location，title，readyState， 用於返回文檔指定的信息
③ anchors，forms，images，links，scripts， 用於返回文檔內部特定節點的集合
4.第一類屬性
① 對於HTML文檔來說，document對象一般有兩個子節點，第一個子節點就是 docType（第二個是html）
docType節點是一個對象，包含了當前文檔的類型信息，對於HTML5文檔來說，docType節點就代表<!DOCTYPE html>
語法：document .docType;
② documentElement屬性表示當前文檔的根節點，通常是document的節點的第二個子節點，緊跟在document.docType節點后面
但是，一般情況下都是通過documentElement節點來訪問當前頁面中的其他子節點
語法：document .documentElement
③ body屬性返回當前文檔的body或frameset節點，如果不存在這樣的節點則返回 null
語法：document .body；
④ head屬性返回當前文檔的head節點，如果當前文檔有多個head，則返回第一個
語法：document .head；
5.第二類屬性
① documentURI屬性返回當前文檔的網址，所有文檔都具備該屬性
語法：document .documentURI
② URL屬性返回當前文檔的網址，URL屬性只有HTML文檔才具備，該屬性為只讀屬性不能寫入
語法：document .URL
③ domain屬性返回當前文檔的域名，如果無法獲取域名則返回 null
語法：document .domain
④ lastModified屬性返回當前文檔（網頁）最后修改的時間戳，格式為字符串
語法：document .lastModified
注意，lastModified屬性的返回值是字符串，所以不能直接用於比較，如果要比較兩個文檔哪一個時間更新，則需要將其轉換成時間戳格式
語法示例：Date.parse(doc1.lastModifyed)，Date.parse方法能夠將時間格式的字符串轉換成時間戳格式
⑤ location屬性返回一個只讀對象，提供了當前文檔的URL信息
document.location.href，返回完整的URL，可以寫入（指定新網址）
document.location.protocol，返回當前遵守的協議
document.location.host，返回當前頁面域名+端口號
document.location.hostname，返回當前頁面域名
document.location.port，返回當前頁面端口號
document.location.pathname，返回當前頁面在服務器中的路徑
document.location.search，返回當前頁面URL中的查詢字符串
document.location.assign('網頁地址')，跳轉到另一個網址（與第一種的用法有相似之處）
⑥ location其他內容
以下方法效果相同，都能改變當前頁面的URL
location.assign('傳遞一個URL')；
window.location = '傳遞一個URL'；
location.href = '傳遞一個URL'；（常用方式）
reload():重新加載當前顯示的頁面
location.reload(false): //優先從本地緩存重新加載
location.reload(true): //優先從服務器重新加載
location對象的 search屬性獲取URL中保存的頁面提交的字符串信息
⑦ title屬性返回當前文檔的標題，該屬性是可寫的
語法：document.title
寫入信息時：document.title = '寫入的標題'；
⑧ characterSet屬性返回渲染當前文檔的字符集，比如 UTF-8、ISO-8859-1等
語法：document.characterSet
⑨ readyState屬性返回當前文檔的狀態，返回值包括三種：
loading，表示加載HTML代碼階段，尚未完成解析
interactive，表示加載外部資源階段
complete，表示全部加載完成
<script>
console.log(document.readyState);
var stateCheck=setInterval(function () {
console.log(document.readyState);
if (document.readyState=='complete'){
clearInterval(stateCheck);
}
},500);
</script>
6.第三類屬性
這些集合都是動態的，原節點有任何變化會立刻反映在集合中
① anchors屬性返回網頁中所有指定了 name屬性的 a標簽元素
② forms屬性返回網頁中所有的表單
③ images屬性返回網頁中所有的圖片
④ links屬性返回網頁中所有鏈接元素（帶有href屬性的 a標簽）
⑤ scripts屬性返回網頁中所有的腳本
<body>
<a href="#" name="anchorFirst">鏈接first</a>
<a href="#" >鏈接second</a>
<a href="#" name="anchorThird">鏈接third</a>
<script>
var coll=document.anchors;
console.log(coll); //打印所有定義了 name屬性的 a標簽元素，返回值為結合
console.log(typeof coll); //返回值類型為 Object
console.log(coll[1]); //打印指定的定義了 name屬性的 a標簽元素
</script>
</body>
7.document選擇頁面元素
① querySelector() 方法返回匹配指定的CSS選擇器的元素節點，
如果多個節點滿足匹配條件，則返回第一個匹配的節點
如果沒有滿足匹配條件的節點，則返回 null
語法：document .querySelector('元素選擇器 | 類選擇器 | id選擇器');
② querySelectorAll() 方法用來根據指定的選擇器進行頁面元素篩選
如果多個元素滿足匹配條件，則返回這些元素構成的集合
語法：document .querySelectorAll('選擇器名')；
返回值為一個節點列表，不是數組，但可以像數組一樣使用列表
如果查找失敗不是返回 null，而是返回一個空的節點列表
③ 其他常用選擇方式
getElementById()，返回匹配指定 id屬性的元素節點
getElementByTagName()，返回所有匹配指定標簽的元素節點
getElementByClassName()，返回符合指定類名的所有元素節點
getElementByName()，返回匹配指定 name屬性的所有元素節點
注意，上述方法中直接使用類名、id名等，並不是選擇器名！！
8.document創建頁面元素、屬性
① createElement()，生成HTML元素節點
語法：var newElem=document .createElement(‘標簽名’)； //所創建節點名需使用引號
注意，該方法創建的頁面元素不會直接顯示在頁面中，而是默認存儲在內存中
② appendChild()，通過該方法將創建的元素添加到頁面的指定父元素中
語法：父元素名 .appendChild(newElem)；
③ createTextNode()，該方法用於對新建元素添加內容，方法的參數為需要生成的文本內容節點
語法：var elemText=document .createTextNode(' 需要添加的文本節點內容 ')；
newElem .appendChild(elemText);
另外，還可以使用 innerHtml屬性設置或返回雙標簽之間的HTML內容
語法：元素節點（變量名）.innerHtml=' text ';
④ createAttribute()方法用於創建屬性對象節點，返回值為屬性本身
語法：var elemStyle=document.createAttribute(' 屬性名 ')；
elemStyle .value='color : red'; // 使用 .value對屬性賦值
⑤ setAttributeNode()方法用於將屬性節點添加到元素中，進而實現元素的屬性設置
語法：newElem.setAttributeNode(elemStyle);
<script>
var newElem=document.createElement('p'); //創建<p>標簽
var elemText=document.createTextNode('祝天下單身狗情人節快樂！'); //創建元素內容節點
newElem.appendChild(elemText); //將內容節點添加給<p>標簽
var elemAttrStyle=document.createAttribute('style'); //創建“style”屬性
// var elemAttrAlign=document.createAttribute('align'); //創建“align”屬性
elemAttrStyle.value=('color:red;text-align:center;font-size:25px'); //向“style”屬性賦值
// elemAttrAlign.value=('center'); //向“align”屬性賦值
newElem.setAttributeNode(elemAttrStyle); //將“style”屬性添加給<p>標簽
// newElem.setAttributeNode(elemAttrAlign); //將“align”屬性添加給<p>標簽
var body=document.querySelector('body'); //選擇頁面<body>標簽
body.appendChild(newElem); //將<p>標簽添加到頁面body中
</script>
9.操作元素屬性的方法
操作Element節點的CSS樣式，最簡單的方法之一是使用節點對象的以下三種方法，進行讀、寫、刪HTML元素的style屬性
① getAttribute()，獲取Element屬性，語法：元素節點 .getAttribute(' 屬性名 ')；，返回值為屬性值
② setAttribute()，設置Element屬性，語法：元素節點 .setAttribute(' 屬性名 ' , ' 屬性值 ')；
③ removeAttribute()，刪除Element屬性，語法：元素節點 .removeAttribute(' 屬性名 ')；
10.元素節點的style屬性
Element節點本身也提供了 style屬性用於操作CSS樣式，style屬性指向一個對象，用於讀寫頁面元素的行內CSS樣式
<script>
var newElem=document.createElement('p'); //創建<p>標簽
var elemText=document.createTextNode('祝天下單身狗情人節快樂！'); //創建元素內容節點
newElem.appendChild(elemText); //將內容節點添加給<p>標簽
newElem.style.textAlign='center';
newElem.style.backgroundColor='hotpink';
newElem.style.borderBottom='2px solid darkgreen';
newElem.style.color='blue';
newElem.style.fontSize='25px';
newElem.style.cssFloat='none'; //float為JavaScript保留字
document.body.appendChild(newElem); //將<p>標簽添加到頁面body中
</script>
注意：元素的 style對象對應元素的 style屬性，style對象中的樣式與 style屬性中的樣式名稱是一一對應的，但書寫規則有一定差別
① 將橫杠（-）從CSS屬性命中去除，然后將橫崗后的第一個字母大寫；
② CSS屬性名是JavaScript保留字的，需要在屬性名之前加“css”字符串前綴；
③ style對象的屬性值都是字符串，包括計量單位
11.style屬性的cssText用法
style對象的 cssText屬性可以用來直接讀、寫、刪整個 style屬性
語法：元素節點 .style .cssText=' 樣式 ';
<script>
var newElem=document.createElement('p'); //創建<p>標簽
var elemText=document.createTextNode('祝天下單身狗情人節快樂！'); //創建元素內容節點
newElem.appendChild(elemText); //將內容節點添加給<p>標簽
newElem.style.cssText='text-align:center;color:blue;font-size:25px;border-bottom:2px solid darkgreen';
document.body.appendChild(newElem); //將<p>標簽添加到頁面body中
</script>
刪除整個 style屬性可以使用<元素節點 .cssText=' ' >這種方式
cssText對應的是HTML元素的 style屬性，所以在書寫時不需要改寫屬性名
12.style屬性方法
style對象提供了三種方法分別讀、寫、刪行內樣式
① setProperty()，設置樣式，語法：元素節點 .style .setProperty(' propertyName ' , ' value ');
② getPropertyValue()，獲取樣式，語法：元素節點 .style .getPropertyValue(' propertyName ');
③ removeProperty()，刪除樣式，語法：元素節點 .style .removeProperty(' propertyName ');
<script>
var newElem=document.createElement('p'); //創建<p>標簽
var elemText=document.createTextNode('祝天下單身狗情人節快樂！'); //創建元素內容節點
newElem.appendChild(elemText); //將內容節點添加給<p>標簽
var elemStyle=newElem.style;
elemStyle.setProperty('text-align','center');
var queryRes=elemStyle.getPropertyValue('text-align');
console.log(queryRes);
elemStyle.removeProperty('text-align');
document.body.appendChild(newElem); //將<p>標簽添加到頁面body中
</script>