常见的DOM操作节点

1、背景介绍：

DOM（文档对象模型）

DOM是针对于HTML和XML文档的一个API（应用程序编程接口）。是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

在DOM中，可以将任何HTML或者XML的文档描绘成一个由多层节点构成的结构

 

2、知识剖析：

节点这个词是一个网络用语，代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

 

节点的类型有七种。 
Document：整个文档树的顶层节点 
DocumentType：doctype标签 
Element：网页的各种HTML标签 
Attribute：网页元素的属性 
Text：标签之间或标签包含的文本 
Comment：注释 
DocumentFragment：文档的片段

 

常见的DOM操作

查找DOM节点

1.id查找 document.getElementById() 
2.class查找 document.getElementsByClassName() 
3.标签查找 document.getElementsByClassName()

HTML DOM - 改变 HTML

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

document.getElementById(id).innerHTML=新的 HTML

改变 HTML 样式

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

 

 

DOM事件

允许 JavaScript 对 HTML 事件作出反应 
onclick 事件——当用户点击时 
onload 事件——用户进入 
onunload 事件——用户离开 
onmouseover事件——鼠标移入 
onmouseout事件——鼠标移出 
onmousedown事件——鼠标按下 
onmouseup 事件——鼠标抬起

 

DOM二级事件

2级DOM的事件传播分三个阶段进行。 
1.capturin阶段，事件从Document对象沿着文档树向下传播给节点。如果目标的任何一个祖先专门注册了事件监听函数，那么在事件传播的过程中就会运行这些函数。 
2.下一个阶段发生在目标节点自身，直接注册在目标上的适合的事件监听函数将运行。 
3.是bubbling阶段，这个阶段事件将从目标元素向上传播回Document对象（与capturing相反的阶段）。虽然所有事件都受capturing阶段的支配，但并不是所有类型的事件都bubbling。（0级DOM事件模型处理没有capturing阶段） 
即1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段

 

3、常见问题：如何阻止事件冒泡？

4.解决方案

使用event.stopPropagation( );

另一种方式是通过event.target， target指向了触发事件的那个具体对象. 可以使用 if(event.target==this){ //语句 }

 

5.拓展思考

事件的默认行为是指浏览器在事件传递和处理完成后自动执行的与该事件关联的默认动作。例如，单击一个超链接的默认行为是访问其定义的url。

 IE和其他浏览器阻止事件的默认行为的方法不同。在IE中，可以通过设置event对象的returnValue属性为false来阻止事件的默认行为；在其他浏览器中，则可以通过设置event对象的preventDefault()方法来实现。

 

6.参考文献

JavaScript高级程序设计

 

Q：DOM的事件流是什么？

A：1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段

 

Q：DOM有什么用？

A：可以通过DOM改变css样式和HTML

 

Q：为什么要获取dom节点？

A：一个dom可能对应着一个标签或者一个类名，只有在js里获取后才能在js里通过操作dom来控制css和HTML。