JavaScript之Dom1|DOM2|DOM3之DOM1【节点层次】

长文慎读。

导航：

　　1.节点层次

　　2.Node类型

　　3.Document类型

　　4.Element类型

　　5.Text类型

　　6.Comment类型

　　7.CDATASection类型

　　8.DocumentType类型

　　9.DocumentFragment类型

　　10.Attr类型

　　11.HTMLCollection类型

　　

一、 DOM1

　　1.节点层次

　　　　　　DOM可以将任何HTML或者XML文档描绘成一个由多层节点构成的结构。

　　　　　　节点分为几种不同的类型，每种类型表示文档中不同的信息或标记。

　　　　　　每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。

　　　　　　节点之间的关系，构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。　　　　

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <div>text content</div>
    </body>
<html>

　　　　　　

　　　　　　文档节点是每个文档的根节点。上述demo中，文档节点只有一个子节点，即 <html>元素，成为文档元素。文档元素是文档的最外层元素，文档中其他所有元素都包含在文档元素中，每个文档只能有一个文档元素。在html中，文档元素始终都是<html>元素，xml中任何元素都可能成为文档元素。

　　　　　　

　　2.Node类型：

　　　　a.属性：nodeType；nodeName；nodeValue；childNodes(含NodeList对象：childNodes[i]；childNodes.item(j))；parentNode(指向父节点)；previousSibling;nextSibling；firstChild；lastChild；

　　　　注意：虽然所有节点类型都继承自Node，但并不是每种节点都有子节点。

　　

　　　　b.声明：仅IE浏览器，不支持Node类型。

　　　　c.JavaScript中的所有方法都继承Node类型，因此所有节点类型都共享着相同的基本属性和方法。

　　　　d.每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一。

　　　　   为了确保浏览器兼容，使用时，最好还是将nodeType属性与数值进行比较，而非nodeType常量属性名　

nodeType常量属性名 常量数值 节点类型
Node.ELEMENT_NODE 1 元素对象
Node.ATTRIBUTE_NODE 2 元素属性对象
Node.TEXT_NODE 3 文本对象
Node.CDATA_SECTION_NODE 4  
Node.ENTITY_REFERENCE_NODE 5  
Node.ENTITY_NODE 6  
Node.PROCESSING_NODE 7  
Node.COMMENT_NODE 8  
Node.DOCUMENT_NODE 9 document对象
Node.DOCUMENT_TYPE_NODE 10  文档声明对象
Node.DOCUMENT_FRAGMENT_NODE 11  
Node.NOTATION_NODE 12  

 

　　　　e. 操作节点

　　　　　　I.插入节点

　　　　　　　　append(Element ele);//用于向childnodes列表的末尾添加一个节点

　　　　　　　　appendChild(Node node);　//用于向childnodes列表的末尾添加一个节点

　　　　　　　　insertBefore(Node newNode,Node referNode);//两个参数：要插入的节点和作为参照的节点　　　　

//insertBefore():demo 1:插入后成为最后一个子节点
returnNode = someNode.insertBefore(newNode,null);
someNode.lastChild == newNode;//true

//insertBefore():demo 2:插入后成为第一个子节点
returnNode = someNode.insertBefore(newNode,someNode.firstChild);
someNode.firstChild == newNode;//true

//insertBefore():demo 3:插入到最后一个子节点前面
returnNode = someNode.insertBefore(newNode,someNode.lastChild);
someNode.childNodes[ someNode.childNodes.length - 2 ] == newNode;//true

　　　　　　II.替换节点　　

　　　　　　　　replaceChild(newNode,oldNode);

//替换第一个子节点
replaceChild(newNode,someNode.firstChild);

//替换第最后一个子节点
replaceChild(newNode,someNode.lastChild);

　　　　　　III.移除节点

　　　　　　　　removeChild(Node node);

//移除第一个子节点
removeChild(someNode.firstChild);

//移除第最后一个子节点
removeChild(someNode.lastChild);

　　　　　　IV.复制节点

　　　　　　　　cloneNode(bool is);　　//用于创建调用这个方法的节点的一个完全相同的副本；

　　　　　　　　　　　　　　　　　　　　//参数is：是否执行深复制：true:深复制，复制节点及其整个子节点树；false:浅复制，只复制节点本身

　　　　　　　　注意点：由于IE浏览器存在bug，即：会复制节点的事件处理程序，所以建议复制之前最好先移除事件处理程序。

　　　

