DOM树知识点梳理

为什么会提到Dom树呢，或许它对于我们很好地理解网页各个元素，标签和控件搭配，以及各种js，css等的加载会有一些帮助。笔者在工程中遇到了一些小问题，本质就是dom树的东西掌握的不扎实。所以借此来梳理一下。
1.HTML DOM
ok, 我们先来看一下W3school中怎么解释这个概念和结构的。W3school是一个很不错的网站，很适合初学者和基础不扎实的人。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
我们主要来看HTML DOM
HTML DOM 是：
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

2.获取节点的原生方法

3.JS中的节点操作
写几个常用的API, 来操作DOM节点。
(1)document.getElementById()这个是最基本的了。
(2)object.innerHTML该属性设置或返回object之间的HTML
(3)document.createElement()创建节点对象。
(4)document.body.appendChild()尾部插入结点。
(5)object.parentNode.removeChild(oChildNode);移除结点

4.jQuery中的结点操作
(1)添加结点
a. append()和appendTo(), 两个方法刚好是对应的一对儿操作。

$('#parentNodeId').append(childNode);

$('#childeNode').appendTo(parentNode);

b. prepend()和prependTo()， 这也是一对儿对应的操作方法。其作用是添加一个结点到父节点中并前置。用法和上一对儿一样。

c. 与之对应的还有after, insertAfter; before, insertBefore等，其用法都和上面的相同。其效果是将新建的元素插入到指定的元素之后/前，并和目标元素紧邻，作为兄弟结点存在。

(2)删除结点
a. remove()
remove()方法删除所有匹配的元素，传入的参数用于筛选元素，该方法可以删除元素中所有的子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除结点的引用，因此可以使用该引用，再使用被删除的元素。

$span = $('span').remove();
$span.insertAfter('ul');

我们可以看到，该示例中，先删除所有的span元素，把删除的元素使用$span接收，把删除后的元素添加到ul后面，作为ul的兄弟结点。该操作产生的效果即把所有的span元素以及后代元素移到ul后面。
b. empty()
empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。

(3)修改DOM节点
a. 复制节点，当clone()方法有参数，并且为true时，表示同时复制该元素的属性，如果没有参数，表示不复制属性。

$(element).clone(true);

b.替换节点
这两个方法都可以实现替换节点的问题。

$(element).replacewith();
$(element).replaceAll();

c.包裹节点

$(element).wrap()
$(element).wrapAll()
$(element).wraplnner()

(4)属性操作
attr()和removeAttr()。 attr()方法能够获取元素属性，也能够设置元素属性。removeAttr()方法删除特定的属性，方法是在参数中指定属性名。

$('p').attr('title');
$('p').attr('title':'题目');
$('p').attr({'title':'题目'，'name':'水果'});

(5)样式操作
addClass()、removeClass()这对儿方法是添加和删除样式。
toggleClass()该方法用来切换目标元素的样式。
(6)其他常见操作
第一句是获取值，第二句是设置值。

$('id').val();
$('id').val('hello');

css操作
设置添加css样式

$('p').css('color','red');

至此，大概的Dom操作就已经梳理完了。

按照惯例，列出一些可以参考的资料
http://www.cnblogs.com/ini_always/archive/2011/11/09/2243671.html
http://wenku.baidu.com/view/a6b9673783c4bb4cf7ecd119.html
http://www.nowamagic.net/librarys/posts/jquery/5
http://www.blogjava.net/DLevin/archive/2012/11/25/391933.html
http://www.w3school.com.cn/htmldom/dom_nodes.asp
http://www.2cto.com/kf/201205/130535.html
http://group.cnblogs.com/topic/39811.html
http://www.cnblogs.com/bro-ma/p/3063942.html