DOM编程-CSDN博客

刚开始接触前端是从接触和使用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方法将新创建元素添加到相应的元素下