　　3.Document类型

　　　　JavaScript中，通过Document类型表示文档。

　　　　在浏览器中,document对象时HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面。

　　　　而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

　　　　Document节点有如下特征：

　　　　　　a.nodeType:9

　　　　　　b.nodeName:"#document"

　　　　　　c.nodeValue:null

　　　　　　d.parentNode:null

　　　　　　e.ownerDocument:null

　　　　其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment

　　　　

　　　　3.1 文档的子节点与文档信息

　　　　　　<html>:（子节点）　　

　　　　　　　　　　document.documentElement 

　　　　　　　　　　document.childNode[0]

　　　　　　　　　　document.firstChild

　　　　　　<body>:（子节点）

　　　　　　　　　　document.body

　　　　　　<a>:(子节点,获取文档中所有含name属性的<a>元素)

　　　　　　　　　　HTMLCollection    document.anchors

　　　　　　<a>:(子节点、包含文档中所有带href特性的<a>元素)

　　　　　　　　　　HTMLCollection    document.links

　　　　　　<form>:(子节点、包含文档内所有的form元素)

　　　　　　　　　　HTMLCollection    document.forms/document.getElementsByTagName("form")

　　　　　　<img>:（子节点、包含文档内所有的<img>元素）

　　　　　　　　　　HTMLCollection    document.images/document.getElementsByTagName("imh")

　　　　　　<!DOCTYPE>:[子节点、由于兼容性原因、不推荐使用]

　　　　　　　　　　document.doctype　　　

　　　　　　　　　　注意：浏览器对doctype的支持差异比较大。

　　　　　　　　　　　　IE8以及之前版本：如果存在文档类型声明，会将其错误地解释为一个注释，并把它当做Comment节点，而document.doctype始终为null

　　　　　　　　　　　　IE9+、Firefox：如果存在文档类型声明，则将其作为文档的第一个子节点；document.doctype类型为DocumentType节点，且会出现在document.childNodes、document.firstChild中。

　　　　　　　　　　　　Safari、Chrome、Opera：如果存在文档类型声明，则将其解析，但不作为文档的子节点。document.doctype是一个DocumentType节点，但不会出现在document.childNodes中

　　　　　　title:（文档信息）

　　　　　　　　　　document.title

　　　　　　URL:(（文档信息）取得完整的URL)

　　　　　　　　　　document.URL(区分大小写)

　　　　　　domain:(（文档信息）取得域名,域名domain与URL相互关联)

　　　　　　　　　　document.domain　　　　　　

//鉴于安全性考虑，domain被限制性修改

//形如：当前页面URL：a.b.c.com
document.domain = "b.c.com";//ok
document.domain = "c.com";//ok

document.domain = "y.b.c.com";//no
document.domain = "x.c.com";//no
document.domain = "m.com";//no

　　　　　　

　　　　3.2 查找元素

　　　　　　HTMLElement        document.getElementById(id);

　　　　　　HTMLCollection     document.getElementsByName(name);

　　　　　　HTMLCollection     document.getElementsByTagName(tagName);

　　　　　　HTMLCollection     document.getElementsByClassName(className);

　　　　3.3 DOM一致性检测　　

　　　　　　由于DOM分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要了。document.implementation属性为此提供相应信息和功能的对象，与浏览器对DOM的实现直接对应。

　　　　　　　　document.implementation.hasFeature("fucntionModelName","versionNumber");　　

　　　　　　注意：要想让hasFeature()返回true很容易，但返回true有时候也不意味着实现与规范一致。所以在使用DOM的某些特殊功能时，最好除了检测hasFeature()外，还同时使用能力检测。

　　　　　　

document.implementation.hasFeature("Core","3.0");

//output:
true

 

 

　

　　　　3.4 文档写入

　　　　　　document.write();
　　　　　　document.writeln();
　　　　　　document.open();//打开网页文档输出流

　　　　　　document.close();//关闭网页文档输出流

　　　　　　注意：严格型XHTML文档不支持文档写入，且对application/xml+xhtml内容类型的页面，也同样无效。

　　4.Element类型

　　　　提供了对元素标签名、子节点及特性的访问。

　　　　Element节点具有以下特征。

　　　　　　a. nodeType:1

　　　　　　b. nodeName:元素标签名("DIV、BODY"...等)

　　　　　　c. nodeValue:null(Element类型的nodeValue始终为null)

　　　　　　d. parentNode：Document或者Element

