程序员经验分享-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元素？ 的相关文章

  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标

  • 如何使用 JavaScript 创建链接？

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使

  • 在 contenteditable div 中选择范围

    我有一个contenteditablediv 和其中的一些段落 这是我的代码 div style border solid 1px black width 300px height 300px div Hello world div div

  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga

  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的

  • 如何针对 Node.js 中发生的每个错误发送电子邮件？

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no

  • React-Redux：state.setIn() 和 state.set() 有什么区别？

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo

  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端？

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在

  • 如何纠正流警告：解构（缺少注释）

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码

  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre

  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o

  • 在 HTML5 画布中，如何用我选择的背景遮盖图像？

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect

  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr

  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo

  • Javascript 假值（null、未定义、false、空字符串：“”或 '' 和 0）和比较（==）运算符 [重复]

    这个问题在这里已经有答案了 当我使用任何一个值时 null undefined false 0 in a if陈述 它总是被评估为谬误 false 另外 这些值的否定 null undefined false 0 in a if语句总是被评

  • 日期出现奇怪的错误，“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2

  • Vue 和 Vuex：处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个

  • 在 JavaScript 循环之外声明变量可以提高速度和内存？

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var

  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0

  • Vue.js[vuex] 如何从突变中调度？

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

热门标签