JavaScript進階-一文帶你認識DOM

、節點層級

說明： 任何一個html文檔都可以使用DOM將其表示成一個由節點構成的層級結構，當然，節點的類型很多，這也使得構成的html文檔可以各種各樣

<!-- 最基本的HTML片段 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

如果以層級結構進行描述，在每個html文檔中，其根節點只有一個，那就是document，其次，根節點存在唯一子節點是<html>元素，這個元素成為文檔元素，在html頁面里面，文檔元素就是<html>元素，并且有且只有一個，在DOM 中總共有12種節點類型，這些類型都繼承一種基本類型。

1.Node類型

說明： 最開始的DOM描述了Node的接口，這個是每個DOM節點必須實現的，在JavaScript中將其設計成Node類型，每個節點都繼承這個類型，節點類型由12個常量表示

Node.ELEMENT_NODE：1 Node.ATTRIBUTE_NODE：2 Node.TEXT_NODE：3 Node.CDATA_SECTION_NODE：4 Node.ENTITY_REFERENCE_NODE：5 Node.ENTITY_NODE：6 Node.PROCESSING_INSTRUCTION_NODE：7 Node.COMMENT_NODE：8 Node.DOCUMENT_NODE：9 Node.DOCUMENT_TYPE_NODE：10 Node.DOCUMENT_FRAGMENT_NODE：11 Node.NOTATION_NODE：12

這樣一個節點的類型可通過與這些常量比較來確定，而這個數值可以使用元素節點.nodeType來獲取

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, World!</h1>

    <script>
      // 獲取h1這個節點
      let titleElement=document.querySelector("h1");

      // 下面這兩個值是相等的，這樣就可以確定這是一個元素節點了
      console.log(titleElement.nodeType);
      console.log(titleElement.ELEMENT_NODE);
    </script>
  </body>
</html>

nodeName與nodeValue

說明： 這兩個屬性保存著有關節點的信息，但屬性的值完全取決于節點的類型，對元素而言，nodeName 始終等于元素的標簽名，而 nodeValue 則始終為 null

// 以上面的html為例：

let titleElement=document.querySelector("h1");

console.log(titleElement.nodeName); // h1
console.log(titleElement.nodeValue); // null

節點關系

說明： 文檔內部的節點都會與其他節點存在關系，一般誰在外層誰是父，同層就是兄，以下面的片段為例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  
  <body>
  </body>
</html>

<body>元素是<html>元素的子元素，而<html>元素則是<body>元素的父元，<head>元素是<body>元素的同胞元素，因為它們有共同的父元素<html>

let titleElement=document.querySelector("h1");

console.log(titleElement.childNodes[0]);
console.log(titleElement.childNodes.item(0));
console.log(titleElement.childNodes);

每個節點都有一個childNodes屬性，其中包含一個NodeList的實例，這是一個類數組的對象，用于存儲可以按位置存取的有序節點，可以使用[]或者item()來訪問，最后，NodeList是實時的活動對象，而不是第一次訪問時所獲得內容的快照，需要將其轉換成數組的時候可以使用Array.from來完成，其次，如果需要查詢一個元素是否有子元素，可以使用hasChildNodes()

每一個節點都有一個parentNode屬性，表示節點的父元素，那么上面的childNodes中的每個元素都存在相同的父元素，并且它們之間以兄弟相稱，可以使用previousSibling（上一個元素）和nextSibling（下一個元素）來回切換，如果切換不了就是null，firstChild和lastChild分別指向childNodes中的第一個和最后一個子節點，如果只有一個子元素，它們相等，如果沒有子元素，那么都是null

Element Traversal API新增屬性：
childElementCount：返回子元素數量（不包含文本節點和注釋）； firstElementChild：指向第一個 Element 類型的子元素（舊版為firstChild）； lastElementChild：指向最后一個 Element 類型的子元素（舊版為 lastChild）； previousElementSibling：指向前一個 Element 類型的同胞元素（舊版為 previousSibling）； nextElementSibling：指向后一個 Element 類型的同胞元素（舊版為nextSibling）。

（3）操作節點

appendChild(添加的節點)：在 childNodes 列表末尾添加節點，這個方法會返回新添加的節點，如果傳遞的節點是已經存在的節點，那么這個節點就會從原來的位置轉移到新的位置 insertBefore(插入的節點，參照的節點)：用于插入節點，將插入的節點會變成參照節點的前一個兄弟節點，并返回，如果參照節點是null，則與第一個方法一致 replaceChild(插入的節點，替換的節點)：替換的節點會被返回并從文檔樹中完全移除，要插入的節點會取而代之 removeChild(移除的節點)：將指定的節點刪除，其返回值是這個刪除的節點

注意：并非所有節點類型都有子節點，如果在不支持子節點的節點上調用這些方法，則會導致拋出錯誤

（4）其它方法

cloneNode(是否深度復制)：用于復制節點，如果傳true，進行深度復制，那么其子節點也會被復制，傳false則只會復制本身而已 normalize()：用于處理文本節點，在遍歷其所有子節點的時候，如果發現空文本節點，則將其刪除；如果兩個同胞節點是相鄰的，則將其合并為一個文本節點

2.Document類型

說明： Document類型表示文檔節點的類型，文檔對象document是 HTMLDocument的實例，它表示HTML頁面，document是window對象的屬性，因此是一個全局對象

Document 類型的節點的特征：
nodeType：9； nodeName："#document"； nodeValue：null； parentNode：null； ownerDocument：null；子節點：DocumentType（最多一個）、Element（最多一個）、ProcessingInstruction 或 Comment 類型。

（1）文檔子節點

document.documentElement：返回HTML頁面中所有的元素 document.body：返回body中所有的元素 document.doctype：獲取文檔最開頭的東西

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, World!</h1>

    <script>
      let titleElement=document.querySelector("h1");

      console.log(document.documentElement);
      console.log(document.body);
      console.log(document.doctype);
    </script>
  </body>
</html>

出現在元素外面的注釋也是文檔的子節點，它們的類型是Comment

（2）文檔信息

document.title：包含<title>元素中的文本，通常顯示在瀏覽器窗口或標簽頁的標題欄，內容可以通過這個屬性進行更改，修改也會反映在頁面上，但是修改title屬性并不會改變元素<title>里面的內容 document.URL：地址欄中的 URL（只讀） document.domain：頁面的域名，在設置值的時候不能存在URL中不包含的值，最后，新設置的值不能比舊的值長，否則會導致錯誤 document.referrer：包含鏈接到當前頁面的那個頁面的URL，如果沒有就是''（只讀）,

（3）定位元素

說明： 在操作DOM的時候最常見的操作就是獲取某個或者某組元素的引用，然后對它們執行某些操作

document.getElementById(元素的ID)：查找帶有指定ID的元素（ID值需要完全匹配才可以），如果找到就返回這個元素，沒找到就返回null，如果查找的ID元素存在多個，只返回第一個 document.getElementsByTagName(元素的標簽名)：尋找符合標簽名的元素，其返回值是一個HTMLCollection對象，它與NodeList相似，所以可以使用相同的[]和item()方法來獲取指定的元素，這個對象還存在一個namedItem()的方法，通過標簽的name屬性獲取某一項的引用，對于 name 屬性的元素，還可以直接使用中括號來獲取，最后就是這個方法如果傳入*，表示匹配一切字符 document.getElementsByName(name屬性值)：尋找滿足條件name屬性值的元素，返回值也是一個HTMLCollection對象，那么使用起來跟上一個方法相差不大

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="myimage.gif" name="myImage" />

    <script>
      let imgElement=document.getElementsByTagName("img");

      console.log(imgElement);
      console.log(imgElement[0]);
      console.log(imgElement.item(0));
      console.log(imgElement.namedItem("myImage"));
      console.log(imgElement["myImage"]);
    </script>
  </body>
</html>

對于HTMLCollection對象而言，中括號既可以接收數值索引，也可以接收字符串索引。而在后臺，數值索引會調用item()，字符串索引會調用namedItem()。

（4）特殊集合

document.forms：查找文檔中所有<form>元素，返回值是HTMLCollection對象 document.images：查找文檔中所有<img>元素，返回值是HTMLCollection對象 document.links：查找文檔中所有帶href屬性的<a>元素，返回值是HTMLCollection對象

（5）文檔寫入

document.write('字符串')：在頁面加載期間向頁面中動態添加內容，一般用于動態包含外部資源 document.writeln('字符串')：在頁面加載期間向頁面中動態添加內容并且在末尾加一個\n，一般用于動態包含外部資源 document.open()：打開網頁輸出流，在node中使用的比較多 document.close()：關閉網頁輸出流，在node中使用的比較多

如果是在頁面加載完畢再去動態的去寫入，則寫入的內容會重寫整個頁面

3.Element類型

說明： 它暴露出訪問元素標簽名、子節點和屬性的能力

Element類型的節點的特征：
nodeType：1； nodeName：元素的標簽名； nodeValue：null； parentNode：Document 或 Element 對象；子節點的類型： Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference。

對于標簽名的獲取，可以使用節點.nodeName或者節點.tagName來獲取，不過，在HTML中使用的時候，獲取到的結果都是以大寫形式的標簽名，在XML中，獲取的與源代碼中標簽名的大小寫一致，使用的時候需要注意

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="myimage.gif" name="myImage" />

    <script>
      let imgElement=document.getElementsByName("myImage");

      console.log(imgElement[0].nodeName);
      console.log(imgElement[0].tagName);
    </script>
  </body>
