如何使用 Javascript 查找命名空间 HTML 元素

Question

我正在写一些学术性的东西，其中有命名空间的 HTML 元素，例如：

<ns:LinkList id="sitesuteis" cssClass="classone">
            <ns:LinkItem id="LI1" href="http://www.ibt.pt/" target="_blank">IBT</ns:LinkItem>
            <ns:LinkItem id="LI2" href="http://http://html5demos.com/t/" target="_blank">HTML5 Demos</ns:LinkItem>
            <ns:LinkItem id="LI3" href="http://diveintohtml5.ep.io/" target="_blank">Dive into HTML5</ns:LinkItem>
            <ns:LinkItem id="LI4" href="http://html5boilerplate.com/" target="_blank">HTML5 Boilerplate</ns:LinkItem>
        </ns:LinkList>

现在，在 JavaScript 中，我正在尝试：

var elements = document.getElementsByTagName('ns:LinkItem');
element = elements[0];
console.log(element.getAttribute('id'));
//I get a correct value in all browsers

获取我的 elements[0] 中的所有 ChildNode。它在所有浏览器中工作正常，除了 -IE lt 9-

我尝试过：

var children = element.getElementsByTagName('ns:LinkItem');
console.log(children.length);

和：

var children = Array();
for (i=0; i<element.childNodes.length; i++){
   alert(element.childNodes[i].nodeName);
   if (element.childNodes[i].nodeName=="NS:LINKITEM"){
      children.push(element.childNodes[i]);
   }
}
console.log(children.length);

在两个 console.logs 中，我在每个浏览器中都得到了正确的长度（4），除了 Internet Explorer 8 或更少，我得到 0。

根据@Shadow向导，在 Internet Explorer 8 及更低版本中，元素的 canHaveChildren 属性为 false，这意味着死胡同，浏览器根本不支持此标记的子节点，与 < 相同;br例如，/> 不能有子节点。我试过了，确实如此。如果我尝试：

element.parentNode  

在 Internet Explorer 8 或更低版本中，我会得到包含我的标记的 div，而在其他浏览器中，我会得到我的父级 。

我真的需要一个黑客来解决这个问题，但我似乎找不到。

Answer 1

在非 Internet Explorer 浏览器中，我建议使用 getElementsByTagNameNS 来获取特定命名空间中的元素。

在 Internet Explorer 中，您可以使用 XPath。

jQuery 还提供了一种使用命名空间的方法；它似乎包含在“jQuery XML 解析与命名空间”中。

Answer 2

我相信以下功能应该有效 - 我在之前的项目中使用过它，并且我相信它在 Internet Explorer 6、7 和 8 中有效地工作。我没有在 Internet Explorer 9 中测试的好方法，但是我猜它应该可以正常工作，如 Internet Explorer 9 支持 getElementsByTagNameNS。它非常简单，并且依赖于核心浏览器方法。

/**
 * Cross-browser implementation for namespaced tags
 * @param {DOM Node} n          Parent node
 * @param {String} tag          Tag name you're trying to retrieve
 * @param {String} [ns]         Namespace prefix
 */
getElementsByTagName = function(n, tag, ns) {
    // map the namespace prefix to the full namespace URIs
    var nsMap = {
        'svg': 'http://www.w3.org/2000/svg'
        // etc - whatever's relevant for your page
    };
    if (!ns) {
        // no namespace - use the standard method
        return n.getElementsByTagName(tag);
    }
    if (n.getElementsByTagNameNS && nsMap[ns]) {
        // function and namespace both exist
        return n.getElementsByTagNameNS(nsMap[ns], tag);
    }
    // no function, get with the colon tag name
    return n.getElementsByTagName(ns + ':' + tag);
};

// get a list of svg:circle elements
getElementsByTagName(document, 'circle', 'svg');

这里唯一的痛点是需要定义从命名空间前缀到完整命名空间 URI 的映射。如果你想让它成为一个更可移植的函数，你可以将 nsMap 作为函数参数，而不是在函数体中定义的东西；或者您可以在全局上下文中引用名称空间映射对象。

这是一个完全模块化的版本，其中 getElementsByTagName 的版本稍微严格一些：

