程序员经验分享-hwhale

如何通过JS获取XHTML中某个命名空间中的Id元素？

2024-03-14

我发现document.getElementById没有看到这些元素的 id，它们被放置在某个命名空间中。至少在FF30.0和IE11中是这样（不知道其他浏览器是否如此）；考虑这个 JSP 片段（强制 Content-Type；可能它也适用于元 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):

两个浏览器都返回false on foo != null，但获取元素document.getElementsByTagNameNS实际上在 DOM 中找到了它并且在这两种情况下foo.getAttribute('id')返回有效的 ID。请注意，它不存在于http://www.w3.org/1999/xhtml命名空间 你的默认命名空间是在html元素。有谁知道如何为放置在某些名称空间中的元素（如上例所示）获取具有已定义 id 的元素？或者也许我需要添加一些额外的声明（ 没有帮助）。


好的。首先，Chrome 报告“真实”foo!=null?测试。 （其他结果在接下来的三个测试中与 Firefox 相同，在后两个测试中与 IE 相同。）

getElementById() 的规范DOM 级别 3 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-getElBId says

返回具有给定值的 ID 属性的元素。如果不存在这样的元素，则返回 null。如果多个元素具有具有该值的 ID 属性，则返回的内容是未定义的。 DOM 实现应使用属性 Attr.isId 来确定属性是否属于 ID 类型。

注意：名称为“ID”或“id”的属性不是 ID 类型，除非如此定义。

由于您的文档中没有任何内容可以定义foo中的元素urn:test名称空间为 ID 类型，符合 DOM Level 3 的浏览器在这一点上将返回 null。

DOM4 http://www.w3.org/TR/2014/CR-dom-20140508/#dom-nonelementparentnode-getelementbyid，另一方面，说

getElementById(elementId) 方法必须返回上下文对象的后代中按树顺序排列的第一个元素，其 ID 为 elementId，否则如果不存在这样的元素，则返回 null。

身份证上写着 http://www.w3.org/TR/2014/CR-dom-20140508/#concept-id

从历史上看，元素可以有多个标识符，例如通过使用 HTML id 属性和 DTD。该规范使 ID 成为 DOM 的一个概念，并且仅允许每个元素有一个，由 id 属性给出。

and http://www.w3.org/TR/2014/CR-dom-20140508/#concept-named-attribute

A属性是本地名称为A且命名空间和命名空间前缀为空的属性。

所以符合 DOM4 的浏览器在这一点上将返回 foo 元素。

id 属性位于 DOM Level 3 和 DOM4 中的 null 命名空间中，所有浏览器的行为都遵循这一点。

因此，您的元素和属性都已经位于正确的命名空间中，只是 getElementById 不一定适用于自定义命名空间中的元素。

据我所知，元素中的 id 属性不可能urn:test命名空间可以定义为 ID 类型，这样 getElementById 将匹配 Firefox 或 IE 中的元素。

我建议您使用不同的方式在自定义命名空间中查找具有特定值的 id 属性的元素。

例如，var foo = document.querySelector('[id=foo]');将匹配所有三个浏览器中的元素。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

xhtml

xmlnamespaces