</html>

（1）HTML元素

說明： 所有的HTML元素都可以通過HTMLElement類型表示，包括實例，另外，HTMLElement直接繼承了Element并增加了以下屬性，這些屬性是每個HTML 元素都存在的屬性

id：元素在文檔中的唯一標識符； title：包含元素的額外信息，通常以提示條形式展示； lang：元素內容的語言代碼（很少用）； dir：語言的書寫方向（"ltr"表示從左到右，"rtl"表示從右到左）； className：相當于 class 屬性，用于指定元素的 CSS 類

可以用對應的屬性修改相應的值，不過修改id和lang對用戶是不可見的，修改title只有在鼠標移到元素上面才反應出來

（2）獲取屬性

節點.getAttribute('需要獲取的屬性名')：返回這個節點上面指定屬性名對應的屬性值

console.log(imgElement[0].getAttribute("name"));

傳遞的屬性名應該與它們實際的屬性名是一樣的，如果搜索的屬性名不存在，返回值是null，此外，屬性名沒有大小寫之分，最后，當使用DOM對象訪問屬性的時候，在訪問style和事件的時候其返回值與getAttribute的返回值是存在區別的

（3）設置屬性

節點.setAttribute('設置的屬性名'，'屬性的值')：如果屬性存在，則屬性值會被替換成新的，如果不存在，則會創建這個屬性，此外，這個方法在設置的屬性名會規范為小寫形式，同時對于自定義屬性，并不會將其添加到元素的屬性上面去節點.removeAttribute('需要刪除的屬性')：將指定的屬性從元素上面刪除

（4）創建元素

document.createElement('創建元素的標簽名')：創建一個新元素，注意HTML不存在大小寫，而XML存在，其次，在創建新元素的同時也會將ownerDocument屬性設置為 document。此時，可以再為其添加屬性、添加更多子元素，不過，如果這個元素沒有被添加到文檔中去，添加再多的屬性也是依附在元素上的信息，在瀏覽器上并不會渲染出來

4.Text類型

說明： Text節點由Text類型表示，也就是文本內容，一般包含在標簽內部，通常使用childNodes獲取，另外，這種節點不包含HTML代碼

Text類型的節點的特征：
nodeType：3 nodeName："#text" nodeValue：節點中包含的文本 parentNode：Element 對象子節點的類型：沒有

這種節點的內容一般使用nodeValue屬性訪問，也可以使用data屬性訪問，不過很少使用，他們包含的值是相同的，這兩個屬性加上.length就可以得到文本節點包含的字符數了

文本節點操作方法：
appendData(text)：向節點末尾添加文本 text； deleteData(offset, count)：從位置 offset 開始刪除 count 個字符； insertData(offset, text)：在位置 offset 插入 text； replaceData(offset, count, text)：用 text 替換從位置 offset 到 offset count的文本； normalize：當一個節點存在多個文本節點的時候，可以使用這個方法將其合并成一個字符串 splitText(offset)：在位置offset將當前文本節點拆分為兩個文本節點； substringData(offset, count)：提取從位置 offset 到 offset + count 的文本。 length：獲取文本節點包含的字符數

console.log(imgElement.childNodes.item(0).nodeValue);
console.log(imgElement.childNodes.item(0).nodeValue.length);
console.log(imgElement.childNodes.item(0).data);
console.log(imgElement.childNodes.item(0).data.length);

文本內容的每個元素最多只能有一個文本節點，另外在修改文本節點的時候，小于號、大于號或引號會被轉義

（1）創建文本節點

document.createTextNode('文本節點的內容')：創建一個文本節點，當然，創建的內容中小于號、大于號或引號會被轉義，一般來說一個元素只包含一個文本子節點。不過，也可以讓元素包含多個文本子節點

let element=document.createElement("div"); 
element.className="message"; 

let textNode=document.createTextNode("Hello world!"); 
element.appendChild(textNode); 

let anotherTextNode=document.createTextNode("Yippee!"); 
element.appendChild(anotherTextNode); 

document.body.appendChild(element);

在將一個文本節點作為另一個文本節點的兄弟元素插入，兩個文本節點的文本之間不包含空格

5.Comment類型

說明： 這是一個注釋類型，與Text 類型相似，除了沒有splitText這個方法以外操作上是一致的，在創建的時候可以通過document.createComment('注釋的內容')來創建，最后，瀏覽器不承認結束的</html>標簽之后的注釋。如果要訪問注釋節點，則必須確定它們是</html>元素的后代

Comment類型的節點的特征：
nodeType：8 nodeName："#comment" nodeValue：注釋的內容 parentNode：Document 或 Element 對象子節點的類型：沒有

6.CDATASection類型

說明： 它表示XML中特有的CDATA區塊，同時繼承Text 類型，因此擁有其擁有的方法，在真正的XML文檔中，可以使用document.createCDataSection()并傳入節點內容來創建CDATA區塊

CDATASection類型的節點的特征：
nodeType：4 nodeName："#cdata-section" nodeValue：CDATA 區塊的內容 parentNode：Document 或 Element 對象子節點的類型：沒有

7.DocumentType類型

說明： DocumentType對象不支持動態創建，只能在解析文檔代碼時創建，其次，文檔類型可以通過document.doctype來獲取，在這個對象中存在三個屬性：name、entities和notations，name是文檔類型的名稱，就是近跟在!DOCTYPE后面的文本，結束符是空格，entities是這個文檔類型描述的實體的NamedNodeMap，而 notations是這個文檔類型描述的表示法的NamedNodeMap。因為瀏覽器中的文檔通常是HTML或XHTML文檔類型，所以entities和notations列表為空，在DOM2的時候擴展了三個屬性：publicId、systemId和internalSubset，取值如下示例

DocumentType類型的節點的特征：
nodeType：10 nodeName：文檔類型的名稱 nodeValue：null parentNode：Document 對象子節點的類型：沒有

<!DOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTDxhtml1-strict.dtd" [<!ELEMENT name (#PCDATA)>
] >

document.doctype.name // html
document.doctype.publicId // -// W3C// DTD HTML 4.01// EN
document.doctype.systemId // "http://www.w3.org/TR/ html4/strict.dtd"
document.doctype.internalSubset // "<!ELEMENT name (#PCDATA)>"

8.DocumentFragment類型

說明： 是一種特殊的節點類型，它允許你在內存中創建一個文檔片段，然后將其他節點附加到該片段中。文檔碎片不是真實DOM樹的一部分，因此對其進行操作不會觸發頁面重繪，這樣可以提高性能并減少DOM操作的成本，它可以通過document.createDocumentFragment()來創建

DocumentFragment類型的節點的特征：
nodeType：11 nodeName：#document-fragment nodeValue：null parentNode：null 子節點的類型：Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference

<ul id="myList"></ul>

// 給ul添加三個li
let fragment=document.createDocumentFragment(); 
let ul=document.getElementById("myList"); 

for (let i=0; i < 3; ++i) { 
 let li=document.createElement("li"); 
 li.appendChild(document.createTextNode(`Item ${i + 1}`)); 
 fragment.appendChild(li); 
} 

ul.appendChild(fragment);

二、DOM編程

1.動態腳本

說明： <script>這個標簽用于向網頁添加JavaScript代碼，可以通過src屬性引入外部的JavaScript文件，也可以是元素內容的源代碼，動態加載腳本就是頁面加載時不存在，之后通過DOM引入的JavaScript

// 假設需要向頁面加入一個foo.js的腳本

let script=document.createElement("script");
script.src="foo.js";
document.body.appendChild(script);

// 如果需要插入代碼加載腳本
<script> 
  function sayHi() { 
    alert("hi"); 
  } 
</script>

// 通過DOM操作改寫上面的HTML片段
let script=document.createElement("script");
script.appendChild(
    document.createTextNode(
        "function sayHi(){
            alert('hi');
        }"
    )
);
document.body.appendChild(script);

2.動態樣式

說明： 這個與上面是類似的，只不過加載的內容不同，一種使用<link>引入外部文件，一種是用<style>寫樣式代碼，動態同樣也是頁面初始加載不存在，后面才加上去的

<!-- 假設加載一個styles.css的文件 -->

<link rel="stylesheet" type="text/css" href="styles.css">

// 通過DOM操作改寫

let link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href="styles.css";
let head=document.getElementsByTagName("head")[0];
head.appendChild(link);

<!-- 另一種通過style加載css規則 -->

<style type="text/css"> 
  body { 
    background-color: red; 
  } 
</style>

// 使用DOM操作改寫

let style=document.createElement("style");
style.type="text/css";
style.appendChild(
    document.createTextNode(
        "body{
            background-color:red
        }"
    )
);
let head=document.getElementsByTagName("head")[0];
head.appendChild(style);

對于IE的瀏覽器，操作style節點的時候需要使用這個節點的styleSheet屬性的cssText屬性，給這個屬性設置css樣式字符串就可以了

最后，需要注意，NodeList對象和相關的NamedNodeMap、HTMLCollection其保存的值會隨著節點的變化而變化，所以使用的時候需要注意

三、MutationObserver接口

