DOM操作

为了写这一篇随笔真的是费了好多力气，虽然还是写不好。本来是从周一都开始写的，但是周二周三忙着去帮忙招新了，哈哈哈。感觉做自己喜欢的事特别好玩，虽然挺忙的。看着那些小鲜肉，感觉自己真的老了啊。感觉太久没有更博了，学长估计要打我了。恩~不过我还是很开心。这次写的DOM操作，内容有点多也有点乱。理解还是没有那么透彻，不过一点点积累吧，总会有懂的时候。加油！

【DOM】

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

【节点层次】

DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。文档节点是每个文档的根节点。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。

【Node类型】

DOM1级定义了一个Node接口，该接口将由DOM中所有节点类型实现。这个Node接口在JavaScript中作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型。JavaScript中所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法，但不是所有节点类型都受到web浏览器的支持。

每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的12个数值常量（详情见高程书第三版P248）来表示，任何节点类型必居其一。

要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。对于元素节点，nodeName中保存的始终是元素的标签名，而nodeValue的值始终是null。

每个节点都有一个childNode属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。

要想在IE中将NodeList转换为数组，必须手动枚举所有成员。下列方式也可以将NodeList转换为数组：

function convertToArray(nodes){

    var array=null;

    try{

         array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器

}catch(ex){

       array=new Array();

       for(var i=0;i<nodes.length;i++){

           array.push(nodes[i]);

        }

    }

    return array;

}

操作节点

appendChild()，用于向childNodes列表的末尾添加一个节点。如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新的位置。而如果想把节点放在在列表中某个特定的位置，可以使用insertBefore()方法（参数为要插入的节点和作为参照的节点）。

replaceChild(要插入的节点，要替换的节点)方法。用该方法插入一个人节点时，该节点的所有关系指针都会从被他替换的节点复制过来。被替换的节点仍然在文档中，但它在文档中已经没有了自己的位置。

【Document属性】

JS通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

文档的子节点

DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingIn-struction或Comment,还有两个内置的访问其子节点的快捷放肆。第一个就是documentElement属性（始终指向HTML页面中的<html>元素），另一个就是通过childNodes列表访问文档元素。document对象还有一个body属性，直接指向<body>元素。

所有浏览器都支持document.documentElement和document.body属性。

浏览器对document.doctype的支持差别很大，具体如下：

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

*IE9+及Firefox:如果存在文档类型声明，则将其作为文档的第一个子节点；document.doctype是一个DocumrntType节点，也可以通过document.firstChild或document.childNodes[0]访问同一个节点。

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

文档信息

作为HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性。比如title属性，包含着<tiele>元素中的文本。其中URL（包含页面完整的URL）、domain（包含页面的域名）、referrer（保存着链接到当前页面的那个页面的URL）。所有这些信息都存在于请求的HTTP头部。这三个属性中，只有domain是可以设置的。

查找元素

查找元素的方法可以有getElementById()和getElementsByTagName()还有getElementsByName()这三种方法。

特殊集合

document.anchors，包含文档中所有带有name特性的<a>元素；

document.forms，包含文档中所有的<from>元素；

docuemnt.imges，包含文档中所有的<img>元素；

docuemnt.links，包含文档中所有带有href特性的<a>元素；

文档写入

将输出流写入到网页中的能力。这种能力主要有write()、writeln()、open()和close()。其中 write()和writeln()方法都接受一个字符串参数，即要写入到输出流的文本。write()会原样写入，而writeln()则会在字符串末尾加一个换行符（\n）。方法open()和close()分别用于打开和关闭网页的输出流。

【Element类型】

用于表现XML和HTML元素，提供了对元素标签名、子节点及特性的访问。

要访问元素的标签名可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。

取得特性

操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用。

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类特性就是style，用于通过CSS为元素指定样式。在通过getAttribute()访问时，返回的style特性中包含的是CSS文本，而通过属性来访问它则会返回一个对象。第二类特性是onclick这样的事件处理程序。通过getAttribute()访问，则会返回相应代码的字符串，而访问onclick属性时，则返回一个JS函数(没有指定时，返回null)。

与getAttribute()对应的方法是setAttribute(),这个方法接受要设置的特性名和值这两个参数。通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一换成小写形式。

removeAttribute()，用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

Element类型是使用attributes属性的唯一一个DOM节点类型。该属性中包含一个NamedNodeMap，与NodeList类似，也是一个动态的集合。

使用document.createElement()方法可以创建新元素。且只接受一个参数，即要创建元素的标签名。

【Text类型】

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。里面的内容不能包含HTML代码，会被转义。

可以通过nodeValue属性或data属性访问Text节点中包含的文本。这两个属性中包含的值相同。

可以使用document。createTextNode()创建新文本节点，这个方法接受要插入节点中的文本这一个参数。如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。

