大家好，我是IT修真院的学员，一枚正直纯洁善良的web前端程序员
今天给大家分享一下DOM的常见操作有哪些？
1.背景介绍
DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描 绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于 Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨 平台、语言中立的方式。
1998 年10 月DOM１级规范成为W3C 的推荐标准，为基本的文档结构及查询提供了接口。本章主 要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用，以及JavaScript 对DOM1级的实现。 IE、Firefox、Safari、Chrome 和Opera 都非常完善地实现了DOM。
2.知识剖析
什么是DOM
DOM 是 Document Object Model（文档对象模型）的缩写。 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。
DOM节点
HTML 文档中的所有内容都是节点。整个文档是一个文档节点,每个 HTML 元素是元素节点， HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点。
像是我们现在所看到的这个ppt，我们在编写时，会用到诸如、、、
这些元素。 如果把Web上的文档比作一座大厦，那么元素就是建造这座大厦的砖块，这些元素在在文档中的布局形成了文档的结构。元素可以包含其他的元素，在我们的ppt首页中，内容都被包含在在一个'
'元素的内部。而唯一没有被包含在其他元素中的唯一元素是''，他和我们的节点树的根元素，其他的所有元素都被包含在''中。
元素节点只是节点类型的一种。如果一份文档完全有一些空白元素构成，他将有一个结构，但这份文档本身将不会包含什么内容。
在我们的ppt首页中，'
'元素包含着文本’。他就是一个文本节点。在html文档里，文本节点总是被包含在元素节点的内部。
属性节点用来对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：
'
这是一个带有温馨提示的p标签
'
在DOM中，title="a gentle reminder"是一个属性节点。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的标签都包含着属性，但是所有的属性都被元素包含。
DOM常用操作
查找节点
新建节点
添加节点
删除节点
修改节点
我们用到最多的是element类型，用于表现HTML元素，提供了对元素标签名、子节点及特性的访问。
DOM常用操作举例
查找节点
document.getElementById('id属性值');
返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');
返回拥有指定class的对象集合
新建节点
document.createElement('元素名');
创建新的元素节点
document.createAttribute('属性名');
创建新的属性节点
document.createTextNode('文本内容');
创建新的文本节点
document.createComment('注释节点');
创建新的注释节点
document.createDocumentFragment( );
创建文档片段节点
DOM常用操作
添加节点
常用来添加文本节点element.innerHTML='新增文本内容'
DOM常用操作
删除节点
parentNode.removeChild( existingChild );
删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');
删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );
删除指定属性，返回值为删除的属性
DOM常用操作
修改节点
添加属性节点，修改属性值：
element.setAttribute( attributeName, attributeValue );
DOM事件
允许 JavaScript 对 HTML 事件作出反应
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
3.常见问题
如何通过class和tag调用元素?如何对其设置属性？
4.解决方案
一个页面中常常有多个class相同的元素，也有多个标签相同的元素，在调用时方法如下
5.编码实战
6.扩展思考
Html5添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性， 这个属性始终会引用DOM中当前获得了焦点的元素。 另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。 我们可以去学习HTML5中的一些新内容。
7.参考文献
参考一：《JavaScript高级程序设计》
参考二：DOM树知识点梳理
8.更多讨论
问题：
1.文档节点（document）的属性值是什么
答：通过Document对象属性其返回值都是一单独对象，或HTML Element元素对象
2.怎么确定使用哪种方法获取dom方法？
答：看需要获取的类名，应用场景
3.除了根节点,节点之间的关系有哪几种?
答：请点击
网友评论