說明： MutationObserver是一個用于監視DOM樹變化的接口。它可以用來觀察DOM節點的插入、刪除、屬性的變化等變動，并在這些變動發生時執行特定的回調函數，MutationObserver的實例要通過調用MutationObserver構造函數并傳入一個回調函數來創建

// 這樣就創建了一個觀察者observer
let observer=new MutationObserver(
    ()=> console.log('<body> attributes changed')
);

1.observe()方法

說明： 上面創建的這個觀察者實例并不會關聯DOM的任何部分，如果需要，則需要使用observe方法，它有兩個參數，第一個是需要觀察的DOM節點（必須），第二個是一個配置對象（可選），在使用這個方法之后，被監聽的元素上面的屬性發生變化的時候都會異步的執行注冊的回調函數，后代元素的屬性更改并不會觸發

配置對象的參數：
subtree：當為 true 時，將會監聽以 target 為根節點的整個子樹。包括子樹中所有節點的屬性，而不僅僅是針對 target。默認值為 false。 childList：當為 true 時，監聽 target 節點中發生的節點的新增與刪除（同時，如果 subtree 為 true，會針對整個子樹生效）。默認值為 false。 attributes：當為 true 時觀察所有監聽的節點屬性值的變化。默認值為 true，當聲明了 attributeFilter 或 attributeOldValue，默認值則為 false。 attributeFilter：一個用于聲明哪些屬性名會被監聽的數組。如果不聲明該屬性，所有屬性的變化都將觸發通知。 attributeOldValue：當為 true 時，記錄上一次被監聽的節點的屬性變化；可查閱監聽屬性值了解關于觀察屬性變化和屬性值記錄的詳情。默認值為 false。 characterData：當為 true 時，監聽聲明的 target 節點上所有字符的變化。默認值為 true，如果聲明了 characterDataOldValue，默認值則為 false characterDataOldValue：當為 true 時，記錄前一個被監聽的節點中發生的文本變化。默認值為 false

observer.observe(document.body, { attributes: true }); 

document.body.className='foo';
console.log('Changed body class');

這也證明注冊函數的執行是異步的

2.回調參數

說明： MutationObserver實例中注冊的回調函數的參數有兩個，都是可選的，一個是MutationRecord 實例的數組，它包含的息包括發生了什么變化，以及 DOM 的哪一部分受到了影響，此外，連續的修改會生成多個實例，在最后一次修改后一次性按順序返回回來，另一個是觀察變化的MutationObserver的實例，這個主要觀察屬性的變化

MutationRecord實例的屬性：
target：被修改影響的目標節點 type：字符串，表示變化的類型："attributes"、"characterData"或"childList" oldValue：如果在 MutationObserverInit 對象中啟用，"attributes"或"characterData"的變化事件會設置這個屬性為被替代的值 "childList"類型的變化始終將這個屬性設置為 null attributeName：對于"attributes"類型的變化，這里保存被修改屬性的名字其他變化事件會將這個屬性設置為 null attributeNamespace：對于使用了命名空間的"attributes"類型的變化，這里保存被修改屬性的名字其他變化事件會將這個屬性設置為 null addedNodes：對于"childList"類型的變化，返回包含變化中添加節點的 NodeList 默認為空 NodeList removedNodes：對于"childList"類型的變化，返回包含變化中刪除節點的 NodeList 默認為空 NodeList previousSibling：對于"childList"類型的變化，返回變化節點的前一個同胞 Node 默認為 null nextSibling：對于"childList"類型的變化，返回變化節點的后一個同胞 Node 默認為 null

let observer=new MutationObserver( 
  (mutationRecords)=> console.log(mutationRecords)
);

observer.observe(document.body, { attributes: true }); 
document.body.setAttribute('foo', 'bar');

// 連續更改
let observer=new MutationObserver( 
  (mutationRecords)=> console.log(mutationRecords)
);

observer.observe(document.body, { attributes: true }); 
document.body.className='foo'; 
document.body.className='bar'; 
document.body.className='baz';

3.終止回調

說明： 一般情況下，只要被監聽的元素沒有被垃圾回收，那么MutationObserver中注冊的回調函數就會在屬性變化的時候執行一次，如果需要這個回調函數失效，可以使用disconnect()這個方法，它會取消之前加入隊列和之后加入隊列的回調函數，也就是停止觀察

let observer=new MutationObserver(
    ()=> console.log('<body> attributes changed')
); 
observer.observe(document.body, { attributes: true }); 

document.body.className='foo'; 
observer.disconnect(); 
document.body.className='bar';

希望斷開與觀察目標的聯系，但又希望處理由于調用disconnect()而被拋棄的記錄隊列中的MutationRecord實例，可以使用takeRecords()清空記錄隊列，取出里面的實例

4.一觀多用

說明： 多次調用observe()，可以使用一個創建的觀察者實例觀察多個目標節點，這個過程可以通過MutationRecord參數的target屬性觀察

let observer=new MutationObserver( 
  (mutationRecords)=> 
    console.log(
      mutationRecords.map(
        (x)=> x.target
      )
    )
  ); 

// 向頁面主體添加兩個子節點
let childA=document.createElement('div'), 
childB=document.createElement('span'); 
document.body.appendChild(childA); 
document.body.appendChild(childB);

// 觀察兩個子節點
observer.observe(childA, { attributes: true }); 
observer.observe(childB, { attributes: true }); 

// 修改兩個子節點的屬性
childA.setAttribute('foo', 'bar'); 
childB.setAttribute('foo', 'bar');

5.重啟回調

說明： 使用disconnect會停止觀察者中的回調函數，但是其生命并未結束，可以重新使用observe將其關聯到新的節點將其重啟

let observer=new MutationObserver(
    ()=> console.log('<body> attributes changed')
); 
observer.observe(document.body, { attributes: true }); 

// 停止回調
observer.disconnect(); 

// 這個不會觸發
document.body.className='bar';

// 重啟
observer.observe(document.body, { attributes: true }); 

// 照常觸發
document.body.className='bar';

6.設計？

說明： 這個接口的設計用于性能優化，其核心是異步回調與記錄隊列模型，為了在大量變化事件發生時不影響性能，每次變化的信息（由觀察者實例決定）會保存在 MutationRecord實例中，然后添加到記錄隊列。這個隊列對每個 MutationObserver實例都是唯一的，每次MutationRecord被添加到 MutationObserver的記錄隊列時，僅當之前沒有已排期的微任務回調時，才會將觀察者注冊的回調作為微任務調度到任務隊列上。這樣可以保證記錄隊列的內容不會被回調處理兩次，回調執行后，這些MutationRecord就用不著了，因此記錄隊列會被清空，其內容會被丟棄

四、MutationObserverInit

說明： 這個對象用于控制對目標節點的觀察范圍，看上去很高級，其實就是observe這個函數的第二個參數，參數的具體內容在這個函數這里有寫到

在調用observe()時，MutationObserverInit 對象中的 attribute、characterData 和 childList 屬性必須至少有一項為 true，否則會拋出錯誤，因為沒有任何變化事件可能觸發回調，

1.觀察屬性

說明： MutationObserver可以觀察節點屬性的添加、移除和修改。要為屬性變化注冊回調，需要在MutationObserverInit對象中將attributes屬性設置為true

let observer=new MutationObserver( 
  (mutationRecords)=> console.log(mutationRecords)
); 

observer.observe(document.body, { attributes: true }); 
// 添加屬性 
document.body.setAttribute('foo', 'bar'); 
// 修改屬性
document.body.setAttribute('foo', 'baz'); 
// 移除屬性
document.body.removeAttribute('foo');

如果想觀察某個或某幾個屬性，可以使用attributeFilter屬性來設置白名單來進行過濾

let observer=new MutationObserver( 
  (mutationRecords)=> console.log(mutationRecords)
);
 
observer.observe(document.body, { attributeFilter: ['foo'] }); 
// 添加白名單屬性
document.body.setAttribute('foo', 'bar'); 
// 添加被排除的屬性
document.body.setAttribute('baz', 'qux');

2.觀察字符

說明： MutationObserver可以觀察文本節點中字符的添加、刪除和修改。要為字符數據注冊回調，需要在MutationObserverInit對象中將characterData屬性設置為true

let observer=new MutationObserver( 
  (mutationRecords)=> console.log(mutationRecords)
);

// 創建要觀察的文本節點
document.body.firstChild.textContent='foo'; 
observer.observe(document.body.firstChild, { characterData: true }); 

// 賦值為相同的字符串
document.body.firstChild.textContent='foo'; 
// 賦值為新字符串
document.body.firstChild.textContent='bar'; 
// 通過節點設置函數賦值
document.body.firstChild.textContent='baz';

3.觀察子節點

說明： MutationObserver可以觀察目標節點子節點的添加和移除。要觀察子節點，需要在MutationObserverInit對象中將childList屬性設置為true

// 假設需要交換兩個子節點的位置
document.body.innerHTML=''; 
let observer=new MutationObserver( 
 (mutationRecords)=> console.log(mutationRecords)
);

// 創建兩個初始子節點
document.body.appendChild(document.createElement('div')); 
document.body.appendChild(document.createElement('span')); 
observer.observe(document.body, { childList: true }); 

// 交換子節點順序(先刪除后添加)
document.body.insertBefore(document.body.lastChild, document.body.firstChild);

4.觀察子樹