用normalize()方法可以将相邻文本节点合并起来。

用splitText()方法可以将一个文本节点分为两个文本节点。

【Comment类型】

注释在DOM中是通过Comment类型来表示的。Comment类型与Text类型继承自相同的基类，因此它拥有除了splitText()之外的其他方法。

【DocumentFragment类型】

所有节点类型中，只有DocumentFragment在文档中没有对应的标记。虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。文档片段中的节点不属于文档树。通过appendChild()或insertBefore()将文档片段中内容添加到文档中，即使文档片段作为参数，也只会将子节点添加过去，文档片段本身永远不会成为文档树的一部分。

【DOM操作技术】

【动态脚本】

在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。创建动态脚本一共有插入外部文件和直接插入JavaScript代码这两种方式。动态加载的外部JS文件能够立即运行。

【动态样式】

指的是在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。

如果专门针对IE编写代码，务必小心使用styleSheet.cssText属性。在重用同一个<style>元素并再次设置这个属性时，有可能会导致浏览器崩溃。同样，将cssText属性设置为空字符串也可能导致浏览器崩溃。

【使用NodeList】

NodeList对象都是“动态的”，这就意味着每次访问NodeList对象，都会运行一次查询。

JavaScript（5）——DOM的更多相关文章

  1. JavaScript（四）——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  2. JavaScript（三）——DOM操作一

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...

  3. Javascript——（2）DOM

    1.DOM 1)直接寻找 (1)document.getElementById()     //根据ID获取一个标签: (2)   document.getElementsByName()    // ...

  4. JavaScript（三）-- DOM编程

    JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...

  5. javascript （六）DOM

    学习后的总结: DOM:document object model 关于DOM的简介:http://www.w3school.com.cn/htmldom/dom_intro.asp 本文说的是HTM ...

  6. JavaScript（十一）Dom

    Dom(Document object module) 1.获取dom对象的方法 正常用的方法 推荐 getElementById()//通过id选择唯一的dom getElementsByClass ...

  7. JavaScript（7）——DOM

    什么是 DOM? DOM是 Document Object Model(文档对象模型)的缩写 DOM是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C ...

  8. Day4 JavaScript（二）dom操作

    dom(文档对象模型) 文档结构 文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分 标签,文本, ...

  9. 初探JavaScript（三）——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

随机推荐

  1. eclipse 导入tomcat7源码

    导入tomcat的源码其实说简单也不简单,说不简单也简单,主要还是环境问题,中间花费了我很多时间,网上找了很多都没什么用,参考一些文章,然后自己慢慢摸索出来的. 环境:(1)jdk:jdk1.6.0_ ...

  2. wpf为ListBox添加渐变

    <Style.Triggers> <Trigger Property="ListBox.AlternationIndex" Value="1" ...

  3. supervisor笔记

    supervisord 作为主进程,管理旗下的各个子进程,子进程会产生若干线程.当某个管理的服务异常奔溃之后,supervisor 会自动重启该服务.配合使用 superlance 插件以实现 Htt ...

  4. Webpack学习笔记（二）

    市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合 ...

  5. ASP.NET的三层架构(DAL,BLL,UI)

    ASP.NET的三层架构(DAL,BLL,UI) BLL   是业务逻辑层   Business   Logic   Layer DAL   是数据访问层   Data   Access   Laye ...

  6. Android 发送HTTP GET POST 请求以及通过 MultipartEntityBuilder 上传文件（二）

    Android 发送HTTP GET POST 请求以及通过 MultipartEntityBuilder 上传文件第二版 上次粗略的写了相同功能的代码,这次整理修复了之前的一些BUG,结构也大量修改 ...

  7. 2016中国大数据技术大会（ BDTC ） 共商大数据时代发展之计

    中国大数据技术大会(BDTC)的前身是Hadoop中国云计算大会(HadoopinChina,HiC).从2008年仅60余人参加的技术沙龙发展到当下数千人的技术盛宴,目前已成为国内最具影响力.规模最 ...

  8. EconomicIndoor集成测试

    加密时序列号相同引发的呼叫功能异常 现象描述: 配置完房间号一次性呼叫问题 问题描述: 两台室内机升级后配置到同一门口机, 各种配置正确. 作为主叫呼不出去, 作为被叫可以接听, 每修改一次房间号, ...

  9. 《JS权威指南学习总结--6.1原型》

    内容要点: 一.每一个JS对象(null除外)都和另一个对象相关联."另一个"对象就是我们熟知的原型,每一个对象都从原型继承属性. 二.所有通过对象直接量创建的对象都具有同一个原型 ...

  10. MPI发送接收例子

    原文地址:http://blog.csdn.net/ziren235/article/details/1704203 #include"mpi.h" int main(int ar ...