大家好，我是IT修真院武汉分院第20期的学员晏军，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网js任务2，深度思考  中的知识点——常用的dom对象有哪些？

1.背景介绍     

1.什么是DOM？

      DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。

      对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据

2.DOM的组成

作为W3C的标准接口规范，目前，DOM由三部分组成，包括： 核心（core）, HTML接口,   XML接口核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了HTML接口和XML接口两部分则是专为操作具体HTML文档和XML文档所提供的高级接口

2.知识剖析

1.DOM的四个基本接口  

  在DOM接口规范中，有四个基本的接口：Document, Node, NodeList, NamedNodeMap。

       1 Document接口是对文档进行操作的入口，它是从Node接口继承

       2 Node接口是其他大多数接口的父类。 在DOM树中，Node接口代表了树中的一个节点。

       3 NodeList接口是一个节点的集合，它包含了某个节点中的所有子节点。

       4 NamedNodeMap接口也是一个节点的集合，通过该接口，可以建立节点名和节点之间的一一映射关系来直接访问特            定的节点，这个接口主要用在属性节点的表示上。

2.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的概念很容易混淆。

3.DOM 和 JavaScript的关系

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

3. 常见问题

DOM有哪些操作？

4.解决方案

    1.查找节点

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

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

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

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

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

    2.创建节点

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

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

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

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

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

    3.删除节点

       parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点

       element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值

       element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性

    4.修改节点

       parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点

       element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的目的

       element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的目的

    5.插入节点

       parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点

       parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点

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

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

 5.编码实战                                                                             

document.getElementById('id')

document.getElementsByClassName('class')

document.getElementsByTagName('p')

document.getElementsByName('name')

document.querySelector('#ids')

document.createElement('p')

 div.appendChild(p)

div2.replaceChild(a,p1);

div3.removeChild(p2);

6. 扩展思考

如何简化写法？

     答：jQuery库

     jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单

      参考资料:jQuery 学习中心  https://www.jquery123.com

7. 参考文献

参考一:《JavaScript高级程序设计》

参考二:HTML DOM Document 对象 http://www.runoob.com/jsref/dom-obj-document.html

8.更多讨论

（1）jQ 常用的修改DOM结构的方法

a. 新增节点的类型  JQ对象   DomString（<span>hello world </span>） 以及 function return 对象

b.  新增节点如果是已经存在的， 那么可以达到移动的效果(先删除 后添加)

parentNode.append((Node || DomString))    在父级节点后面追加一个元素

parentNode.prepend((Node || DomString))    在父级节点前面追加一个元素

refNode.after((Node || DomString))      在参考节点redNode后面添加一个元素

refNode.before((Node || DomString))      在参考节点redNode前面添加一个元素

refNode.remove()   删除参考节点refNode元素(包含它的子节点)

(2)如何获取相邻的节点？

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

nerbourNode.nextSlbling: 获取已知节点的下一个节点

(3)可以复制节点么？

cloneNode(true | false);复制某个节点

参数：是否复制原节点的所有属性

9.鸣谢：

感谢刘超师兄，此教程是在他之前技术分享的基础上完善而成。

10.结束语：

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