Javascript與XML

瀏覽器對XML DOM的支持

DOM2級核心

創建一個新的、文檔元素為<root>的XML文檔：

    let xmldom = document.implementation.createDocument("", "root", null);

    alert(xmldom.documentElement.tagName);

    let child = xmldom.createElement("child");
    xmldom.documentElement.appendChild(child);

DOMParser類型

解析XML之前，必須創建一個DOMParser的實例，在調用parseFromString()方法，該方法接收兩個參數：要解析的XML字符串和內容類型（“text/xml”），返回一個Document的實例

    let parser = new DOMParser();
    let xmldom = parser.parseFromString("<root><child/></root>", "text/xml");

    alert(xmldom.documentElement.tagName);//root
    alert(xmldom.documentElement.firstChild.tagName);//child

    let anotherChild = xmldom.createElement("child");
    xmldom.documentElement.appendChild(anotherChild);

    let children = xmldom.getElementsByTagName("child");
    alert(children.length);//2

DOMParser 只能解析格式良好的XML，因而不能把HTML 解析為HTML 文檔。在發生解析錯誤時， 仍然會從parseFromString() 中返回一個Document 對象， 但這個對象的文檔元素是<parsererror>，而文檔元素的內容是對解析錯誤的描述。

    let parser = new DOMParser(), xmldom, errors;
    try{
        xmldom = parser.parseFromString("<root>", "text/xml");
        errors = xmldom.getElementsByTagName("parsererror");
        if(errors.length > 0){
            throw new Error("Parsing error");
        }
    }catch (ex) {
        alert("Parsing error");
    }

IE8及之前版本中的XML

略

跨瀏覽器處理XML

略

瀏覽器對XPath的支持

DOM3級XPath

最重要的兩個類型：XpathEvaluator和XPathNSResolver

XPathEvaluator的三個方法：

• createExpression(expression, nsresolver)：將XPath 表達式及相應的命名空間信息轉換成一個XPathExpression，這是查詢的編譯版。多次使用同一個查詢時很有用。
• createNSResolver(node)：根據node 的命名空間信息創建一個新的XPathNSResolver 對象。在基于使用命名空間的XML 文檔求值時，需要使用XPathNSResolver 對象。
• evaluate(expression, context, nsresolver, type, result)：在給定的上下文中，基于特定的命名空間信息來對XPath 表達式求值。剩下的參數指定如何返回結果。

evaluate()接收5 個參數：XPath 表達式、上下文節點、命名空間求解器、返回結果的類型和保存結果的XPathResult 對象（通常是null）。第三個參數（命名空間求解器）在XML 代碼中使用了XML 命名空間時要指定；如果XML 代碼中沒有使用命名空間，則這個參數應該指定為null。第四個參數的可能值：