說明： 默認情況下，MutationObserver將觀察的范圍限定為一個元素及其子節點的變化。可以把觀察的范圍擴展到這個元素的子樹（所有后代節點），這需要在 MutationObserverInit對象中將subtree屬性設置為true

注意：被觀察子樹中的節點被移出子樹之后仍然能夠觸發變化事件。這意味著在子樹中的節點離開該子樹后，即使嚴格來講該節點已經脫離了原來的子樹，但它仍然會觸發變化事件

// 清空主體
document.body.innerHTML=''; 
let observer=new MutationObserver( 
 (mutationRecords)=> console.log(mutationRecords)
);

let subtreeRoot=document.createElement('div'), 
    subtreeLeaf=document.createElement('span'); 

// 創建包含兩層的子樹
document.body.appendChild(subtreeRoot); 
subtreeRoot.appendChild(subtreeLeaf); 

// 觀察子樹
observer.observe(subtreeRoot, { attributes: true, subtree: true }); 

// 把節點轉移到其他子樹
document.body.insertBefore(subtreeLeaf, subtreeRoot); 
subtreeLeaf.setAttribute('foo', 'bar');

五、Selectors API

1.querySelector()

說明： 這個方法接收一個CSS選擇符參數，也就是在寫樣式的時候，怎么寫選擇器，這里就怎么寫，它會返回匹配該模式的第一個元素，如果匹配不成功則返回null

如果是在document上用，則會從文檔元素開始搜索，如果在element上用，則只從當前元素后代中搜索

// 取得<body>元素
let body=document.querySelector("body"); 

// 取得 ID 為"myDiv"的元素
let myDiv=document.querySelector("#myDiv"); 

// 取得類名為"selected"的第一個元素
let selected=document.querySelector(".selected");

2.querySelectorAll()

說明： 這個與上面那個是相似的，只不過它會返回所有匹配到的元素，說白了就是一個NodeList對象，只不過這個對象是靜態的，在取值上面，可以通過for-of 、item()方法或中括號語法取元素

// 取得 ID 為"myDiv"的<div>元素中的所有<em>元素
let ems=document.getElementById("myDiv").querySelectorAll("em"); 

// 取得所有類名中包含"selected"的元素
let selecteds=document.querySelectorAll(".selected"); 

// 取得所有是<p>元素子元素的<strong>元素
let strongs=document.querySelectorAll("p strong");

3.matches()

說明： 這個方法有點服務于上面兩個方法的意為，作用是為了查找是否存在元素滿足一段css選擇符的選擇，滿足就返回true，否則就是false

// 檢測body中是否存在class為page1的元素
if (document.body.matches("body .page1")){

}

六、HTML5

1.css類擴展

（1）getElementsByClassName()

說明： 它存在于document對象和所有HTML元素上，它接受一個或多個類名組合而成的字符串，類名之間用空格隔開（類名的順序無關緊要），在document中調用則會返回文檔中所有匹配的元素，如果在某個元素上調用則會返回它后代中匹配的所有元素

// 取得所有類名中包含"username"和"current"元素
// 這兩個類名的順序無關緊要
let allCurrentUsernames=document.getElementsByClassName("username current");

（2）classList屬性

說明： 以前操作屬性，可以通過className完成屬性的添加、刪除、替換，因為這個屬性是一個字符串，所以更改這個值之后，需要重新設置這個值才算完成更改，在HTML5里面，新增加了classList這個屬性，它簡化了這些操作，它的返回值是一個DOMTokenList的實例。與其他集合類型一樣，DOMTokenList也有length屬性表示自己包含多少項，也可以通過item()或中括號取得個別的元素。

DOMTokenList的實例新增屬性：
add(value)：向類名列表中添加指定的字符串值 value。如果這個值已經存在，則什么也不做。 contains(value)：返回布爾值，表示給定的 value 是否存在。 remove(value)：從類名列表中刪除指定的字符串值 value。 toggle(value)：如果類名列表中已經存在指定的 value，則刪除；如果不存在，則添加。

<!-- 假設存在這樣的節點 -->
<div class="bd user disabled">...</div>

// 獲取這個節點
let divElement=document.getElementsByTagName("div");

// 通過className屬性獲取這個節點的class，拿到之后對其操作后
// 需要重新對className屬性賦值

// 要刪除"user"類
let targetClass="user"; 

// 把類名拆成數組
let classNames=divElement.className.split(/\s+/); 

// 找到要刪除類名的索引
let idx=classNames.indexOf(targetClass); 

// 如果有則刪除
if (idx > -1) { 
 classNames.splice(i,1); 
} 

// 重新設置類名
divElement.className=classNames.join(" ");

// 通過classList屬性進行操作

// 刪除"disabled"類
div.classList.remove("disabled"); 

// 添加"current"類
div.classList.add("current"); 

// 切換"user"類
div.classList.toggle("user");

2.焦點

document.activeElement：它保存當前頁面獲取焦點的元素，由于不同同時讓多個節點獲取焦點，那也就是這個值只會保留最后一個獲取焦點的元素，在頁面沒完全加載完前，它的值是null，在完全加載完之后，值是document.body document.hasFocus：用于檢測文檔是否擁有焦點，也就是用戶是否正在進行交互，它的返回值是布爾值，表示存在或者不存在節點.foucs：執行這個方法可以讓某個節點獲取焦點

3.HTMLDocument的擴展

（1）readyState屬性

說明： 它表示文檔加載的狀態，它的值有下面兩個

loading：表示文檔正在加載 complete：表示文檔加載完成

（2）compatMode屬性

說明： 它表示瀏覽器當前處于什么渲染模式

標準模式：CSS1Compat 混雜模式：BackCompat

（3）head屬性

說明： 可以直接使用document.head來獲取<head>元素

4.字符集的擴展

（1）characterSet屬性

說明： 它表示文檔實際使用的字符集，也可以用來指定新字符集，默認值是UTF-16

5.自定義屬性

說明： 這個操作是html5允許的操作，但要使用前綴data-以便告訴瀏覽器，這些屬性既不包含與渲染有關的信息，也不包含元素的語義信息，不過命名沒有什么要求，在設置完成后，可以通過dataset屬性，它的值是一個DOMStringMap的實例，包含一組鍵/值對映射，在取值時使用data-后面所有的字符拼接成一個字符串，這個字符串是小寫的來取值

    <div id="myDiv" data-appId-MaMaMaMaMa="12345" data-myname="Nicholas"></div>

let div=document.getElementById("myDiv");
console.log(div.dataset);

6.標記

（1）innerHTML和outerHTML屬性

說明： 在讀取的時候，它會返回元素所有后代的HTML字符串，在設置的時候，默認是HTML，所以設置一個字符串值的時候，會將其轉換成HTML片段，前者是只能操作節點的子元素，后者則能操作節點本身和其子元素

<div id="content">
  <p>This is a <strong>paragraph</strong> with a list following it.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

let divElement=document.getElementById("content");

console.log(divElement.innerHTML);

divElement.innerHTML="Hello world!";

（2）insertAdjacentHTML()和insertAdjacentText()

說明： 它們表示在指定的位置插入HTML或者文本，它們都有兩個參數，第一個是插入的位置選項，第二個是插入的內容

插入位置選項（無大小寫之分）：
beforebegin：插入當前元素前面，作為前一個兄弟節點； afterbegin：插入當前元素內部，作為新的子節點或放在第一個子節點前面； beforeend：插入當前元素內部，作為新的子節點或放在最后一個子節點后面； afterend：插入當前元素后面，作為下一個兄弟節點。

對于選項中的前面和后面的標準：
假設當前元素是<p>Hello world!</p>，則beforebegin和afterbegin中的begin指開始標簽<p>，而 afterend和beforeend中的end指結束標簽</p>。

7.scrollIntoView()

說明： 它可以讓指定的元素滾動到可視區域，它接受一個參數，這個參數可以是一個布爾值，也可以是一個配置對象

布爾值：
true：窗口滾動后元素的頂部與視口頂部對齊 false：窗口滾動后元素的頂部與視口底部對齊

配置對象：
behavior：滾動是否平滑，取值存在三個， smooth：平滑滾動 instant：通過一次跳躍立刻發生 auto：通過scroll-behavior的計算來得出，默認取值是這個 block：定義垂直方向的對齊，可取的值為"start"、"center"、"end"和"nearest"，默認為 "start"。 inline：定義水平方向的對齊，可取的值為"start"、"center"、"end"和"nearest"，默認為 "nearest"。

七、樣式

1.存儲元素樣式

說明： 支持style屬性的html元素在其節點對象上面會存在一個style的對象，它是一個CSSStyleDeclaration類型的實例，在寫css屬性的時候兩個單詞使用連字符-鏈接，但是在對象中就需要駝峰命名了，一般來說，如果需要，獲取到了節點，就可以用這個對象進行樣式操作，同時也能獲取通過style屬性設置的樣式，注意Float這個css屬性，他在style對象中對應的值是cssFloat，而不是float，因為這個在JavaScript是關鍵字

let myDiv=document.getElementById("myDiv"); 

// 設置背景顏色
myDiv.style.backgroundColor="red"; 

// 修改大小
myDiv.style.width="100px"; 
myDiv.style.height="200px"; 

// 設置邊框
myDiv.style.border="1px solid black";

在標準模式下，所有尺寸必須帶單位，在混雜模式下，尺寸不帶單位默認是px

（1）計算樣式

