资讯专栏INFORMATION COLUMN

JavaScript DOM2和DOM3——“DOM的变化”的注意要点

骞讳护 / 1916人阅读

摘要:和级分为许多模块,分别描述了的某个非常具体的子集。这些模块主要有核心视图事件样式遍历和范围以及。另外还有方法和方法框架的变化框架和内嵌框架分别用和表示,它们在级中都有一个新属性这个属性包含一个指针,指向表示框架内容的文档对象。

DOM2和DOM3级分为许多模块,分别描述了DOM的某个非常具体的子集。这些模块主要有核心(Core)、视图(Views)、事件(Events)、样式(Style)、遍历和范围(Traversal and Range)以及HTML。

另外,DOM2和3级的目的在于扩展DOM API,由于DOM2级视图和DOM2级HTML两个模块很小,因此我们将他们与“DOM2级核心”放在一起。

针对XML命名空间的变化

有了XML命名空间,不同XML文档的元素就可以混合在一起;从技术上说,HTML不支持XML混合命名空间,但XHTML支持XML命名空间。

命名空间要使用xmlns特性来指定,都应该包含在html元素中如:



    
    Document


    hello world


要想明确地为XML命名空间创建前缀,可以使用xmlns后跟冒号(xmlns:),再跟前缀如:



    
    Document


    hello world


为了避免不同语言间的冲突,也许要使用命名空间来限定特性,如:



    
    Document


    hello world


如混合了XHTML和SVG语言的文档:



    
    Document


    
        
    


多语言的文档中,调用方法操作文档节点的情况下,难免会存在元素的命名空间从属的问题。“DOM2级核心”通过为大多数DOM1级方法提供特定于命名空间的版本解决了这个问题。

Node类型的变化

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

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

namespaceURI:命名空间URI或者null;

prefix:命名空间前缀或null;

当节点使用了命名空间前缀时,其nodeName为prefix+“:”+localName



    
    Document


    
        
    


对于html元素来说,它的localName和tagName是“html”,namespaceURI是“http://www.w3.org/1999/xhtml”,而prefix是null。

对于svg元素来说,它的localName是“svg”,tagName是“s:svg”,namespaceURI是“http://www.w3.org/2000/svg”,而prefix是“s”。

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

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

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

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

Document类型的变化

主要有:

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

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

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

Element类型的变化

主要有:

getAttributeNS(namespaceURI,localName);

getAttributeNodeNS(namespaceURI,localName);

getElementsByTagNameNS(namespaceURI,tagName);

hasAttributeNS(namespaceURI,localName);

removeAttributeNS(namespaceURI,localName);

setAttributeNS(namespaceURI,qualifiedName,value);

setAttributeNodeNS(attNode);

NamedNodeMap类型的变化

主要有:

getNamedItemNS(namespaceURI,localName);

removeNamedItemNS(namespaceURI,localName);

setNamedItemNS(node);

其他方面的变化 DocumentType类型的变化

DocumentType类型新增了3个属性:publicId、systemId、internalSubset,以下面的HTML文档类型声明为例:



console.log(document.doctype.publicId); //-//w3c//DTD HTML 4.01//EN 
console.log(document.doctype.systemId); //http://www.w3.org/TR/html4/strict.dtd 
Document类型的变化

新增importNode(),用途是从一个文档中取得一个节点,然后将其导入到另一个文档。接受两个参数:要复制的节点和一个表示是否复制子节点的布尔值;

DOM2级视图

另外,“DOM2级视图”模块添加了一个名为defaultView的属性,其中保存着一个指针,指向拥有给定文档的窗口;IE不支持此属性,但有一个parentWindow属性。

console.log(document.defaultView); //Window

或者:

console.log(document.defaultView || document.parentWindow); //Window
DOM2级核心

此外,“DOM2级核心”还为document.implementation对象规定了两个新方法:createDocumentType()createDocument();前者用于创建一个新的DocumentType节点,接收三个参数:文档类型名称、publicId、systemId如:

