JavaScript基礎學習-DOM2+DOM3

阿新 • • 發佈：2022-04-21

XML名稱空間

當文件中包含兩個或者兩個以上名稱空間時，需要制定名稱空間。DOM2，DOM3新增了一些關於名稱空間的特性。

1.Node變化

在DOM2 中，Node 型別包含以下特定於名稱空間的屬性：

localName，不包含名稱空間字首的節點名；
namespaceURI，節點的名稱空間URL，如果未指定則為null；
prefix，名稱空間字首，如果未指定則為null。
在節點使用名稱空間字首的情況下，nodeName 等於prefix + ":" + localName。比如下面這個
例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" style="width:100%; height:100%">
<s:rect x="0" y="0" width="100" height="100" style="fill:red" />
</s:svg>
</body>
</html>

對於元素的localName 和tagName 都是"html"，namespaceURL 是"http://www.w3.org/1999/xhtml"，而prefix 是null。
對於<s:svg>元素，localName 是"svg"，tagName 是"s:svg"，namespaceURI 是"https://www.w3.org/2000/svg"，而prefix 是"s"。

2.Document 的變化

DOM2 在Document 型別上新增瞭如下名稱空間特定的方法：

createElementNS(namespaceURI, tagName)，以給定的標籤名tagName 建立指定名稱空間namespaceURI 的一個新元素；

createAttributeNS(namespaceURI, attributeName)，以給定的屬性名attributeName建立指定名稱空間namespaceURI 的一個新屬性；
getElementsByTagNameNS(namespaceURI, tagName)，返回指定名稱空間namespaceURI中所有標籤名為tagName 的元素的NodeList。

// 建立一個新SVG 元素
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// 建立一個任意名稱空間的新屬性
let att = document.createAttributeNS("http://www.somewhere.com", "random");
// 獲取所有XHTML 元素
let elems = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "*");

3.Element 的變化

DOM2 Core 對Element 型別的更新主要集中在對屬性的操作上。下面是新增的方法：

getAttributeNS(namespaceURI, localName)，取得指定名稱空間namespaceURI 中名為localName 的屬性；
getAttributeNodeNS(namespaceURI, localName)，取得指定名稱空間namespaceURI 中名為localName 的屬性節點；
getElementsByTagNameNS(namespaceURI, tagName)，取得指定名稱空間namespaceURI中標籤名為tagName 的元素的NodeList；
hasAttributeNS(namespaceURI, localName)，返回布林值，表示元素中是否有名稱空間namespaceURI 下名為localName 的屬性（注意，DOM2 Core 也新增不帶名稱空間的hasAttribute()方法）；
removeAttributeNS(namespaceURI, localName)，刪除指定名稱空間namespaceURI 中名為localName 的屬性；
setAttributeNS(namespaceURI, qualifiedName, value)，設定指定名稱空間namespaceURI中名為qualifiedName 的屬性為value；
setAttributeNodeNS(attNode)，為元素設定（新增）包含名稱空間資訊的屬性節點attNode。