• XPathResult.ANY_TYPE：返回與XPath 表達式匹配的數據類型。
• XPathResult.NUMBER_TYPE：返回數值。
• XPathResult.STRING_TYPE：返回字符串值。
• XPathResult.BOOLEAN_TYPE：返回布爾值。
• XPathResult.UNORDERED_NODE_ITERATOR_TYPE：返回匹配的節點集合，集合中節點的次序不一定與它們在文檔中的次序一致。
• XPathResult.ORDERED_NODE_ITERATOR_TYPE：返回匹配的節點集合，集合中節點的次序與它們在文檔中的次序一致。
• XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE：返回節點集合的快照，對文檔的后續操作不會影響到這個節點集合。集合中節點的次序不一定與它們在文檔中的次序一致。
• XPathResult.ORDERED_NODE_SNAPSHOT_TYPE：返回節點集合的快照，對文檔的后續操作不會影響到這個節點集合。集合中節點的次序與它們在文檔中的次序一致。
• XPathResult.ANY_UNORDERED_NODE_TYPE：返回匹配的節點集合，但集合中節點的次序不一定與它們在文檔中的次序一致。
• XPathResult.FIRST_ORDERED_NODE_TYPE：返回只包含一個節點的節點集合，包含的這個節點就是文檔中第一個匹配的節點。

    let parser = new DOMParser();
    let xmldom = parser.parseFromString("<root><employee><name><first></first><second></second><last></last></name></employee></root>", "text/xml");
    let result = xmldom.evaluate("employee/name/*", xmldom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
    if(result !== null){
        let node = result.iterateNext();
        while (node){
            alert(node.tagName);
            node = node.iterateNext();
        }
    }

var result = xmldom.evaluate("employee/name", xmldom.documentElement, null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
if (result !== null) {
    for (var i=0, len=result.snapshotLength; i < len; i++) {
    	alert(result.snapshotItem(i).tagName);
    }
}

大量內容略

E4X

E4X的類型

E4X定義的幾個新的全局類型：

• XML：XML 結構中的任何一個獨立的部分。
• XMLList：XML 對象的集合。
• Namespace：命名空間前綴與命名空間URI 之間的映射。
• QName：由內部名稱和命名空間URI 組成的一個限定名。

大量內容略

JSON

語法

JSON的語法可以表示以下三種類型的值。

• 簡單值：使用與JavaScript 相同的語法，可以在JSON 中表示字符串、數值、布爾值和null。不支持undefined。
• 對象：一組無序的鍵值對。而每個鍵值對中的值可以是簡單值，也可以是復雜數據類型的值。
• 數組：一組有序的值的列表，可以通過數值索引來訪問其中的值。數組的值也可以是任意類型——簡單值、對象或數組。

JSON不支持變量、函數或對象實例。

簡單值

5、"Hello world!"等等，JSON中的字符串必須使用雙引號。

對象

Javascript對象字面量：

let person = {
	name: "Nicholas",
	age: 29,
};

JSON表示該對象：

{
	"name": "Nicholas",
	"age": 29
}

在對象中嵌入對象：

{
    "name": "Nicholas",
    "age": 29,
    "school": {
        "name": "Merrimack College",
        "location": "North Andover, MA"
    }
}

數組

Javascript中的數組字面量：

let values = [25, "hi", true];

在JSON中的表示：

[25, "hi", true]

解析與序列化

JSON對象

JSON對象的兩個方法：stringify()和parse()，分別用于把Javascript對象序列化為JSON字符串和把JSON字符串解析為原生Javascript值

    let book = {
        title: "Professional Javascript",
        authors: [
            "Nicholas C. Zakas"
        ],
        edition: 3,
        year: 2011
    };
    let jsonText = JSON.stringify(book);
	let bookCopy = JSON.parse(jsonText);

序列化選項

JSON.stringify()除了要序列化的JavaScript 對象外，還可以接收另外兩個參數。第一個參數是個過濾器，可以是一個數組，也可以是一個函數；第二個參數是一個選項，表示是否在JSON 字符串中保留縮進。

過濾結果

如果過濾器參數是數組，那么JSON.stringify()的結果中將只包含數組中列出的屬性

let jsonText = JSON.stringify(book, ["title", "edition"]);

如果第二個參數是函數，行為會有不同。函數接收兩個參數，屬性(鍵)名和屬性值。根據屬性(鍵)名可以知道應該如何處理要序列化的對象中的屬性。屬性名只能是字符串，而在值并非鍵值對時，鍵名可以是空字符串。為了改變序列化對象的結果，函數返回的值就是相應鍵的值。如果函數返回了undefined，那么相應的屬性會被忽略

    let jsonText = JSON.stringify(book, function (key, value) {
        switch (key) {
            case "authors":
                return value.join(",")
            case "year":
                return 5000;
            case "edition":
                return undefined;
            default:
                return value;
        }
    });

字符串縮進

如果第三個參數是一個數值，那它表示的是每個級別縮進的空格數

let jsonText = JSON.stringify(book, null, 4);

最大縮進空格數為10，所有大于10 的值都會自動轉換為10。

如果縮進參數是一個字符串而非數值，則這個字符串將在JSON 字符串中被用作縮進字符（不再使用空格）。

toJSON()方法

可以為任何對象添加toJSON()方法：

var book = {
    "title": "Professional JavaScript",
    "authors": [
    	"Nicholas C. Zakas"
    ],
    edition: 3,
    year: 2011,
    toJSON: function(){
        return this.title;
    }
};
var jsonText = JSON.stringify(book);

JSON.stringify()，序列化該對象的順序如下。
(1) 如果存在toJSON()方法而且能通過它取得有效的值，則調用該方法。否則，返回對象本身。
(2) 如果提供了第二個參數，應用這個函數過濾器。傳入函數過濾器的值是第(1)步返回的值。
(3) 對第(2)步返回的每個值進行相應的序列化。
(4) 如果提供了第三個參數，執行相應的格式化。

解析選項

JSON.parse()方法也可以接收另一個參數，該參數是一個函數，會在每個鍵值對上調用。這個函數被稱為還原函數（reviver），如果還原函數返回undefined，則表示要從結果中刪除相應的鍵；如果返回其他值，則將該值插入到結果中。

	let book = {
        title: "Professional Javascript",
        authors: [
            "Nicholas C. Zakas",
            "Li Bai",
        ],
        edition: 3,
        year: 2011,
        releaseDate: new Date(2011, 11, 1),
    };
    let jsonText = JSON.stringify(book);
    let bookCopy = JSON.parse(jsonText, function (key, value) {
        if(key === "releaseDate"){
            return new Date(value);
        }else{
            return value;
        }
    });
    alert(bookCopy.releaseDate.getFullYear());

如果您覺得我的文章對您有幫助的話，可以點個贊，點個關注，也可以掃描下方二維碼關注我。我將在這個公眾號上更新自己的學習筆記，以及分享一些算法知識

Study and progress together with me!