常见Dom操作有哪些？

一、背景介绍

什么是DOM？

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

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

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

二、知识剖析

什么是DOM节点

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

1、整个文档是一个文档节点；

2、每个 HTML 元素是元素节点；

3、HTML 元素内的文本是文本节点；

4、每个 HTML 属性是属性节点；

5、注释是注释节点。

demo

三、常见问题

属性是节点（HTML 元素）的值，您能够获取或设置。那么有哪些常见的DOM属性？

四、解决方案

innerHTML 属性

设置或返回表格行的开始和结束标签之间的 HTML。

nodeName 属性

规定节点的名称。

1、元素节点的 nodeName 与标签名相同；

2、属性节点的 nodeName 与属性名相同；

3、文本节点的 nodeName 始终是 #text ；

4、文档节点的 nodeName 始终是 #document。

nodeValue 属性

规定节点的值。

1、元素节点的 nodeValue 是 undefined 或 null ；

2、文本节点的 nodeValue 是文本本身；

3、属性节点的 nodeValue 是属性值。

五、编码实战

六、扩展思考

对元素的操作方法有哪些？

访问元素的方法

1、通过使用getElementById()方法；

2、通过使用getElementByName() 方法；

3、通过使用getElementsByTagName() 方法；

4、通过使用getElementsByClassName() 方法。

修改元素的方法

1、改变Html的内容，如：document.getElementById("p1").innerHTML="New text!";

2、改变CSS的样式，如：document.getElementById("p2").style.color="blue";

追加子元素的方法

DOM事件

允许 JavaScript 对 HTML 事件作出反应

1、onclick 事件——当用户点击时

2、onload 事件——用户进入

3、onunload 事件——用户离开，如刷新页面，提交表单，关闭窗口，关闭浏览器时触发（这个事件在Chrome和Opera浏览器里并不支持）

4、onmouseover事件——鼠标移入

5、onmouseout事件——鼠标移出

6、onmousedown事件——鼠标按下

7、onmouseup 事件——鼠标抬起

七、更多讨论

讨论点一：DOM有什么缺点？

讨论点二：如何获取属性节点的节点值？

讨论点三：DOM中的property和attribute的区别是什么？

八、参考文献

参考一：W3C