如何通過JS通過XHTML中的某些命名空間中的ID獲取元素？

Question

我發現， document.getElementById看不到放置在某些命名空間中的這些元素的ID。 至少在FF30.0和IE11中（不了解其他瀏覽器）； 考慮以下JSP代碼段（強制使用Content-Type；可能也可以與meta http-equiv一起使用）：

HTML：

<!DOCTYPE html>
<%@ page language="java" contentType="application/xhtml+xml; charset=UTF-8" pageEncoding="UTF-8" %>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:t="urn:test">
<head>
    <meta charset="UTF-8"/>
    <title>Test</title>
    <style type="text/css">
@namespace "http://www.w3.org/1999/xhtml";
@namespace t "urn:test";
html {
    font-family: 'Open Sans', 'Calibri', 'Arial', sans-serif;
    font-size: 11px;
}
t|foo {
    display: inline-block;
    border: solid 1px #AAA;
    border-radius: 2px;
    background-color: #EEE;
    padding: 0px 3px;
}
</style>

JS：

function init() {
    var NS_TEST = 'urn:test';
    var NS_HTML = 'http://www.w3.org/1999/xhtml';
    var foo = document.getElementById('foo');
    console.log('foo!=null?' + (foo !== null));
    var foos = document.getElementsByTagNameNS(NS_TEST, 'foo');
    console.log('foos.length=' + foos.length);
    // assert foos.length == 1;
    foo = foos[0];
    console.log('foo.id                  : ' + foo.id);
    console.log('foo.getAttribute()      : ' + foo.getAttribute('id'));
    console.log('foo.getAttributeNS(TEST): ' + foo.getAttributeNS(NS_TEST, 'id'));
    console.log('foo.getAttributeNS(HTML): ' + foo.getAttributeNS(NS_HTML, 'id'));
}
window.onload = init;

HTML：

<body>
    <div>
        <t:foo id="foo">Foo indeed</t:foo>
    </div>
</body>
</html>

在上述兩種瀏覽器中， t:foo元素均根據CSS規則進行樣式設置，但請注意控制台輸出：

FF：

foo!=null?false
foos.length=1
foo.id                  : foo
foo.getAttribute()      : foo
foo.getAttributeNS(TEST): null
foo.getAttributeNS(HTML): null

IE：

foo!=null?false
foos.length=1
foo.id                  : undefined
foo.getAttribute()      : foo
foo.getAttributeNS(TEST): 
foo.getAttributeNS(HTML):

兩種瀏覽器都在foo != null上返回false ，但是使用document.getElementsByTagNameNS獲取元素實際上是在DOM中找到它，在兩種情況下foo.getAttribute('id')返回有效的id。 請注意，它在http://www.w3.org/1999/xhtml命名空間中不存在，但是您在html元素中指定了默認命名空間。 有誰知道如何獲取放置在某些名稱空間中的元素的定義ID的元素，如上例所示？ 或者，也許我需要添加一些額外的聲明（<？xml ...？>沒有幫助）。

Answer 1

好。 首先，Chrome對foo!=null?報告為“ true” foo!=null? 測試。 （其他結果在接下來的三個測試中與Firefox相同，在后兩個測試中與IE相同。）

DOM Level 3中的 getElementById（）規范說

返回具有具有給定值的ID屬性的Element。 如果不存在這樣的元素，則返回null。 如果多個元素具有具有該值的ID屬性，則返回的內容不確定。 DOM實現應使用屬性Attr.isId來確定屬性是否為ID類型。

注意：除非如此定義，否則名稱為“ ID”或“ id”的屬性不是ID類型。

因為沒有什么文檔定義中foo的元素urn:test命名為類型ID，即在這一點上與DOM Level 3的遵守將返回null瀏覽器。

另一方面， DOM4說

getElementById（elementId）方法必須以樹順序返回上下文對象的后代中的第一個元素，其ID為elementId，否則返回null。

並在ID上說

歷史上，元素可以具有多個標識符，例如通過使用HTML id屬性和DTD。 該規范使ID成為DOM的概念，並且每個元素僅允許一個ID屬性（由id屬性提供）。

和

A屬性是其本地名稱為A並且名稱空間和名稱空間前綴為null的屬性。

因此， 在這一點上符合DOM4的瀏覽器將返回foo元素。

id屬性位於DOM Level 3和DOM4中的null命名空間中，所有瀏覽器的行為均與此一致。

因此，您的元素和屬性都已經在正確的名稱空間中，只是getElementById不一定適用於自定義名稱空間中的元素。

據我所知，無法將urn:test命名空間中元素的id屬性定義為ID類型，以使getElementById與Firefox或IE中的元素匹配。

我建議您使用另一種方式在具有ID屬性和特定值的自定義名稱空間中查找元素。

例如， var foo = document.querySelector('[id=foo]'); 將與所有三個瀏覽器中的元素匹配。

如何通過JS通過XHTML中的某些命名空間中的ID獲取元素？

問題描述

1 個解決方案

解決方案1
1 已采納 2014-06-21 23:54:10

如何通過JS通過XHTML中的某些命名空間中的ID獲取元素？

問題描述

1 個解決方案

解決方案1 1 已采納 2014-06-21 23:54:10

解決方案1
1 已采納 2014-06-21 23:54:10