說明： 由于style對象只能獲取到style屬性中的信息，對于寫在<style>里面的并沒有什么辦法，這時可以使用document.defaultView.getComputedStyle(計算樣式的元素, 偽元素字符串)來完成，它的返回值類型跟上面那個是一樣的，不過它包括<style>里面的樣式

<!DOCTYPE html>
<html>
  <head>
    <title>Computed Styles Example</title>
    <style type="text/css">
      #myDiv {
        background-color: blue;
        width: 100px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div
      id="myDiv"
      style="background-color: red; border: 1px solid black"
    ></div

    <script>
      let myDiv=document.getElementById("myDiv");
      let computedStyle=document.defaultView.getComputedStyle(myDiv, null);

      console.log(myDiv.style.width);
      console.log(computedStyle.width);
    </script>
  </body>
</html>

這個返回對象里面的值是不能夠更改的，同時，如果瀏覽器存在默認的樣式，也會在這個返回的對象中展示出來

2.元素尺寸

（1）偏移尺寸

注意： 下面這組屬性是只讀的，每次訪問都會重新計算，所以一般情況避免多次使用，影響性能

節點.offsetParent：返回離當前元素最近的已定位的父元素，如果沒有找到這樣的父元素，則返回最近的祖先元素。節點.offsetLeft：返回當前元素左上角相對于offsetParent節點的左邊界偏移的像素值節點.offsetHeight：它返回該元素的像素高度，高度包含該元素的垂直內邊距和邊框和水平滾動條，且是一個整數節點.offsetTop：返回當前元素相對于其offsetParent元素的頂部內邊距的距離節點.offsetWidth：返回一個元素的布局寬度，這個寬度包括元素的寬度、內邊距、邊框以及垂直滾動條

（2）客戶端尺寸

說明： 它只元素內部的內容，所以不會包含滾動條的寬度和高度，同時也是只讀，避免重復調用

節點.clientHeight：返回元素內部的高度，包含內邊距節點.clientWidth：返回元素內部的寬度，包含內邊距

（3）滾動尺寸

注意： 下面這組屬性是只讀的，每次訪問都會重新計算，所以一般情況避免多次使用，影響性能

節點.scrollHeight：返回一個元素的高度，包括內邊距以及溢出不可見的部分節點.scrollLeft：返回內容＋內邊距的區域舉例左側的像素值，也就是左側隱藏的像素值，當然這個值也可以自己來設置節點.scrollTop：返回在垂直方向上舉例頂部的像素值，其它與上面那個屬性是一樣的節點.scrollWidth：返回一個元素的寬度，包括內邊距以及溢出不可見的部分

當然，如果想快捷的確定元素的尺寸可以使用getBoundingClientRect()這個方法，它會給出元素在頁面中相對于視口的位置

八、范圍

說明： 你在電腦上面用鼠標一按一拉，將一些文字圈起來，此時這些文字會被選中，如果你想操作這塊區域，這時范圍（range）就可以使用了，它一般是用來出來文檔中選擇的文本，讓其處理的時候更加簡單，當然，它也是可以處理節點元素的

1.創建范圍

說明： 可以使用document.createRange()創建一個范圍，與節點類似，在這個文檔中創建的范圍不可以在另一個文檔中去使用，每個范圍都是一個Range的實例，包含以下屬性和方法：

collapsed：返回一個表示范圍的起始位置和終止位置是否相同的布爾值 commonAncestorContainer：返回文檔中以startContainer和endContainer為后代的最深的節點 endContainer：表示范圍終點所在的節點 endOffset：表示范圍終點在endContainer中的位置，值是數字 startContainer：表示范圍起點所在的節點 startOffset：表示范圍起點在startContainer中的位置，值是數字

2.簡單選擇

說明： 最簡單使用就是使用selectNode()或selectNodeContents()方，這兩個方法都接收一個節點作為參數，并將該節點的信息添加到調用它的范圍，selectNode()選擇整個節點，包括其后代節點，selectNodeContents()只選擇節點的后代

<!DOCTYPE html>
<html>
  <body>
    <p id="p1"><b>Hello</b> world!</p>

    <script>
      let range1=document.createRange(),
        range2=document.createRange(),
        p1=document.getElementById("p1");
      range1.selectNode(p1);
      range2.selectNodeContents(p1);

      console.log(range1);
      console.log(range2);
    </script>
  </body>
</html>

調用selectNode()：startContainer、endContainer 和 commonAncestorContainer 都等于傳入節點的父節點。在這個例子中，這幾個屬性都等于 document.body。startOffset 屬性等于傳入節點在其父節點 childNodes 集合中的索引（在這個例子中，startOffset 等于 1，因為 DOM 的合規實現把空格當成文本節點），而 endOffset 等于 startOffset 加 1（因為只選擇了一個節點）。

調用selectNodeContents()：startContainer、endContainer 和 commonAncestor Container 屬性就是傳入的節點，在這個例子中是<p>元素。startOffset 屬性始終為 0，因為范圍從傳入節點的第一個子節點開始，而 endOffset 等于傳入節點的子節點數量（node.child Nodes.length），在這個例子中等于2。

選定節點后范圍可執行的方法：
setStartBefore(refNode)：把范圍的起點設置到 refNode 之前，從而讓 refNode 成為選區的第一個子節點。startContainer 屬性被設置為 refNode.parentNode，而 startOffset屬性被設置為 refNode 在其父節點 childNodes 集合中的索引。 setStartAfter(refNode)：把范圍的起點設置到 refNode 之后，從而將 refNode 排除在選區之外，讓其下一個同胞節點成為選區的第一個子節點。startContainer 屬性被設置為 refNode.parentNode，startOffset 屬性被設置為 refNode 在其父節點 childNodes 集合中的索引加 1。 setEndBefore(refNode)：把范圍的終點設置到 refNode 之前，從而將 refNode 排除在選區之外、讓其上一個同胞節點成為選區的最后一個子節點。endContainer 屬性被設置為 refNode. parentNode，endOffset 屬性被設置為 refNode 在其父節點 childNodes 集合中的索引。 setEndAfter(refNode)：把范圍的終點設置到 refNode 之后，從而讓 refNode 成為選區的最后一個子節點。endContainer 屬性被設置為 refNode.parentNode，endOffset 屬性被設置為 refNode 在其父節點 childNodes 集合中的索引加 1。

3.復雜選擇

說明： 這里存在setStart(參照節點，偏移量)和setEnd(參照節點，偏移量)兩個方法，它們可以選擇節點的某一部分，這也是其主要的作用，同時setStart的偏移量可以理解成從哪里開始，包括偏移量這個位置，setEnd理解為結束的位置，包括偏移量這個位置

<p id="p1">
    <b>Hello</b>
     world!
</p>

// 假設需要選擇從"Hello"中的"llo"到" world!"中的"o"的部分

// 獲取相關節點的引用
let p1=document.getElementById("p1") 
let helloNode=p1.firstChild.firstChild 
let worldNode=p1.lastChild

// 創建范圍
let range=document.createRange(); 

range.setStart(helloNode, 2); 

range.setEnd(worldNode, 3);

4.操作范圍

range.deleteContents()：刪除范圍包含的節點 range.extractContents()：刪除范圍包含的節點，但是會將刪除的部分返回 range.cloneContents()：創建一個范圍的副本，然后將這個副本返回，注意返回的不是節點

let p1=document.getElementById("p1"),
    helloNode=p1.firstChild.firstChild,
    worldNode=p1.lastChild,
    range=document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
range.deleteContents();

let p1=document.getElementById("p1"),
    helloNode=p1.firstChild.firstChild,
    worldNode=p1.lastChild,
    range=document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

let fragment=range.extractContents();
p1.parentNode.appendChild(fragment);

let p1=document.getElementById("p1"),
        helloNode=p1.firstChild.firstChild,
        worldNode=p1.lastChild,
range=document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

let fragment=range.cloneContents();
p1.parentNode.appendChild(fragment);

5.范圍插入

range.insertNode(插入的節點)：在范圍選區開始的位置插入一個節點，這個一般用于插入有用的信息 range.surroundContents(插入包含范圍的節點)：與上面不同的地方在于它可以插入包含范圍的節點，其它是一致的，這個一般用于高亮關鍵詞

let p1=document.getElementById("p1"),
        helloNode=p1.firstChild.firstChild,
        worldNode=p1.lastChild,
        range=document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

let span=document.createElement("span");
span.style.color="red";
span.appendChild(document.createTextNode("Inserted text"));
range.insertNode(span);

let p1=document.getElementById("p1"),
        helloNode=p1.firstChild.firstChild,
        worldNode=p1.lastChild,
range=document.createRange();
range.selectNode(helloNode);

let span=document.createElement("span");
span.style.backgroundColor="yellow";
range.surroundContents(span);

6.范圍折疊

說明： 通過折疊可以將一段文本的范圍折疊成一個點，使范圍的起點和終點合并，將原本包含多個節點的范圍簡化為只包含一個節點或一個位置，從而化簡操作，折疊操作可以交給collapse(布爾值)，布爾值表示折疊到范圍哪一端,true表示折疊到起點，false表示折疊到終點，檢測是否折疊的操作可以交給collapsed屬性，其返回值也是布爾值，同時它也能檢測兩個節點是否是相鄰的狀態

