javascript - How to get an element by Id placed in some namespace in XHTML via JS? -
javascript - How to get an element by Id placed in some namespace in XHTML via JS? -
i found out, document.getelementbyid doesn't see ids of these elements, placed in namespace. @ to the lowest degree in ff30.0 , ie11 (don't know other browsers); consider jsp snippet (to forcefulness content-type; work meta http-equiv also):
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> in both mentioned browsers t:foo element gets styled according css rules, note console output:
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): both browsers homecoming false on foo != null, getting element document.getelementsbytagnamens finds in dom , in both cases foo.getattribute('id') returns valid id. note, not exists in http://www.w3.org/1999/xhtml namespace thou default namespace specified in html element. have thought how elements defined id elements placed in namespace in illustration above? or maybe need add together declaration (<?xml ...?> didn't help).
ok. first of chrome reports "true" foo!=null? test. (other results same firefox next 3 tests , same ie lastly two.)
the spec getelementbyid() in dom level 3 says
returns element has id attribute given value. if no such element exists, returns null. if more 1 element has id attribute value, returned undefined. dom implementation expected utilize attribute attr.isid determine if attribute of type id.
note: attributes name "id" or "id" not of type id unless defined.
since there nil in document define foo element in urn:test namespace beingness of type id, browsers comply dom level 3 on point homecoming null.
dom4, on other hand, says
the getelementbyid(elementid) method must homecoming first element, in tree order, within context object's descendants, id elementid, , null if there no such element otherwise.
and on id says
historically elements have multiple identifiers e.g. using html id attribute , dtd. specification makes id concept of dom , allows 1 per element, given id attribute.
and
an attribute attribute local name , namespace , namespace prefix null.
so browsers comply in dom4 on point homecoming foo element.
the id attribute in null namespace in dom level 3 , dom4, , browser behave in accordance that.
so elements , attributes in right namespaces, it's getelementbyid doesn't apply elements in custom namespaces.
as far can tell, there no way id attribute on elements in urn:test namespace can defined beingness of type id such getelementbyid match element in firefox or ie.
i suggest utilize different way of finding elements in custom namespaces have id attribute specific value.
for example, var foo = document.queryselector('[id=foo]'); match element in 3 browsers.
javascript xhtml xml-namespaces
Comments
Post a Comment