it-修真院小课堂

1.背景介绍

DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。 DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

2.知识剖析

DOM是什么？

DOM 是 Document Object Model（文档对象模型）的缩写。

DOM就是一个编程接口，就是一套API，是针对HTML文档、XML等文档的一套API。

DOM用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。

JavaScript 可以通过 DOM 来访问和操作HTML文档所有的元素。

JavaScript是一种脚本语言，DOM是用来获得和操作HTML文档的节点属性。

JavaScript通常是通过DOM来获得和操作HTML属性的。

什么是DOM节点？

HTML 文档中的所有内容都是节点

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

常见的DOM操作有哪些？

查找节点

新建节点

添加新节点

删除节点

设置样式

常用的查找节点的方法有：

document.getElementById('id属性值');返回拥有指定id的对象的引用

document.getElementsByClassName('class属性值');返回拥有指定class的对象集合

document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合

document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合

document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素

document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素

document.documentElement; 获取页面中的HTML标签

document.body; 获取页面中的BODY标签

document.all['']; 获取页面中的所有元素节点的对象集合型

常用的新建节点的方法有：

document.createElement('元素名');创建新的元素节点

document.createAttribute('属性名');创建新的属性节点

document.createTextNode('文本内容');创建新的文本节点

document.createComment('注释节点'); 创建新的注释节点

document.createDocumentFragment( ); 创建文档片段节点

常用的添加新节点的方法有：

element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值

element.setAttributeNode( attributeName );给元素增加属性节点

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

1. document.createTextNode('新增文本内容');创建新的文本节点

2)parent.appendChild( 创建的新节点 );向父节点的最后一个子节点后追加新节点或 parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点 #常用的删除节点的方法有： parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点 DOM 需要清楚你需要删除的元素，以及它的父元素。常用的解决方案：找到你希望删除的子元素，然后使用其 parentNode 属性来找到父元素： var child=document.getElementById("p1"); child.parentNode.removeChild(child); 设置样式 ele.style.styleName = styleValue;设置ele元素的CSS样式

3.常见问题

DOM 和 HTML是一回事吗？

DOM 和 JavaScript什么关系？

书写细节

如何获取相邻的节点？

可以复制节点么？

4.解决方案

DOM 和 HTML是一回事吗？

就像很多人把JQuery和Javascript的本质搞混一样，DOM和HTML也完全不是一回事，DOM是一个API，HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。但是前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过script标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。

DOM 和 JavaScript什么关系？

Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。

书写细节

只有查找ID时element不加s ，对新人来说要是不注意细节很可能会书写错误，导致一时半会儿找不到错误所在 getElementById getElementsByClassName

如何获取相邻的节点？

neborNode.previousSibling :获取已知节点的相邻的上一个节点 nerbourNode.nextSlbling: 获取已知节点的下一个节点

可以复制节点么？

cloneNode(true | false);复制某个节点参数：是否复制原节点的所有属性

5.编码实战

常见的DOM操作

AAAAAAA

BBBBBB

CCCCCCCC

DDDDDDDD

EEEEEEEE

这是一个段落。

这是另一个段落。

复制代码

6.更多讨论

常见的DOM - 事件有哪些？

onclick 事件——当用户点击时

onload 事件——用户进入

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup 事件——鼠标抬起

http://www.runoob.com/jsref/dom-obj-event.html/HTML DOM 事件

DOM有什么优点和缺点？

DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。 DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

7.参考文献

http://www.runoob.com/htmldom/htmldom-tutorial.html/菜鸟教程-HTML DOM 教程

http://www.cnblogs.com/yinshuige/p/5812095.html/DOM常用操作 - GraceZy - 博客园

鸣谢

感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

快来与我一起学习吧~http://www.jnshu.com/login/1/21109035