相鄰狀態的判定：在范圍的上下文中，我們使用的是邊界點和偏移量來定義范圍的起點和終點。當范圍中的兩個節點相鄰時，它們的邊界點會非常接近，甚至可能在同一個位置上。這就導致了范圍的起點和終點重疊。

<!DOCTYPE html>
<html>
  <head>
    <title>折疊將范圍變成一個點</title>
  </head>
  <body>
    <p>這是一個示例文本。</p>

    <script>
      var range=document.createRange();
      var textNode=document.querySelector("p").firstChild;
      range.setStart(textNode, 2);
      range.setEnd(textNode, 7);

      console.log("初始范圍選中文本: " + range.toString());

      range.collapse(false);

      console.log("折疊后范圍選中文本: " + range.toString());
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>檢測元素是否相鄰</title>
  </head>
  <body>
    <p id="p1">Paragraph 1</p>
    <p id="p2">Paragraph 2</p>

    <script>
      let p1=document.getElementById("p1"),
        p2=document.getElementById("p2"),
        range=document.createRange();
        
      range.setStartAfter(p1);
      range.setStartBefore(p2);
    </script>
  </body>
</html>

假設p1和p1是不相鄰的兩個節點，那么將其設置成范圍的起始位置和結束位置，那么上面所說的collapsed屬性的值應該是false，但是結果是true，與猜測相反，那也就得到這兩個元素是相鄰的

7.范圍比較

說明： 如果有多個范圍，則可以使用range.compareBoundaryPoints(常量值，比較的范圍)確定范圍之間是否存在公共的起點或終點，它的返回值是一個數字，第一個范圍的邊界點位于第二個范圍的邊界點之前時返回-1，在兩個范圍的邊界點相等時返回 0，在第一個范圍的邊界點位于第二個范圍的邊界點之后時返回1

常量值取值：
Range.START_TO_START（0）：比較兩個范圍的起點； Range.START_TO_END（1）：比較第一個范圍的起點和第二個范圍的終點； Range.END_TO_END（2）：比較兩個范圍的終點； Range.END_TO_START（3）：比較第一個范圍的終點和第二個范圍的起點。

8.范圍復制

range.cloneRange()：這個方法會創建調用它的范圍的副本，新范圍包含與原始范圍一樣的屬性，修改其邊界點不會影響原始范圍

9.范圍清理

range.detach()：把范圍從創建它的文檔中剝離，接觸對范圍的引用，便于垃圾回收將其處理

次篇文章講解了html的基礎知識，這篇文章繼續講解Html的相關知識，如果想從零開始學習php編程的小伙伴，請從淼哥的第一篇文章看！

上次文章講解的是DTD，也就是我們常說的DOCTYPE。

我們繼續講解。

<!DOCTYPE html>-------------------------DOCTYPE 聲明了文檔類型

<html> ------------------------------------文檔類型html開始標記

<head> -----------------------------------頭部標記

<title>我的第一個標題</title>

</head> ----------------------------------頭部結束標記

<body> ---------------------------------文件主體

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body> ----------------------------------文件主體結束

</html> ----------------------------------文檔類型html結束標記

這個是我們上次講解的html架構。

接著我們繼續講解。

html標簽

?寫法<html></html>

HTML標簽是HTML文檔的根標簽，在HTML中標簽是一層嵌套一層的，而<HTML>標簽是根標簽（最外面一層的標簽），所有其他的標簽都寫在這個標簽中。

根標簽我們可以理解為最外層的標簽。（看上面的結構）

文檔頭信息

HTML又包含head標簽和body標簽，其中head標簽中設置文檔頭信息，body標簽中設置文檔的內容。

<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。

<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

下面這些標簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

那么怎么理解元信息呢？比如對于網頁本身的一些描述，該網頁的標題？該網頁的描述，該網頁用的什么字符編碼！等等，這些信息描述著網頁，用戶又看不到這些信息。

比如某個人的性別，姓名，當你看到這個人，可以看到外貌，身高，穿衣服的顏色。但是你并不知道這個人的姓名，有的也不知道性別。尤其像某些中性一點的長相。是吧。元信息不會渲染，但是屬于該網頁的信息。

base標簽

（該標簽應該學習了a img link form這幾個標簽之后在學習，看不懂沒關系，可以先了解）

base標簽，是嵌套在head標簽中的一個標簽。這個標簽是一個可選標簽，也就是可以有，也可以沒有！

<base> 標簽為頁面上的所有鏈接規定默認地址或默認目標。

通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。比如：我有個<a href='aa.html'>標簽,那么瀏覽器會從當前文檔的url，比如當前文檔的url是www.xxxx.com/aa/bb/cc.html，瀏覽器會把www.xxxx.com/aa/bb/路徑拿出來，和aa.html組成新的url，那么這個超鏈接就會變成www.xxxx.com/aa/bb/aa.html。

使用 <base> 標簽可以改變這一點。

如果我們將base設置成為其他的url。<base />那么，還是<a href='aa.html'>標簽，就會把http://www.myweb.com/i/這個路徑拿出來和aa.html組成新的url地址。那么這個url超鏈接就會變成http://www.myweb.com/i/a.html這個鏈接了。

瀏覽器隨后將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。

base標簽的用法

<base /> ------必選屬性。（你有這個標簽，就必須擁有這個屬性）

<base target="_blank" /> ------------------可選屬性。target意思是目標，打開超鏈接的方式，

當然也可以將兩個屬性寫到一個base標簽中。

默認target的屬性是_self，也就是點擊超鏈接，在當前頁面的框架中打開。（為什么不是當前頁面呢？因為頁面有可能嵌套在框架里）

link標簽

用法： <head> <link rel="stylesheet" type="text/css" href="test.css"></head>

meta標簽

meta標簽的作用有：搜索引擎優化（SEO），定義頁面使用語言，自動刷新并指向新的頁面，實現網頁轉換時的動態效果，控制頁面緩沖，網頁定級評價，控制網頁顯示的窗口等！

由于meta信息相對比較復雜我們將在以后HTML高級課程中講解

最常用meta標簽是：

設置頁面編碼寫法。（頁面編碼注意，要設置的編碼和文檔的編碼統一，否則會出亂碼）

具體編碼以后的文章講解。

script標簽

script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。

必需的 type 屬性規定腳本的 MIME 類型。

JavaScript 的常見應用是圖像操作、表單驗證以及動態內容更新。

用法<script type="text/javascript">document.write("Hello World!") ></script> 以后學javascript將會用到，這里只做了解。

style標簽

在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文檔。

type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 "text/css"。

用法<head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head>

該標簽將會在學習CSS時用到，這里只做了解

title標簽

<title> 元素可定義文檔的標題。

瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。

同樣，當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標題將成為該文檔鏈接的默認名稱。

用法<title>網頁標題</title>

<title> 標簽是 <head> 標簽中唯一要求包含的東西。（必須有title標簽）

head 標簽總結

<head>標簽唯一要求包含的標簽是<title>其他那幾種可以包含也可以不包含，但是一般我們會包含<meta charset=“utf-8”>告訴瀏覽器我們的文件編碼是什么。

常用的標簽有：

meta標簽，會在Html高級部分繼續講解。

<body>頁面主體信息

body 元素包含html的所有顯示web內容（比如文本、超鏈接、圖像、表格和列表等等。）

Body中可以使用塊級標簽和內聯標簽來顯示文檔結構

塊級標簽：h1~h6,p,div,table,ul,dl,from標簽等

內聯標簽：a,img,span,I,strong,select標簽等

什么塊級標簽（元素）呢？塊級標簽和內聯標簽區別是什么？

塊級元素(block)特性:總是獨占一行

內聯元素(inline)特性:和相鄰的內聯元素在同一行。

標簽和元素是一個意思！

<body>中包含的標簽？

標題標簽

通過<h1>~<h6>六個標簽定義不同大寫的標簽。

文本格式化標簽

早期編寫html代碼的時候，那個時候css用的很少，所以有一些標簽來文本格式化。現在基本都用CSS來格式化文本的大小顏色粗體等等。

而更多時候使用這些標簽來進行占位，利用CSS來渲染這些標簽。常用的是span。

html中的注釋

注釋用來說明、注解、注釋代碼。給人看的不會被執行。

格式為：<!– 注釋內容-->

瀏覽器頁面不會被顯示，而頁面源代碼中可以看到注釋的內容。因為項目越大，或者你的頁面越大，當時可能你能看懂。時間長了肯定看不明白。如果有注釋的話，可以馬上理解當時為什么要這么做。

水平線

在HTML代碼中加入一條水平線利用<hr />來操作。

段落標簽-<p>

瀏覽器會自動地在段落的前后添加空行，一般用在大段的文章。

換行標簽<br/>

<br/>標簽可以實現換一個新行 ,正常來說，你在編寫html頁面的時候，無論怎么換行，在頁面用瀏覽器打開的時候，是不會換行的，如果加入了<br/>標簽，瀏覽器就會認為這里該換行顯示了。

鏈接<a>標簽

HTML 使用超級鏈接與網絡上的另一個文檔相連。

幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們通過使用 <a> 標簽在 HTML 中創建鏈接。

有兩種使用 <a> 標簽的方式：

1、通過使用 href 屬性 - 創建指向另一個文檔的鏈接

<a href=“鏈接的文件名” target=“_blank”>鏈接名</a>

2、通過使用 name 屬性 - 創建文檔內的書簽