如何通过JS获取XHTML中某个命名空间中的Id元素？ 的相关文章

  • 在 ExpressJS 中通过管道传送远程文件

    我想读取远程图像并显示它 我可以保存文件 但无法正确显示代码 理想情况下 我只想直接传递文件而不进行处理 不确定是否需要 tmp 文件步骤 此代码不显示任何内容 没有错误 我也尝试了 res pipe response var url ht

  • 如何检索 jquery $.ajax 对象的responseJSON属性[重复]

    这个问题在这里已经有答案了 我有这个 JavaScript ajax ajax type GET url DBConnect php data dataType json success function data error functi

  • 将数组中的所有值作为参数传递给函数

    我有一个值数组 a b c d 我需要将它们作为参数传递给函数 window myFunction a b c d 如果我可以将数组 对象传递到函数中 那么这会更容易 但这些函数是由其他人编写的或已经存在 我无法更改它们 它们需要作为单独的

  • 从字符串中删除货币符号并使用 Javascript 中的单行转换为数字

    我下面有一个字符串 它是以英镑为单位的价格 我想删除货币符号 然后将其转换为我可以用来与另一个值进行比较的数字 价格 例如 X gt Y 14 50 我之前已将字符串转换为用于货币的数字 var priceNum parseFloat pr

  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗

  • 如何使用 JqGrid 子网格进行内联编辑？

    我知道如何使用主网格进行内联编辑 但是有没有办法对子网格进行内联编辑 这是我的 JS 文件 function var lastsel list jqGrid url example php postData q 1 datatype jso

  • javascript获取上周的第一天和最后一天[重复]

    这个问题在这里已经有答案了 我想用 javascript 获取上周的第一天 星期一 和最后一天 星期日 我已经检查过其他主题 但它不起作用 我还需要处理前一周是否是两个不同的月份 我正在使用此代码 但最后一个星期日是 06 03 2014

  • 了解执行模型和事件循环

    我读过很多关于JavaScript单线程执行模型 事件循环和事件队列的文章 但有一件事尚不清楚 我创建了一个小提琴来说明我的问题 http jsfiddle net yzpmf67f http jsfiddle net yzpmf67f

  • KineticJS - 将舞台缩放到视口

    我正在努力将默认分辨率设置为 1366x756 我会根据视口来放大和缩小它 类似于此处显示的示例 http blogs msdn com b davrous archive 2012 04 06 modernizing your html5

  • 向 FTP 服务器执行跨域 XMLHTTPREQUEST 的语法是什么？

    我有一个 webDav CORS 插件 可以使用它在 webDav 服务器上 POST PUT GET REMOVE ALLDOCS 文件 我现在想对 FTP 做同样的事情 但我正在努力获取xmlhttprequest 工作语法 我只是收到

  • Backbone-relational 无法实例化两个 RelationalModel 对象

    我正在尝试实现 BackboneRelational 并不断获得 无法实例化多个 Backbone RelationalModel 每种类型都有相同的 ID class App Models User extends Backbone Re

  • 内联 svg 不显示在 xhtml 中

    我创建了一个带有内联 SVG 的 XHTML 文件 当测试为 XHTML 时 它不会显示 但当测试为 HTML 时 它会显示 我已经搜索过互联网并相信我已经指定了正确的名称空间等 但是 我很困惑为什么它没有显示 请帮助我理解我做错了什么 注

  • 使用JS将图像的特定背景颜色设置为透明

    我正在使用以下代码来修改图像的透明度 然而 我想做的只是修改图像的背景颜色并将其 alpha 通道设置为 0 而不是整个图像 以下代码将整个图像的 Alpha 透明度设置为 0 var ctx this data getContext 2d

  • 在 Chrome 中检索浏览器语言

    我一直在尝试让 momentjs 正确检测浏览器语言并本地化时间显示 按照使用 Moment js 进行区域设置检测 https stackoverflow com questions 25725882 locale detection w

  • RxJS - 从可观察对象中获取最后 n 个元素

    我想从可观察对象中获取最后 3 个元素 假设我的时间线是这样的 a b c d e f g h i j gt where a b c d e f g h i j are emitted values 每当发出新值时 我想立即获取它 因此它可

  • Firefox OS 后台服务

    我想构建一个应用程序 用户可以通过它输入一些设置 并且应用程序将启动后台服务来根据这些设置执行一些任务 我只想在模拟器中运行应用程序和后台服务 我知道它需要 认证 模式才能运行后台服务 但我现在不考虑在 Firefox Marketplac

  • 当脚本是从加载的脚本动态创建的 DOM 节点时，脚本 onload 和 window.onload 的顺序是否定义良好？

    File loader js function main if typeof window undefined var script window document createElement script script src https

  • 如何在流程图中间隔刻度线？

    我下面有一个流程图 您将看到标签被压缩 我想使刻度之间的宽度确保显示所有标签 标记如下 div div class graph info a href span span a a href class active span span a

  • 如何获取 svgElement 的比例？

    我正在研究 svg div style width 300 height 300 div

  • 如何在odoo中重写js函数

    我想加载 shop checkout url 函数是 odoo define change info order website sale change info order function require use strict oe w

随机推荐

热门标签