var namespaces = (function() {
    var nsMap = {};

    /**
     * Add a new XML namespace with prefix
     * @param {String} prefix       Prefix for new namespace
     * @param {String} uri          Full URI of new namespace
     */
    function addNamespace(prefix, uri) {
        nsMap[prefix] = uri;
    }

    /**
     * Cross-browser implementation for namespaced tags
     * @param {DOM Node} [n]        Parent node
     * @param {String} tag          Tag name you're trying to retrieve
     * @param {String} [ns]         Namespace prefix
     */
    function getElementsByTagName(n, tag, ns) {
        return !ns ?
            n.getElementsByTagName(tag) :
            (n.getElementsByTagNameNS && nsMap[ns]) ?
                n.getElementsByTagNameNS(nsMap[ns], tag) :
                n.getElementsByTagName(ns + ':' + tag);
    }

    return {
        addNamespace: addNamespace,
        getElementsByTagName: getElementsByTagName
    };
}());

// set the svg namespace
namespaces.addNamespace('svg', 'http://www.w3.org/2000/svg');
// get a list of svg:circle elements
namespaces.getElementsByTagName(document, 'circle', 'svg');

Answer 3

在 Internet Explorer 8 及更低版本中，元素的 canHaveChildren 属性为 false 这意味着死胡同，浏览器根本不支持此标记具有子节点，同样的方式例如，
不能有子节点。

不过，此问题已在 Internet Explorer 9 中得到修复。

Answer 4

我从来没有遇到过这个问题，所以这只是一个建议或提示。

我发现 MSIE 命名空间“限制”的“getElementsByTagName（W3C DOM 核心方法）”。

我终于在“XPath中找到了要点JavaScript，第 3 部分”将确认 XPath 的使用，这将是重点：

默认情况下，Internet Explorer 的 XPath 引擎不支持
命名空间（与 DOM Level 3 XPath 实现相同）。
命名空间信息必须提前指定为属性
XML DOM 文档对象本身。考虑以下 XML 代码：

<书籍 xmlns:wrox="http://www.wrox.com/"
xmlns="http://www.amazon.com/">
    专业 JavaScript 

为了对此文档使用 XPath 查询，您首先需要
定义 wrox 和默认命名空间的命名空间信息。你
可以通过 setProperty() 方法执行此操作，传入
“SelectionNamespaces”和一个空格分隔的命名空间字符串
声明。示例：

xmldoc.setProperty("SelectionNamespaces",
    “xmlns:wrox='http://www.wrox.com/' xmlns='http://www.amazon.com/'”);变量书 =
xmldoc.documentElement.selectSingleNode("wrox:book");

请注意，命名空间声明的格式与它们相同。
出现在 XML 中。不幸的是，没有自动提取的方法
文档中用于 XPath 的命名空间信息
查询。结论

Internet Explorer 确实有 XPath 支持，但它附带了几个
注意事项。首先，XPath 查询仅适用于 XML 文档，不适用于
在 HTML 文档上，因此不能在文档上使用来帮助查找
页面上的元素。二、XPath实现非常基础
并且仅允许基本返回类型（节点和 NodeSet 对象）。仍然，
如果您正在处理 XML 数据，XPath 仍然是一种快速且方便的选择
无需手动遍历 DOM 即可查找特定元素的方法。

Answer 5

这是一个 hack，但它可能足够强大以满足您的需要：

function getElementsByTagName(parent, tagName)
{
    if(typeof parent.canHaveChildren === 'undefined' || parent.canHaveChildren)
    {
        return parent.getElementsByTagName(tagName);
    }

    var elements = [];
    var cursor = parent;
    while(cursor.nextSibling && cursor.nextSibling.tagName !== ('/' + parent.tagName))
    {
        if(cursor.tagName === tagName.toUpperCase())
        {
            elements.push(cursor);
        }
        cursor = cursor.nextSibling;
    }
    return elements;
}

function getText(parent)
{
    return parent.innerHTML || parent.nextSibling.data;
}

例如：

var element = document.getElementById('sitesuteis');
var children = getElementsByTagName(element, 'ns:LinkItem');
console.log(children.length);

for(var i = 0; i < children.length; i++)
{
    console.log([getText(children[i]), children[i].getAttribute('href')]);
}