一般錨點鏈接主要用于網頁太長了，想瀏覽的那個位置需要滾輪滾動好幾下才能到達那個位置，而使用錨點（書簽）直接可以準確的跳轉到你想去的位置。

<a name=“文檔標簽名”>文檔標簽</a>

文檔中對錨進行命名（創建一個書簽）

<a href=“#tips”>鏈接名</a>

同一個文檔中創建指向該錨的鏈接用關鍵字#+錨名字

<a >有用的提示</a>

也可以鏈接到其他網絡上的頁面錨的鏈接

圖像<img>

可以使用img標簽在頁面上顯示一張圖片。

格式：

備注：一般只設置寬即可，瀏覽器會根據圖片大小進行縮放。如果強行設置寬、高，有的時候圖片會失真。

列表標簽

列表標簽分為有序標簽和無序標簽

當然、有序列表前面也可以更改序號，需要在CSS中學習改變序號的方法。

二級列表<dl>標簽

表格標簽-table

Table標簽用來制作表格，表格由若干個行<tr>組成，每一行又由若干個單元格<td>組成。

Table標簽中使用tr標簽定義行，td標簽定義一行中的一個列。如：定義一個一行四列。

表格的表頭使用 <th> 標簽進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文本：

<table>標簽的cellpadding 屬性規定單元邊沿與其內容之間的空白。

<table>標簽的cellspacing 屬性規定單元格之間的空間。

橫向合并單元格-colspan

表格-table-豎向-rowspan

內聯框架

可以使用iframe在頁面中在嵌入另外一個頁面。

分區標簽-div
Div是塊級標簽，主要是用來作為標簽容器，和規劃頁面結構（頁面布局）的
用法：
<div style="margin:auto;border:1px solid #f00;width: 300px;height: 600px"></div>

在很早以前，小編剛入行的時候，那個時候CSS不流行，頁面布局全部都用表格來做。那酸爽實在無法用言語來表達。而現在都是用CSS來進行頁面布局。這個div標簽頁是以后布局常用的標簽。

Span標簽

Span標簽是內聯標簽，沒有特殊功能。主要是用來做為文本的容器，span標簽主要是配合CSS來處理文字。

比如，我只想讓幾個文字編程紅顏色的，這個時候就可以用span標簽配合CSS來做了。

框架集-frameset

我們可以使用frameset標簽把一個頁面窗口分隔成多個窗口，然后使用frame標簽為每一個窗口制定一個頁面

使用rows/cols的值規定每行或每列占據屏幕的面積,中間用逗號分隔。

frameset不能放在body中，如果放在body中不能顯示框架！

在最新的html5中已經刪除了這個標簽了

實體

在 HTML 中，某些字符是預留的。

在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。

比如我們想在網頁使用空格，直接按空格鍵是肯定不好使的，所以使用使用實體  !

音頻

使用embed標簽可以在網頁中嵌入Flash，Mid，MP3等嵌入式內容

現在html5出了很多新的標簽，以后會專門有講解html5的文章。

今天我們一起了解了html相關的很多標簽。其實都很簡單。只要自己動手做一做，就可以做出來了。如果想要做出精美的頁面，還是需要配合css來實現的哦。

明天我們繼續講解html的一些其他相關知識。手寫不宜！請給小編點個贊！十分感謝。

（注：本內容屬于原創，未經許可嚴禁抄襲。內容真實性已考證，圖片來源于網絡，圖片如有侵權請聯系作者刪除）

NSI（Windows-1252）

ANSI 是 Windows 95 及其之前的 Windows 系統中默認的字符集。

ANSI 也稱為 Windows-1252。

重要提示

ANSI 和 ISO-8859-1 非常相似，唯一的不同是在 32 個字符上。

在 ANSI 中，從 128 到 159 的字符用于一些有用的字符，比如歐元符號。

在 ISO-8859-1 中，這些字符映射為在 HTML 中不起作用的控制字符。

許多 Web 開發者聲明 ISO-8859-1，并使用這 32 個值，就像它們使用的是 Windows-1252。

由于這種常見的誤解，當 ISO-8859-1 被聲明時，瀏覽器將更改為 Windows-1252。這對以下文檔類型都適用：HTML4、HTML5 和 XHTML。

ANSI 和 ASCII

ANSI 的第一部分（實體編號 0-127）是原來的 ASCII 字符集。它包含數字、大小寫英文字母和一些特殊字符。

如需深入了解 ASCII，請查看完整的 ASCII 參考手冊。

ANSI 字符集

字符	編號	實體名稱	描述
	32		空格（space）
