全栈JavaScript之路( 二十三 )DOM2、DOM3, 涉及XML命名空间的扩展(一)

<!DOCTYPE html>
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
    <title>Example XHTML page</title>
</head>
<body>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:100%; viewBox:0 10 10 10">
    <s:rect x="0" y="0" width="100" height="100" style="fill:red"/>
</s:svg>
</body>
</xhtml:html>

以上例子展示,通过 xmlns 来指定命名空间,通过 xmlns:prefix 来指定 前缀,一但指定的前缀,就得在当前元素,以及子元素使用。

有时候为了避免不同语言间的冲突,也需要使用命名空间来限定特性,如下面的例子所示。

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:head>
<xhtml:title>Example XHTML page</xhtml:title>
</xhtml:head>
<xhtml:body xhtml:class="home">
Hello world!
</xhtml:body>
</xhtml:html>

(一)Node类型的变化:

在DOM2中 Node类型包含了下表特定于命名空间的特性

  1. localName
  2. prefix
  3. namespaceURL

在DOM3中,更进一步增加了下列属性和方法

  1. isDefaultNamaspace(namespaceURL)
  2. lookupNamespaceURL(prefix)
  3. lookupPrefix(namespaceURL)

(二)Document 类型的变化

createElementNS(namespaceURL,tagName)

createAttributeNS(namespaceURL,tagName)

getElementByTagName(namespaceURL,tagName)

只有文档中存在两个或多个命名空间的时候,这些跟命名空间相关的方法才是必须的。

(三)Element 类型的变化

DOM core 中 ,涉及命名空间的变化 ,主要是操作特性的方法。

getAttributeNS(namespaceURL,localName)

getAttributeNodeNS(namespaceURL,localName)

getElementByTagName(namespaceURL,tagName)

hasAttribute(namespaceURL,tagName)  //dom 也同时增加了 hasAttribute()

removeAttributeNS(namespaceURL,localName)

setAttributeNS(namespaceURL,localName,value)

setAttributeNodeNS(namespaceURL,attNode)

除了第一个参数之外,这些方法与DOM1 级中相关方法的作用相同;第一个参数始终都是一个命名空间URI。

(四) NamedNodeMap 类型的变化

getNamedItemNS(namespaceURL,localName)

setNamedItemNS(node)

removeNamedItemNS(namespaceURL,localName)

由于一般都是通过元素访问特性,所以这些方法很少使用。

全栈JavaScript之路( 二十三 )DOM2、DOM3, 涉及XML命名空间的扩展(一),布布扣,bubuko.com

时间: 2024-12-26 06:33:29

全栈JavaScript之路( 二十三 )DOM2、DOM3, 涉及XML命名空间的扩展(一)的相关文章

全栈JavaScript之路(十三)了解 ElementTraversal 规范

支持Element Traversal 规范的浏览器有IE 9+.Firefox 3.5+.Safari 4+.Chrome 和Opera 10+. 对于元素间的空格,在IE9之前.都不会返回文档节点.其他的全部浏览器都会返回文档节点. 为了兼容浏览器这间的差异,又不更改已有的DOM 标准,所以有了 Element Traversal 规范. 这个规范为 元素添加了 5 个 属性 childElementCount firstElementChild lastElementChild previ

全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展

(一)DocumentType 类型的变化新增三个属性: publicId,systemId,internalSubset(内部子集) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [<!ELEMENT name (#PCDATA)>] > 通过, document.doc

全栈JavaScript之路( 二十五 )访问元素的样式

任何支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之对应. 这个style 对象是 CSSStyleDeclaration类型的实例,包含着html style特性的所有样式信息.但不包含 外部样式或者 内嵌样式层叠而来的样式. 在style特性中,提定的任何css属性,都将表现为这个style 对象的属性.对于使用短划线的的属性名,必须转化为驼峰大小写形式,多数情况下都可以这样转换. 也有例外, float 是javascript 关键字,不能直接转换,

全栈JavaScript之路( 二十 )HTML5 插入 html标记 ( 二 )insertAdjacentHTML

insertAdjacentHTML(),  这个方法也是在IE中最早出现的,现在已纳入html5规范,它接受两个参数,一个是下列的标记之一,一个是要写入的 html 代码文本. beforebegin , (英文为开始之前的意思)在当前元素之前插入一个新的紧邻的同辈元素 afterbegin,(英文为开始之后的意思)在当前元素之下插入一个子元素,或者是在当前元素的第一个子元素之前插入一个新的子元素. beforeend,(英文为结束之前的意思)在当前元素之后插入一个新的子元素,或者在当前元素最

全栈JavaScript之路( 二十一)HTML5 scrollIntoView方法

HTML5中,scrollIntoView()可以在所有HTML 元素上调用 通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中. 如果给这个方法传入true 作为参数,或者不传入任何参数,那么窗口滚动之后会让调用元素的顶部与视窗顶部尽可能平齐. 如果传入false 作为参数,调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视窗顶部平齐.)不过顶部不一定平齐. 当页面发生变化时,一般会用这个方法来吸引用户的注意力. 实际上,为某个元素设置焦点也会导致浏览器滚动并显示出获

全栈JavaScript之路( 二十二 )IE 专有扩展——文档模式

ie8 引入了一个新的概念,"文档模式" ,页面的文档模式决定了,可以使用什么功能.也就是说,"文档模式",决定你了你可以使用哪个级别的css,在javascript可以使用哪些API, 以及如何对待文档类型(doctype). 两种方式修改: 通过 meta 标签修改,<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 在服务器端修改, res.

全栈JavaScript之路(十二)了解 Selector API

2008 年之前,浏览器中几乎所有的DOM扩展都是专有的.此后,W3C 着手将一些已经成为事实标准的专有扩展标准化并写入规范当中. Selector API  level 1  的核心是两个方法: querySelector(), querySelectorAll() .在兼容浏览器中可以通过Docuemnt 类型节点,或者Element类型节点调用. 目前已完全支持Selectors API Level 1的浏览器有IE 8+.Firefox 3.5+.Safari 3.1+.Chrome 和

全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

在需要给文档插入大量的html 标记下,通过DOM操作很麻烦,你不仅要创建一系列的节点,而且还要小心地按照顺序把它们接结起来. 利用html 标签 插入技术,可以直接插入html代码字符串,简单.高效! 以下插入html标签相关的扩展已经纳入html5 规范. 1.innerHTML 属性 2.outerHTML 属性 3.insertAdjacentHTML 方法 innerHTML 属性 有两种模式,写模式与读模式. 在读模式下,返回的是html 代码字符串. 例如: <div id="

全栈JavaScript之路(十五)HTML5 focus 扩展 (焦点扩展)

HTML5 添加了辅助管理 focus 的功能,  文档获得焦点的途径有; 页面加载,用户输入(一般是按tab键),和 在代码中调用focus()函数. HTML5新增的辅助管理焦点的属性与方法有: document.activeElement 属性, 这个属性指向获得焦点的元素,文档加载期间 值为null, 文档加载完成,保存得是  document.body 的引用. document.hasFocus()方法, 确定文档是否获得了焦点. 查询文档获知哪个元素获得了焦点,以及确定文档是否获得