DOM基本知识

àì夳堔傛蜴生んèń 2022-05-29 09:41 100阅读 0赞

参考[DOM基本原理][DOM]

转自[DOM树知识梳理][DOM 1]

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

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。   
![这里写图片描述][20151110111104365]

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 属性是属性节点   
注释是注释节点   
![这里写图片描述][20151110111711483]

2.获取节点的原生方法

![这里写图片描述][20151110113005658]

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);

*  1

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

*  1

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

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

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

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

*  1
 *  2

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

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

$(element).clone(true);

*  1

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

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

*  1
 *  2

c.包裹节点

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

*  1
 *  2
 *  3

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

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

*  1
 *  2
 *  3

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

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

*  1
 *  2

css操作   
设置添加css样式

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

*  1

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

按照惯例，列出一些可以参考的资料   
[http://www.cnblogs.com/ini\_always/archive/2011/11/09/2243671.html][http_www.cnblogs.com_ini_always_archive_2011_11_09_2243671.html]   
[http://wenku.baidu.com/view/a6b9673783c4bb4cf7ecd119.html][http_wenku.baidu.com_view_a6b9673783c4bb4cf7ecd119.html]   
[http://www.nowamagic.net/librarys/posts/jquery/5][http_www.nowamagic.net_librarys_posts_jquery_5]   
[http://www.blogjava.net/DLevin/archive/2012/11/25/391933.html][http_www.blogjava.net_DLevin_archive_2012_11_25_391933.html]   
[http://www.w3school.com.cn/htmldom/dom\_nodes.asp][http_www.w3school.com.cn_htmldom_dom_nodes.asp]   
[http://www.2cto.com/kf/201205/130535.html][http_www.2cto.com_kf_201205_130535.html]   
[http://group.cnblogs.com/topic/39811.html][http_group.cnblogs.com_topic_39811.html]   
[http://www.cnblogs.com/bro-ma/p/3063942.html][http_www.cnblogs.com_bro-ma_p_3063942.html]

[DOM]: http://blog.jobbole.com/52430/
[DOM 1]: http://blog.csdn.net/ouyangyanlan/article/details/50217065
[20151110111104365]: /images/20220529/4a054ca6aff143bb953fc1c778fa655f.png
[20151110111711483]: /images/20220529/74af6375a20e4c599d045d1c6a336c34.png
[20151110113005658]: /images/20220529/ef1d357d9d8f4efca37a2ba0fd44619f.png
[http_www.cnblogs.com_ini_always_archive_2011_11_09_2243671.html]: http://www.cnblogs.com/ini_always/archive/2011/11/09/2243671.html
[http_wenku.baidu.com_view_a6b9673783c4bb4cf7ecd119.html]: http://wenku.baidu.com/view/a6b9673783c4bb4cf7ecd119.html
[http_www.nowamagic.net_librarys_posts_jquery_5]: http://www.nowamagic.net/librarys/posts/jquery/5
[http_www.blogjava.net_DLevin_archive_2012_11_25_391933.html]: http://www.blogjava.net/DLevin/archive/2012/11/25/391933.html
[http_www.w3school.com.cn_htmldom_dom_nodes.asp]: http://www.w3school.com.cn/htmldom/dom_nodes.asp
[http_www.2cto.com_kf_201205_130535.html]: http://www.2cto.com/kf/201205/130535.html
[http_group.cnblogs.com_topic_39811.html]: http://group.cnblogs.com/topic/39811.html
[http_www.cnblogs.com_bro-ma_p_3063942.html]: http://www.cnblogs.com/bro-ma/p/3063942.html