!	33		感嘆號（exclamation mark）
"	34	"	引號（quotation mark）
#	35		數字符號（number sign）
$	36		美元符號（dollar sign）
%	37		百分比符號（percent sign）
&	38	&	& 符號（ampersand）
'	39		撇號（apostrophe）
(	40		左括號（left parenthesis）
)	41		右括號（right parenthesis）
*	42		星號（asterisk）
+	43		加號（plus sign）
,	44		逗號（comma）
-	45		連字符（hyphen-minus）
.	46		句號（full stop）
/	47		斜線（solidus）
0	48		數字 0（digit zero）
1	49		數字 1（digit one）
2	50		數字 2（digit two）
3	51		數字 3（digit three）
4	52		數字 4（digit four）
5	53		數字 5（digit five）
6	54		數字 6（digit six）
7	55		數字 7（digit seven）
8	56		數字 8（digit eight）
9	57		數字 9（digit nine）
:	58		冒號（colon）
;	59		分號（semicolon）
<	60	<	小于號（less-than sign）
=	61		等于號（equals sign）
>	62	>	大于號（greater-than sign）
?	63		問號（question mark）
@	64		@ 符號（commercial at）
A	65		拉丁文大寫字母 A
B	66		拉丁文大寫字母 B
C	67		拉丁文大寫字母 C
D	68		拉丁文大寫字母 D
E	69		拉丁文大寫字母 E
F	70		拉丁文大寫字母 F
G	71		拉丁文大寫字母 G
H	72		拉丁文大寫字母 H
I	73		拉丁文大寫字母 I
J	74		拉丁文大寫字母 J
K	75		拉丁文大寫字母 K
L	76		拉丁文大寫字母 L
M	77		拉丁文大寫字母 M
N	78		拉丁文大寫字母 N
O	79		拉丁文大寫字母 O
P	80		拉丁文大寫字母 P
Q	81		拉丁文大寫字母 Q
R	82		拉丁文大寫字母 R
S	83		拉丁文大寫字母 S
T	84		拉丁文大寫字母 T
U	85		拉丁文大寫字母 U
V	86		拉丁文大寫字母 V
W	87		拉丁文大寫字母 W
X	88		拉丁文大寫字母 X
Y	89		拉丁文大寫字母 Y
Z	90		拉丁文大寫字母 Z
[	91		左方括號（left square bracket）
\	92		反斜線（reverse solidus）
]	93		右方括號（right square bracket）
^	94		插入符號（circumflex accent）
_	95		下劃線（low line）
`	96		重音符（grave accent）
a	97		拉丁文小寫字母 a
b	98		拉丁文小寫字母 b
c	99		拉丁文小寫字母 c
d	100		拉丁文小寫字母 d
e	101		拉丁文小寫字母 e
f	102		拉丁文小寫字母 f
g	103		拉丁文小寫字母 g
h	104		拉丁文小寫字母 h
i	105		拉丁文小寫字母 i
j	106		拉丁文小寫字母 j
k	107		拉丁文小寫字母 k
l	108		拉丁文小寫字母 l
m	109		拉丁文小寫字母 m
n	110		拉丁文小寫字母 n
o	111		拉丁文小寫字母 o
p	112		拉丁文小寫字母 p
q	113		拉丁文小寫字母 q
r	114		拉丁文小寫字母 r
s	115		拉丁文小寫字母 s
t	116		拉丁文小寫字母 t
u	117		拉丁文小寫字母 u
v	118		拉丁文小寫字母 v
w	119		拉丁文小寫字母 w
x	120		拉丁文小寫字母 x
y	121		拉丁文小寫字母 y
z	122		拉丁文小寫字母 z
{	123		左花括號（left curly bracket）
\|	124		豎線（vertical line）
}	125		右花括號（right curly bracket）
~	126		波浪線（tilde）
	127		未使用（NOT USED）
	128	€	歐元符號（euro sign）
	129		未使用（NOT USED）
?	130	&sbquo;	下單引號（single low-9 quotation mark）
?	131	&fnof;	帶鉤的拉丁文小寫字母 f
?	132	&bdquo;	下雙引號（double low-9 quotation mark）
…	133	…	水平省略號（horizontal ellipsis）
?	134	&dagger;	劍號（dagger）
?	135	&Dagger;	雙劍號（double dagger）
?	136	&circ;	修飾字母抑揚音（modifier letter circumflex accent）
‰	137	&permil;	千分比符號（per mille sign）
?	138	&Scaron;	帶有 caron 的拉丁文大寫字母 S
?	139	&lsaquo;	左單角引號（single left-pointing angle quotation mark）
?	140	&OElig;	拉丁文大寫連字 OE
	141		未使用（NOT USED）
?	142	&Zcaron;	帶有 caron 的拉丁文大寫字母 Z
	143		未使用（NOT USED）
	144		未使用（NOT USED）
'	145	‘	左單引號（left single quotation mark）
'	146	’	右單引號（right single quotation mark）
"	147	“	左雙引號（left double quotation mark）
"	148	”	右雙引號（right double quotation mark）
?	149	•	著重號（bullet）
–	150	–	短破折號/連字符（en dash）
—	151	—	長破折號（em dash）
?	152	&tilde;	小波浪線（small tilde）
?	153	™	貿易標記符號（trade mark sign）
?	154	&scaron;	帶有 caron 的拉丁文小寫字母 s
?	155	&rsaquo;	右單角引號（single right-pointing angle quotation mark）
?	156	&oelig;	拉丁文小寫連字 oe
	157		未使用（NOT USED）
?	158	&zcaron;	帶有 caron 的拉丁文小寫字母 z
?	159	&Yuml;	帶有分音符（diaeresis）的拉丁文大寫字母 Y
	160		不換行空格（no-break space）
?	161	¡	倒置感嘆號（inverted exclamation mark）
￠	162	¢	美分符號（cent sign）
￡	163	£	英鎊符號（pound sign）
¤	164	¤	貨幣符號（currency sign）
￥	165	¥	日元符號（yen sign）
\|	166	¦	間斷的豎杠（broken bar）
§	167	§	小節號（section sign）
¨	168	¨	分音符號（diaeresis）
?	169	©	版權所有（copyright sign）
a	170	ª	陰性序數記號（feminine ordinal indicator）
?	171	«	左雙角引號（left-pointing double angle quotation mark）
?	172	¬	否定符號（not sign）
	173		軟連字符（soft hyphen）
?	174	®	注冊商標（registered sign）
ˉ	175	¯	長音符號（macron）
°	176	°	度符號（degree sign）
±	177	±	加減號/正負號（plus-minus sign）
2	178	²	上標 2（superscript two）
3	179	³	上標 3（superscript three）
′	180	´	尖音符號（acute accent）
μ	181	µ	微米符號（micro sign）
?	182	¶	段落符號（pilcrow sign）
·	183	·	中間點（middle dot）
?	184	¸	變音符號（cedilla）
1	185	¹	上標 1（superscript one）
o	186	º	陽性序數記號（masculine ordinal indicator）
?	187	»	右雙角引號（right-pointing double angle quotation mark）
?	188	¼	1/4 分數（vulgar fraction one quarter）
?	189	½	1/2 分數（vulgar fraction one half）
?	190	¾	3/4 分數（vulgar fraction three quarters）
?	191	¿	倒置問號（inverted question mark）
à	192	À	帶有重音符號（grave）的拉丁文大寫字母 A
á	193	Á	帶有尖音符號（acute）的拉丁文大寫字母 A
?	194	Â	帶有抑揚音符號（circumflex）的拉丁文大寫字母 A
?	195	Ã	帶有波浪線的拉丁文大寫字母 A
?	196	Ä	帶有分音符（diaeresis）的拉丁文大寫字母 A
?	197	Å	帶有上圓圈的拉丁文大寫字母 A
?	198	Æ	拉丁文大寫字母 AE
?	199	Ç	帶有變音符號（cedilla）的拉丁文大寫字母 C
è	200	È	帶有重音符號（grave）的拉丁文大寫字母 E
é	201	É	帶有尖音符號（acute）的拉丁文大寫字母 E
ê	202	Ê	帶有抑揚符號（circumflex）的拉丁文大寫字母 E
?	203	Ë	帶有分音符（diaeresis）的拉丁文大寫字母 E
ì	204	Ì	帶有重音符號（grave）的拉丁文大寫字母 I
í	205	Í	帶有尖音符號（acute）的拉丁文大寫字母 I
?	206	Î	帶有抑揚音符號（circumflex）的拉丁文大寫字母 I
?	207	Ï	帶有分音符（diaeresis）的拉丁文大寫字母 I
D	208	Ð	拉丁文大寫字母 Eth
?	209	Ñ	帶有波浪線的拉丁文大寫字母 N
ò	210	Ò	帶有重音符號（grave）的拉丁文大寫字母 O
ó	211	Ó	帶有尖音符號（acute）的拉丁文大寫字母 O
?	212	Ô	帶有抑揚音符號（circumflex）的拉丁文大寫字母 O
?	213	Õ	帶有波浪線的拉丁文大寫字母 O
?	214	Ö	帶有分音符（diaeresis）的拉丁文大寫字母 O
×	215	×	乘號（multiplication sign）
?	216	Ø	帶有刪除線的拉丁文大寫字母 O
ù	217	Ù	帶有重音符號（grave）的拉丁文大寫字母 U
ú	218	Ú	帶有尖音符號（acute）的拉丁文大寫字母 U
?	219	Û	帶有抑揚音符號（circumflex）的拉丁文大寫字母 U
ü	220	Ü	帶有分音符（diaeresis）的拉丁文大寫字母 U
Y	221	Ý	帶有尖音符號（acute）的拉丁文大寫字母 Y
T	222	Þ	拉丁文大寫字母 Thorn
?	223	ß	拉丁文小寫字母 sharp s
à	224	à	帶有重音符號（grave）的拉丁文小寫字母 a
á	225	á	帶有尖音符號（acute）的拉丁文小寫字母 a
a	226	â	帶有抑揚音符號（circumflex）的拉丁文小寫字母 a
?	227	ã	帶有波浪線的拉丁文小寫字母 a
?	228	ä	帶有分音符（diaeresis）的拉丁文小寫字母 a
?	229	å	帶有上圓圈的拉丁文小寫字母 a
?	230	æ	拉丁文小寫字母 ae
?	231	ç	帶有變音符號（cedilla）的拉丁文小寫字母 c
è	232	è	帶有重音符號（grave）的拉丁文小寫字母 e
é	233	é	帶有尖音符號（acute）的拉丁文小寫字母 e
ê	234	ê	帶有抑揚音符號（circumflex）的拉丁文小寫字母 e
?	235	ë	帶有分音符（diaeresis）的拉丁文小寫字母 e
ì	236	ì	帶有重音符號（grave）的拉丁文小寫字母 i
í	237	í	帶有尖音符號（acute）的拉丁文小寫字母 i
?	238	î	帶有抑揚音符號（circumflex）的拉丁文小寫字母 i
?	239	ï	帶有分音符（diaeresis）的拉丁文小寫字母 i
e	240	ð	拉丁文小寫字母 eth
?	241	ñ	帶有波浪線的拉丁文小寫字母 n
ò	242	ò	帶有重音符號（grave）的拉丁文小寫字母 o
ó	243	ó	帶有尖音符號（acute）的拉丁文小寫字母 o
?	244	ô	帶有抑揚音符號（circumflex）的拉丁文小寫字母 o
?	245	õ	帶有波浪線的拉丁文小寫字母 o
?	246	ö	帶有分音符（diaeresis）的拉丁文小寫字母 o
÷	247	÷	除號（division sign）
?	248	ø	帶有刪除線的拉丁文小寫字母 o
ù	249	ù	帶有重音符號（grave）的拉丁文小寫字母 u
ú	250	ú	帶有尖音符號（acute）的拉丁文小寫字母 u
?	251	û	帶有抑揚音符號（circumflex）的拉丁文小寫字母 u
ü	252	ü	帶有分音符（diaeresis）的拉丁文小寫字母 u
y	253	ý	帶有尖音符號（acute）的拉丁文小寫字母 y
t	254	þ	拉丁文小寫字母 thorn
?	255	ÿ	帶有分音符（diaeresis）的拉丁文小寫字母 y

ANSI 控制字符

ANSI 控制字符（00-31，加上 127）最初被設計用來控制諸如打印機和磁帶驅動器之類的硬件設備。

控制字符（除了水平制表符、換行、回車之外）在 HTML 文檔中不起任何作用。

字符	編號	描述
NUL	00	空字符（null character）
SOH	01	標題開始（start of header）
STX	02	正文開始（start of text）
ETX	03	正文結束（end of text）
EOT	04	傳輸結束（end of transmission）
ENQ	05	請求（enquiry）
ACK	06	收到通知/響應（acknowledge）
BEL	07	響鈴（bell）
BS	08	退格（backspace）
HT	09	水平制表符（horizontal tab）
LF	10	換行（line feed）
VT	11	垂直制表符（vertical tab）
FF	12	換頁（form feed）
CR	13	回車（carriage return）
SO	14	不用切換（shift out）
SI	15	啟用切換（shift in）
DLE	16	數據鏈路轉義（data link escape）
DC1	17	設備控制 1（device control 1）
DC2	18	設備控制 2（device control 2）
DC3	19	設備控制 3（device control 3）
DC4	20	設備控制 4（device control 4）
NAK	21	拒絕接收/無響應（negative acknowledge）
SYN	22	同步空閑（synchronize）
ETB	23	傳輸塊結束（end transmission block）
CAN	24	取消（cancel）
EM	25	已到介質末端/介質存儲已滿（end of medium）
SUB	26	替補/替換（substitute）
ESC	27	溢出/逃離/取消（escape）
FS	28	文件分隔符（file separator）
GS	29	組分隔符（group separator）
RS	30	記錄分隔符（record separator）
US	31	單元分隔符（unit separator）

DEL	127	刪除（delete）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：一致性、模塊化、高性能的 JavaScript 實用
下一篇：跨平臺開發課程02-認識HTML

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商