HTML的一些小点点（3）—DOM树

1.HTML DOM 

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操作就已经梳理完了。