centos7 下squid 安裝配置 與認證配置
DOM
1. 節點層級
document節點表示每個文件的根節點，根節點的唯一子節點是<html>元素，稱為文件元素（documentElement）。
1.1 Node型別
每個節點都有nodeType屬性，表示該節點的型別。節點型別由定義在Node型別上的12個數值常量
if (someNode.nodeType == Node.ELEMENT_NODE){
alert("Node is an element.");
}
-
nodeName、nodeValue
if (someNode.nodeType == 1){ value = someNode.nodeName; // 會顯示元素的標籤名 } // 元素節點的nodeValue屬性為null
-
節點關係
每個節點都有一個childNodes屬性，其中包含一個NodeList的例項。NodeList會根據DOM結構實時更新。
let firstChild = someNode.childNodes[0]; let secondChild = someNode.childNodes.item(1); //支援item方法 let count = someNode.childNodes.length; //轉換為陣列 let arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0); //或 let arrayOfNodes = Array.from(someNode.childNodes);每個節點都有一個parentNode屬性，指向其DOM樹中的父元素。使用previousSibling和 nextSibling可以在胞親之間導航。
父節點和它的第一個及最後一個子節點也有專門屬性： firstChild和lastChild分別指向childNodes中的 第一個和最後一個子節點。
最後還有一個所有節點都共享的關係。ownerDocument 屬性是一個指向代表整個文件的文件節點的指標。
-
操縱節點
appendChild() 用於在childNodes列表末尾新增節點，方法返回新新增的節點。
如果節點時已經存在節點，則會移動節點。一個節點不會在文件中同時出現在兩個或更多個地方。
insertBefore() 可以將節點插入到特定位置：
// 第二個引數傳入null時與appendChild()相同 returnedNode = someNode.insertBefore(newNode, null); alert(newNode == someNode.lastChild); //true // 作為新的第一個子節點插入 returnedNode = someNode.insertBefore(newNode, someNode.firstChild);replaceChild() 接收兩個引數：要插入的節點和要替換的節點
// 替換第一個子節點 let returnedNode = someNode.replaceChild(newNode, someNode.firstChild);removeChild() 用於移除節點
// 刪除第一個子節點 let formerFirstChild = someNode.removeChild(someNode.firstChild);
-
其他方法
cloneNode() 複製節點，如果傳入true則還會複製內部子節點（不會複製事件處理程式）
let deepList = myList.cloneNode(true); alert(deepList.childNodes.length);normalize() 用於處理文字節點，後面討論。
1.2 Document型別
| 屬性 | 描述 |
|---|---|
| document.documentElement | 始終指向HTML頁面中的<html>元素 |
| document.body | 直接指向<body>元素 |
| document.doctype | 指向<!doctype>標籤 |
| document.title | 可以修改標題欄，但不會改變<title>標籤中的內容 |
| document.referrer | 獲取連結到當前頁面的那個頁面的URL |
-
定位元素
方法 描述 getElementById() 接收元素id，如果找到返回元素，沒找到返回null，多個則返回第一個 getElementsByTagName() 接收一個引數，要獲取元素的標籤名，返回包含零個或多個元素的NodeList。 getElementsByName() 根據name屬性返回元素NodeList 常用於表單 // <img src="myimage.gif" name="myImage"> let images = document.getElementsByTagName("img"); let myImage = images["myImage"]; //通過name獲取
-
特殊集合
document.forms：所有表單
document.images：所有圖片
document.links：所有連結
1.3 Element型別
可以通過nodeName或tagName來獲取標籤名（大寫）
if (element.tagName.toLowerCase() == "div"){
//推薦，適用於所有文件
}
-
HTML元素
有5個標準屬性，id，dir（文字方向），lang，title（滑鼠放置後顯示），className（相當於class，class為關鍵字不可以使用）
<div id="myDiv" class="bd" title="Bodytext" lang="en" dir="ltr"></div>這些都有對應的屬性值可以修改
let div = document.getElementById("myDiv"); alert(div.id); // "myDiv" alert(div.className); // "bd" div.id = "someOtherId"; div.className = "ft";
-
取得屬性
getAttribute()、setAttribute()和 removeAttribute()。
let div = document.getElementById("myDiv"); alert(div.getAttribute("id")); //"myDiv" alert(div.getAttribute("class")); //"bd" // 這裡要注意class而不是className要填真實名稱根據html5 的要求自定義屬性要以data-開頭
除了五個標準屬性還有其他公認（非自定義）屬性也是DOM物件屬性（如align）
div.align='left';getAttribute()和DOM屬性訪問的兩個差異
-
style屬性
getAttribute()訪問style屬性時，返回的是CSS字串。
通過DOM物件的屬性訪問時，style屬性返回的是一個（CSSStyleDeclaration）物件。DOM物件的style屬性用於以程式設計方式讀寫元素樣式，因此不會直接對映為元素中style屬性的字串值。
-
所有事件屬性
當在元素上使用事件屬性時（比如 onclick），屬性的值是一段JavaScript程式碼。
使用 getAttribute()訪問事件屬性，則返回的是字串形式的原始碼，（標籤上未設定則為null）
通過DOM物件的屬性訪問事件屬性時返回的則是一個JavaScript函式（未指定該屬性則返回 null）
-
-
設定屬性
setAttribute() 可以設定html屬性和自定義屬性
也可以通過DOM屬性設定元素屬性：
div.id = "someOtherId"; // DOM物件上的自定義屬性，不會成為元素的屬性 div.mycolor = "red"; alert(div.getAttribute("mycolor")); //null（IE除外）
-
建立元素
document.createElement()方法建立新元素。這個方法接收一個引數，即要建立元素的標籤名。
1.4 Text型別
Text節點中包含的文字可以通過nodeValue、data、textContext屬性訪問
// 輸出為"Some <strong>other</strong> message"
div.firstChild.nodeValue = "Some<strong>other</strong> message";
//HTML程式碼，即小於號、大於號或引號會被轉義
-
建立節點
document.createTextNode()
let textNode = document.createTextNode("<strong>Hello</strong> world!"); -
規範化
normalize() 在父節點上呼叫可以合併相鄰全部的文字節點
2. MutationObserver介面
使用MutationObserver可以觀察整個文件、DOM樹的一部分，或某個元素。此外還可以觀察元素屬性、子節點、文字，或者前三者任意組合的變化。
2.1 基本用法
初始化並傳入一個回撥函式：
let observer = new MutationObserver(() => console.log('DOM was mutated!'));
-
observe() 方法
MutationObserver例項不會關聯DOM的任何部分。要把這個observer與DOM關聯起來，需要使用observe()方法。這個方法接收兩個必需的引數：要觀察其變化的DOM節點，以及一個MutationObserverInit物件。
MutationObserverInit物件用於控制觀察哪些方面的變化，是一個鍵/值對形式配置選項的字典。
例如：觀察<body>元素上的屬性變化
let observer = new MutationObserver(() => console.log('<body> attributes changed')); observer.observe(document.body, { attributes: true });document.body.className = 'foo'; console.log('Changed body class'); // Changed body class // <body> attributes changed //非同步觸發回撥函式
-
回撥與MutationRecord
回撥函式會接收一個MutationRecord物件，記錄變化資訊
let observer = new MutationObserver((mutationRecords) => console.log(mutationRecords));
-
disconnect()提前終止回撥
會斷開與DOM之間的監視，未呼叫的回撥不會執行
document.body.className = 'foo'; observer.disconnect(); document.body.className = 'bar'; //（沒有日誌輸出）因為回撥是非同步的所以所有回撥都會取消
document.body.className = 'foo'; setTimeout(() => { observer.disconnect(); document.body.className = 'bar'; }, 0); // <body> attributes changed // 這樣可以執行部分
4.複用MutationObserver
// 觀察兩個子節點 observer.observe(childA, { attributes: true }); observer.observe(childB, { attributes: true }); // 修改兩個子節點的屬性 childA.setAttribute('foo', 'bar'); childB.setAttribute('foo', 'bar'); // [<div>, <span>]
5.重用MutationObserver
呼叫disconnect()並不會結束MutationObserver的生命。重新observe()繫結可以繼續使用
2.2 觀察範圍
| 設定 | 描述 |
|---|---|
| attributes: true | 屬性變化 |
| attributeFilter: ['屬性1','屬性2'] | 指定觀察的屬性 |
| attributeOldValue: true | 記錄原屬性值，儲存在oldValue中 |
| characterData: true | 觀察文字節點變化 |
| characterDataOldValue: true | 記錄原屬字元資料 |
| childList: true | 觀察目標節點子節點的新增和移除 |
| subtree: true | 所有後代節點 |