var doctype = document.implementation.createDocumentType("html","-//w3c//DTD HTML 4.01//EN","http://www.w3.org/TR/html4/strict.dtd");

后者则用来创建新文档,该方法接收3个参数:namespaceURI、标签名、文档类型;

结合前者,可以创建一个XHTML文档:

var doctype = document.implementation.createDocumentType("html","-//w3c//DTD HTML 4.01//EN","http://www.w3.org/TR/html4/strict.dtd");
var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml","html",doctype);
DOM2级HTML

createHTMLDocument()方法接收一个参数,即title元素的字符串;用来创建一个完整的HTML文档;

Node类型的变化

isSupported()方法,该方法与hasFeature()类似;建议最好还是使用能力检测;

isSameNode()isEqualNode()这两个方法都接收一个节点参数,并在传入节点与引用的节点相同或相等的时候返回true。

另外还有setUserData()方法和getUserData()方法;

框架的变化

框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示,它们在DOM2级中都有一个新属性contentDocument这个属性包含一个指针,指向表示框架内容的文档对象。该对象在IE8中无效,但有contentWindow属性,可以使用如下代码:

var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78335.html

相关文章

  • JavaScript DOM2DOM3——“遍历”注意要点

    摘要:级遍历和范围模块定义了两个用于辅助完成顺序遍历结构的类型和这两个类型能够基于给定的起点对结构执行深度优先的遍历操作。其中的属性,表示任何遍历方法在上一次遍历中返回的接待你。通过设置这个属性也可以修改遍历继续进行的节点。 DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker;这两个类型能够基于给定的起点对DOM结构执行深度...

    antz 评论0 收藏0
  • DOMJS高级程序设计笔记——DOM2DOM3

    摘要:对象包含下列属性返回整条规则对应的文本包括选择符和花括号返回当前规则的选择符一个对象返回规则中所有的样式当前规则所属的样式表表示规则类型的常量值。从文档中分离解除引用推荐在使用完范围后再执行上述两个步骤。 DOM1级主要定义了HTML和XML文档的底层结构,DOM2和DOM3则在DOM1的基础上引入了更多的交互功能,支持了更高级的XML特性。DOM2和DOM3分为许多模块(模块之间具...

    zzir 评论0 收藏0
  • JavaScript DOM2DOM3——“范围”注意要点

    摘要:级遍历和范围模块定义了范围接口。折叠范围方法折叠就是指范围中未选择文档的任何部分。表示折叠到范围的起点,参数表示折叠到范围的终点。常量指定比较当前范围的点和指定范围的点。下节再讨论及更早版本中的范围 DOM2级遍历和范围模块定义了范围接口。通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户是不可见的)。 DOM中的范围 DOM2级在Document类型中定义...

    happyhuangjinjin 评论0 收藏0
  • JavaScript DOM2DOM3——“样式”注意要点

    摘要:如计算的样式方法和属性前者是增强了,这个方法接收两个参数计算样式的元素以及一个伪元素字符串如。操作表样式类型表示的是样式表,包括元素包含的样式表和在元素中定义的样式表。 层次:访问style对象: style对象是CSSStyleDeclaration的实例; getComputedStyle方法也返回CSSStyleDeclaration的实例; 访问样式表: 元素包含的样式表...

    whjin 评论0 收藏0
  • JavaScript DOM2DOM3——“样式”注意要点

    摘要:如计算的样式方法和属性前者是增强了,这个方法接收两个参数计算样式的元素以及一个伪元素字符串如。操作表样式类型表示的是样式表,包括元素包含的样式表和在元素中定义的样式表。 层次:访问style对象: style对象是CSSStyleDeclaration的实例; getComputedStyle方法也返回CSSStyleDeclaration的实例; 访问样式表: 元素包含的样式表...

    Jason_Geng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<