　　　　　　e.（扩展属性）tagName：元素标签名("DIV、BODY"...等，与nodeName所获取的值相同，主要目的是：为了清晰起见)

　　　　

　　　　4.1 HTML元素（HTMLElement）

　　　　　　所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，而是通过它的子类型来表示。HTMLElement直接继承自Element，并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的标准特性：

　　　　　　a. id  元素在文档中的唯一标识符

　　　　　　b. title  有关元素的附加说明信息，一般通过工具提示条显示出来

　　　　　　c. lang  元素内容的语言代码，很少使用

　　　　　　d. dir  语言的方向，值域：{"ltf"、"rtl"}

　　　　　　e. className  与元素的class特性对应，即 为元素指定的CSS类。没有将这个属性名命名为class是因为clss是ECMAScript的保留字。 

 

//多个CSS类时：以空格为分隔符
html:
    <div id="test" class="s_form_wrapper soutu-env-nomac soutu-env-result"></div>

js:
    document.getElementById("test").className;

output:
"s_form_wrapper soutu-env-nomac soutu-env-result"
 

 

　　　　4.2 操作属性API

　　　　　　element.getAttribute(attributeName);//获取属性　

　　　　　　element.setAttribute(attributeName, attributeValue);//设置属性

　　　　　　element.removeAttribute(attributeName);//移除元素节点属性

　　　　　　注意点：IE7存在对style、class属性的bug，IE8中已修复。

　　　　

　　　　4.3 attributes属性

　　　　　　Element类型是唯一一个使用attributes属性的DOM节点类型。

　　　　　　attributes包含一个NameNodeMap，与NodeList类似，也是"动态"集合。

　　　　　　元素的每个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap对象中。

　　　　　　NameNodeMap有下列方法：

　　　　　　　　a. getNamedItem(name):返回nodeName属性等于name的节点

　　　　　　　　b. removeNamedItem(name):从列表中移除nodeName属性为name的节点。（与removeAttribute()效果相同）

　　　　　　　　c. setNamedItem(name):向列表中添加节点，以节点的nodeName属性为索引。

　　　　　　　　d. item(pos):返回位于数字pos位置处的节点。

　　　　　　　　

var oldAttr = element.attributes.removeNamedItem("id");

var id = element.attributes.removeNamedItem("id").nodeValue;

element.attributes.removeNamedItem("id").nodeValue = "newIdValue";

 

　　　　4.4 创建元素

　　　　　　document.createElement();//工厂模式，创建新元素，注意：其他元素均无此创建方法

　　　　　　IE中，有另外一种创建方式：为这个方法传入完整的元素标签，也可以包含属性。

　　　　　　document.createElement("<div>content!</div>");//注意：IE11不支持了，其他浏览器不支持

　　　　　　注意：已知的IE（7-）的bug

　　　　　　　　1.不能设置动态创建的<iframe>元素的name属性

　　　　　　　　2.不能通过表单的reset()方法重置动态创建的<input>元素　　

　　　　　　　　3. 动态创建的type特性值为"reset"的<button>元素不能重设表单

　　　　　　　　4. 动态创建的一批name相同的单选框彼此毫无关系。

　　　　　　　　   name值相同的一组单选框本来应该用于表示一组选项的不同值，但动态创建的一批这种单选框之间却没有这种关系。

　　　　　　　　5. 上述bug问题均可用　document.createElement(完整的元素标签+属性+文本)解决。　　　

 

　　5.Text类型　

　　6.Comment类型

　　7.CDATASection类型

　　8.DocumentType类型

　　9.DocuementFragment类型

　　10.Attr类型　　

　　　　元素的特性在DOM中以Attr类型来表示。在所有的浏览器中(含IE8)，都可以访问Attr类型的构造函数和原型。

　　　　从技术的角度讲，特性就是存在于元素的attributes属性中的节点。

　　　　Attr所具有的特征：

　　　　　　a. nodeType   2

　　　　　　b. nodeName  特性的名称

　　　　　　c. nodeValue  特性的值

　　　　　　d. parentNode  null

　　　　　　e. 在HTML中，不支持(没有)子节点

　　　　　　f. 在XML中，子节点可以是Text或者EntityReference


　　　　10.1 创建属性

　　　　　　document.createAttribuet();//创建新的特性节点

　　11.HTMLCollection类型　　
　　

 

posted @ 2017-11-25 16:40  千千寰宇  阅读(312)  评论(0)  编辑  收藏  举报