zoukankan      html  css  js  c++  java
  • JavaScript高级程序设计30.pdf

    第12章 DOM2和DOM3

    DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3则在这个结构的基础上引入了更多的交互能力,也支持更高级的XML特性

     DOM2和DOM3级分为许多模块,分别描述了DOM的某个非常具体的子集

    DOM2级核心(DOM Level 2 Core):在1级核心基础上构建,为节点添加更多方法和属性

    DOM2级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图

    DOM2级事件(DOM Level 2 Events):说明了如何使用事件与DOM文档交互

    DOM2级样式(DOM Level 2 Style):定义了如何以编程方式来访问和改变CSS样式信息

    DOM2级遍历和范围(DOM Level 2 Traversal and Range):引入遍历DOM文档和选择其特定部分新接口

    检测浏览器是否支持这些DOM模块

    var supportsDOM2Core=document.implementation.hasFeature("Core","2.0");

    var supportsDOM3Core=document.implementation.hasFeature("Core","3.0");

    var supportsDOM2HTML=document.implementation.hasFeature("HTML","2.0");

    var supportsDOM2Views=document.implementation.hasFeature("Views","2.0");

    var supportsDOM2XML=document.implementation.hasFeature("XML","2.0");

    针对XML命名空间的变化

    有了XML命名空间,不同XML文档的元素可以混合在一起,共同构成格式良好的文档,HTML不支持XML命名空间,但XHTML支持XML命名空间,本节给出的都是XHTML的示例

    命名空间要使用xmlns特性来指定,XHTML的命名空间是http://www.w3.org/1999/xhtml,

    <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

        <title>Example XHTML page</title>

      </head>

      <body>

        Hello world!

      </body>

    </html>

    对于这个例子,所有元素默认都被视为XHTML命名空间中的元素,想要明确地为XML命名空间创建前缀,可以使用xmlns后跟冒号,再后跟前缀

    <xhtml:html xmlns="http://www.w3.org/1999/xhtml">

      <xhtml:head>

        <xhtml:title>Example XHTML page</xhtml:title>

      </xhtml:head>

      <xhtml:body>

        Hello world!

      </xhtml:body>

    </xhtml:html>

    这里为XHTML的命名空间定义了一个名为xhtml的前缀,并要求所有XHTML元素都以该前缀开头,有时候为了避免不同语言间的冲突,也需要命名空间来限定特性,在只基于一种语言编写XML文档的情况下,命名空间实际上没什么用,在混合使用两种语言情况下,命名空间用处非常大

    <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

        <title>Example XHTML page</title>

      </head>

      <body>

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="100%;height:100%">

          <rect x="0" y="0" width="100" height="100" style="fill:red"/>

        </svg>

      </body>

    </html>

    在这个例子中,通过设置命名空间,将<svg>标识为了与包含文档无关的元素,此时<svg>元素的所有子元素都被认为属于http://www.w3.org/2000/svg命名空间,即使从技术上说是一个XHTML文档,但其中的SVG代码仍然是有效的

    对于类似的文档,最有意思的事发生在调用方法操作文档节点的情况下,例如,在创建一个元素时,这个元素属于哪个命名空间呢?“DOM2级核心”通过为大多数DOM1级方法提供特定于命名空间的版本解决了这个问题

    Node类型的变化

    在DOM2级中,Node类型包含下列特定与命名空间的属性

    localName:不带命名空间前缀的节点名称;

    namespaceURI:命名空间URI或者(在未指定情况下是)null;

    prefix:命名空间前缀或者(在未指定情况下是)null。

    当节点使用了命名空间前缀时,其nodeName等于prefix+":"+localName

    DOM3级在此基础上更进一步,引入了与命名空间有关的方法

    isDefaultNamespace(namespaceURI):在指定的namespaceURI是当前节点的默认命名空间的情况下返回true

    lookupNamespaceURI(prefix):返回给定prefix的命名空间

    lookupPrefix(namespaceURI):返回给定namespaceURI的前缀

    Document类型的变化

    DOM2级中的Document类型也发生了变化,包含下列与命名空间有关的方法

    createElementNS(namespaceURI,tagName):使用给定的tagName创建一个属于命名空间namespaceURI的新元素

    createAttributeNS(namespaceURI,attributeName):使用给定的attributeName创建一个属于命名空间namespaceURI的新特性

    getElementsByTagNameNS(namespaceURI,tagName):返回属于命名空间namespaceURI的tagName元素的Nodelist

    使用这些方法时需要传入表示命名空间的URI(而不是命名空间前缀)

    //创建一个新的SVG元素

    var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");

    只有在文档中存在两个或多个命名空间时,这些与命名空间有关的方法才是必需的

    Element类型的变化

    “DOM2级核心”中有关Element的变化,主要涉及操作特性,新增的方法如下

    getAttributeNS(namespaceURI,localName):取得属于命名空间namespaceURI且名为localName的特性

    getAttributeNodeNS(namespaceURI,localName):取得属于命名空间namespaceURI且名为localName的特性节点

    getElementsByTagNameNS(namespaceURI,tagName):返回属于命名空间namespaceURI的tagName元素的NodeList

    hasAttributeNS(namespaceURI,localName):确定当前元素是否有一个名为localName的特性,而且该特性的命名空间是namespaceURI,注意“DOM2级核心”也增加了一个hasAttribute()方法,用于不考虑命名空间的情况

    removeAttributeNS(namespaceURI,localName):删除属于命名空间namespaceURI且名为localName的特性

    setAttributeNS(namespaceURI,qualifiedName,value):设置属于命名空间namespaceURI且名为localName的特性的值为value

    setAttributeNodeNS(attNode):设置属于命名空间namespaceURI的特性节点,除了第一个参数,这些方法与DOM1级中相关方法作用相同;第一个参数始终是一个命名空间

    NamedNodeMap类型的变化

    getNamedItemNS(namespaceURI,localName):取得属于命名空间namespaceURI且名为localName的项

    removeNamedItemNS(namespaceURI,localName):移除属于命名空间namespaceURI且名为localName的项

    setNamedItemNS(node):添加node,这个节点已经事先指定了命名空间信息

  • 相关阅读:
    JQuery
    Ubuntu18.04
    Ubuntu18.04
    Ubuntu18.04
    Ubuntu18.04
    Cordova
    Android
    Android
    Delphi
    postgresql之 drop & delete & truncate
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3760385.html
Copyright © 2011-2022 走看看