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

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元素中如:

<html xmlns="http://www.w3.org/1999.xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

要想明确地为XML定名空间建立前缀,能够运用xmlns后跟冒号(xmlns:),再跟前缀如:

<xhtml:html xmlns:xhtml="http://www.w3.org/1999.xhtml">
<xhtml:head>
    <xhtml:meta charset="UTF-8">
    <xhtml:title>Document</xhtml:title>
</xhtml:head>
<xhtml:body>
    hello world
</xhtml:body>
</xhtml:html>

为了防止差别言语间的争执,或许要运用定名空间来限制特征,如:

<xhtml:html xmlns:xhtml="http://www.w3.org/1999.xhtml">
<xhtml:head>
    <xhtml:meta charset="UTF-8">
    <xhtml:title>Document</xhtml:title>
</xhtml:head>
<xhtml:body xhtml:class="home">
    hello world
</xhtml:body>
</xhtml:html>

如夹杂了XHTML和SVG言语的文档:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" ......>
        <rect x="0" y="0" ...... />
    </svg>
</body>
</html>

多言语的文档中,挪用要领操纵文档节点的情况下,难免会存在元素的定名空间隶属的题目。“DOM2级中心”通过为大多数DOM1级要领供应特定于定名空间的版本处理了这个题目。

Node范例的变化

在DOM2级中,Node范例包括以下特定于定名空间的属性:

  • localName:不带定名空间前缀的节点称号;

  • namespaceURI:定名空间URI或许null;

  • prefix:定名空间前缀或null;

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="width:100%; height:100%">
        <s:rect x="0" y="0" width="100" height="100" style="fill:red"/>
    </s:svg>
</body>
</html>

关于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文档范例声明为例:

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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;
    原文作者:JS菌
    原文地址: https://segmentfault.com/a/1190000004183331
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