DOM编程

刚开始接触前端是从接触和使用bootatrap和agularjs开始的。对于angularjs而言，尽可能避免进行DOM操做是这个框架的灵魂，若是实在是须要进行DOM操做的话，通常放在directive中进行。这样就不会出如今初始加载页面以后再进行dom操做，从而破坏了页面的结构和angularjs的一些特性的展示。并且，若是贸然进行dom操做的话，还可能出现一些事与愿违的事情，曾经在项目中遇到过，非常烦人，最后只能封装到了directive中了。

关于这点，这里就不深究了。抛开这些框架，DOM操做是前端开发中是很重要的部分。因此在这里挖一挖DOM操做的那些事儿。

DOM

DOM是Document Object Model的缩写-文档对象模型，简言之，就是使用树形结构来形容HTML代码。

• Dom就是一些让JavaScript能操做HTML页面控件的类、函数。

• DOM也像WinForm同样，经过事件、属性、方法进行编程。

• CSS+JavaScript+DOM=DHTML

• JavaScript中的大部分处理DOM的过程都是利用document对象。

javascript是一种基于对象和世界驱动，而且安全性较强的脚本语言。一个完整的javascript实现包括核心（ECMAScript），文档对象模型（DOM）和浏览器对象模型（BOM）。
BOM包含DOM，二者之间的关系以下图所示:

DOM文档对象模型是HTML和XML的应用程序接口（API），DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限，而且使开发者能将HTML做为XML文档来处理和查看。DOM对象是与语言无关的API，意味着它的实现并非与javascript绑定，这在于初学者来讲可能会理解错误。DOM是针对XML的基于树的API，它关注的不只仅是解析XML代码，而是用一系列相互关联的对象来表示这些代码，而这些对象能够被修改，并且无需从新解析代码就能直接访问它们。因为DOM的使用上的简便，所以它成为了Web浏览器和javascript最喜欢的方法。

document对象是BOM的对象，即window.document==document，可是它又同时属于DOM，也是HTML DOM的HTMLDocument对象的一种表现形式，反过来讲它也是XML DOM Document对象。

节点

JavaScript中的大部分处理DOM的过程都是利用document对象。

要访问html元素，能够利用document的documentElement特性：
文档根节点

var de = document.documentElement;
    alert(de.tagName);

获取head与body

//原本可使用getElementsByTagName的
    var head = document.getElementsByTagName("head")[0];
    var body = document.getElementsByTagName("body")[0];

还可使用节点,在使用节点前，先了解一些节点基础知识

经常使用节点类型

• 元素节点——文档中具备标签的节点

• 文本节点——标签中不是注释的文本块

经常使用的节点属性

nodeType——节点类型，元素节点是1，文本节点是3
    nodeValue——节点值，元素节点为空，文本节点的nodeValue属性即为文本内容
    firstChild——该元素节点包含的第一个子节点
    lastChild——该元素节点包含的最后一个子节点
    nextSibling——该节点的后一个兄弟节点
    previousSibling——该节点的前一个兄弟节点
    childNodes——子节点列表,能够经过node.childNodes[index]（或node.childNodes.item(index)）来获取子节点
    nodeName——节点名称，对于元素节点，返回tagName,对于文本，则返回#text

例如：

<p> Hello World</p>

会被解析成：

• 元素节点——p标签，

• 文本节点——Hello World.

也就是说，标签中包含的一些文本也是节点，那么空格之类的非打印字符会不会被看成文本节点呢？

var de = document.documentElement;
    var head = de.firstChild;//html下面第一个元素，多是head
    var body = de.lastChild;//html下面最后一个元素，多是body

答案并不肯定，可是仍然有办法解决——使用节点类型检测,每一个节点都有nodeType属性，指明它的节点类型。对于元素节点，它的值是1，而对于文本节点，它的值是3

var de = document.documentElement;
    var head = de.firstChild.nodeType==1?de.firstChild:de.firstChild.nextSibling;
    var body = de.lastChild.nodeType==1?de.lastChild:de.lastChild.previousSibling;]
    //还可使用childNodes
    var de = document.documentElement;
    var head = de.childNodes[0].nodeType==1?de.childNodes[0]:de.childNodes[0].nextSibling;
    var head = de.childNodes[1].nodeType==1?de.childNodes[1]:de.childNodes[1].previousSibling;

DOM HTML

HTML DOM 容许 JavaScript 改变 HTML 元素的内容。

• 改变 HTML 输出流：
  document.write(Date());
  在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容

• 改变 HTML 内容：
  document.getElementById("p1").innerHTML="New text!";

• 改变 HTML 属性：
  document.getElementById("image").src="landscape.jpg";

DOM CSS

HTML DOM 容许 JavaScript 改变 HTML 元素的样式。

document.getElementById("p2").style.color="blue";

DOM 节点

添加和删除节点（HTML 元素）。

• 建立新的 HTML 元素
  如需向 HTML DOM 添加新元素，您必须首先建立该元素（元素节点），而后向一个已存在的元素追加该元素

var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);

添加以后变成：

<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另外一个段落</p>
</div>

• 删除已有的 HTML 元素
  仍是上例中的文档结构：

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

DOM 事件汇总

• window对象：

alert方法，弹出消息对话框。
confirm方法，显示“肯定”、“取消”对话框。
navigate方法，从新导航到指定的地址。
setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识
clearInterval取消setInterval的定时执行，至关于Timer中的Enabled=False。由于setInterval能够设定多个定时，因此clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
setTimeout也是定时执行，可是不像setInterval那样是重复的定时执行，只执行一次。
clearTimeout也是清除定时。
showModalDialog弹出模态对话框。
showModelessDialog弹出非模态窗口。
window.location.href='http://www.baidu.com'，从新导向新的地址。
window.location.reload() 刷新页面。
window.event是很是重要的属性，用来得到发生事件时的信息，事件不局限于window对象的事件，全部元素的事件均可以经过event属性取到相关信息。
clientX、clientY 发生事件时鼠标在客户区的坐标；
screenX、screenY 发生事件时鼠标在屏幕上的坐标；
offsetX、offsetY 发生事件时鼠标相对于事件源（好比点击按钮时触发onclick）的坐标。
.srcElement，得到事件源对象。几个事件共享一个事件响应函数用。
keyCode，发生事件时的按键值。
button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。
        altKey属性，bool类型，表示发生事件时alt键是否被按下，相似的还有ctrlKey、shiftKey属性
screen对象，屏幕的信息
clipboardData对象，对粘贴板的操做。
    clearData("Text")清空粘贴板；
    getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；
    setData("Text",val)，设置粘贴板中的值。

之前在项目中使用clipboardData时发现，在ie下面能够正常工做，在chrome下没有clipboardData对象，因此复制粘贴的工做要另外想办法了。以前使用flash插件，复制按钮上面覆盖一层透明的flash来完成。具体的之后再整理出来。

• body对象的事件

onload：网页加载完毕时触发。
    onunload：网页关闭（或者离开）后触发。
    onbeforeunload：在网页准备关闭（或者离开）后触发。在事件    中"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（好比前进、后退、关闭）就会弹出确认消息

• document对象的事件

document.write('<font color=red>你好</font>');
    getElementById方法，根据元素的Id得到对象,getElementsByName返回值是对象数组。
    getElementsByTagName，得到指定标签名称的元素数组.
    createElement方法来建立具备指定标签的DOM对象，而后经过调用某个元素的            appendChild方法将新建立元素添加到相应的元素下