WEB前端第二十九課——Document節點操作
1.Document節點
DOM全稱為DocumentObjectModel，即文件物件模型，是一套管理控制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元素節點
語法：varnewElem=document .createElement(‘標籤名’)； //所建立節點名需使用引號
注意，該方法建立的頁面元素不會直接顯示在頁面中，而是預設儲存在記憶體中
② appendChild()，通過該方法將建立的元素新增到頁面的指定父元素中
語法：父元素名 .appendChild(newElem)；
③ createTextNode()，該方法用於對新建元素新增內容，方法的引數為需要生成的文字內容節點
語法：var elemText=document .createTextNode(' 需要新增的文字節點內容 ')；
newElem .appendChild(elemText);
另外，還可以使用innerHtml屬性設定或返回雙標籤之間的HTML內容
語法：元素節點（變數名）.innerHtml='text ';
④ createAttribute()方法用於建立屬性物件節點，返回值為屬性本身
語法：varelemStyle=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>