1.什么是DOM

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

1.2DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

1.3在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。

2.什么是DOM节点

HTML 文档中的所有内容都是节点、整个文档是一个文档节点、每个 HTML 元素是元素节点、HTML 元素内的文本是文本节点、每个 HTML 属性是属性节点、注释是注释节点

3.常见的DOM属性

3.1innerHTML 属性

    可以用来修改元素内部的文本，与innerText属性类似，innerHTML和innerText的区别在于前者获取的是被操作元素的开始标签到结束标签之间的所有的元素，而后者获取的是被操作元素的开始标签到结束标签之间的所有文本，但是两者都可以用来修改元素内的内容，在修改元素内的内容时，其他的之前已经存在的子元素会被覆盖

3.2nodeName 属性

nodeName 属性规定节点的名称，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document

4.访问元素的方法

4.1通过使用 getElementById() 方法

使用id选择器可以直接选到id对应的元素，并对元素进行操作

4.2通过使用 getElementsByTagName() 、通过使用 getElementsByClassName()

这两种方法前者是通过元素的标签进行元素的访问，后者是通过类名来访问元素，和id选择器的区别在于它们选择到的是一个数组，因此需要对具体元素进行操作的时候，需要再变量后面加上【x】，中括号里面是元素的索引值，即该元素在同类名或同便签名的元素中的索引值

5.修改元素的方法

5.1改变 HTML 内容

document.getElementById("p1").innerHTML="New text!";使用此方法的时候注意新设定的内容会将元素中之前存在的文本或者子元素覆盖

5.2改变 CSS 样式

document.getElementById("p2").style.color="blue";

5.3改变多个CSS 样式

document.getElementById("p2").style.cssText="width:10px;height:10px"；这个方法不会将元素之前设置好的css样式全部覆盖，而是会将对应的属性项进行覆盖

上图为元素初始样式

加了main[0].style.cssText="background-color:black"

通过对比可知使用element.style.cssText添加背景色样式后，只有背景颜色得到了改变，其他样式如高度、宽度和边框等都未发生改变

5.4追加子元素的方法：

首先必须创建该元素（元素节点），然后把它追加到已有的元素上：var para=document.createElement("p");

创建新的 HTML 元素 - appendChild() ，在父元素的最后追加；

创建新的 HTML 元素-element.insertBefore(para,child)，在指定位置给父级追加子元素；

删除 HTML 元素，您必须清楚该元素的父元素：parent.removeChild(child);

替换 HTML 元素，parent.replaceChild(para,child)方法；

6.使用便捷但不太常见的dom方法

6.1node类型中的cloneNode方法

(1)element.cloneNode(true):该方法会复制元素的样式以及元素中的所有子元素的样式

使用cloneNode（true）进行元素复制

(2)element.cloneNode(false):该方法会复制元素本身但不会复制元素的子元素

使用cloneNode（false）进行元素复制

(3)方法特点

此方法只会复制元素在html中存在的节点结构和属性，但不会复制在js中为元素设置的属性或是方法、事件等

6.2document.url\document.domain\document.referrer方法

(1)document.url:此方法用于获得页面的完整的url地址

(2)document.domain:此方法用于获得页面的地址缩写（域名地址），此方法是可以进行修改的当页面中包含来自其他子域的框架或内嵌框架时，能够设置document.domain就非常方便了，由于跨域安全限制，来自不同子域的页面无法通过javascript通信，如果将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的javascript对象了

(3)document.referrer:此方法用于求当前页面的跳转页面源地址，即如果当前页面是由之前某个页面跳转过来的，那么此方法可以求得那个跳转页面的网址，此方法常常用来做流量统计，即改页面的访问流量是从哪些页面跳转过来的

三种获得网址的方法

上图当前的页面是由百度主页跳转过来的，通过console控制台可以看出三种方法得到的网址的类型

7.参考文献

《Javascript高级程序设计》第三版

8、讨论问题

attributes和property的区别？

视频链接：http://cache.tv.qq.com/clientportal/v9_6/main.html?cid=&vid=n05023gxah8

PPT链接：https://ptteng.github.io/PPT/PPT/js-02-DOM-common-manipulation.html#/

【it修真院-武汉第167期】常见dom操作有哪些_腾讯视频

技能树.IT修真院

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

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

www.jnshu.com/login/1/95798135