今天完成的事情/收获：

原型：

css   js

class 一次给一组元素加样式 原型

行间样式 一次给一个元素加样式 给对象加事件

.box{background:red}

<div class="box" style="background:green"></div>

<div class="box"></div>

<div class="box"></div>

可以把投票页面的四个选项的颜色来改变

类： 模子 没有实际功能

对象 产品（成品）有实际功能

var arr=new Array(1,2,3,4);

Array 类

arr 对象

 AJ datetimepicker 千万不要用

【JS-TASK】DOM常见的操作方式有哪些？

小课堂【成都第80期】

分享人：韩阳

目录

1.什么是DOM

2.DOM节点

3.常见的DOM属性

4.访问元素的方法

5.修改元素的方法

6.DOM事件

7.参考文献

8.更多讨论

1.什么是DOM

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

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

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

2.什么是DOM节点

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

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

3.常见的DOM属性

属性是节点（HTML 元素）的值，您能够获取或设置。

innerHTML 属性

2.什么是DOM节点

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

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

3.常见的DOM属性

属性是节点（HTML 元素）的值，您能够获取或设置。

innerHTML 属性

3.常见的DOM属性

属性是节点（HTML 元素）的值，您能够获取或设置。

innerHTML 属性

nodeName 属性

nodeName 属性规定节点的名称

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

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

4.访问元素的方法

通过使用 getElementById() 方法

通过使用 getElementsByTagName() 方法

通过使用 getElementsByClassName() 方法

5.修改元素的方法

改变 HTML 内容

document.getElementById("p1").innerHTML="New text!";

改变 CSS 样式

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

属性是节点（HTML 元素）的值，您能够获取或设置。

innerHTML 属性

nodeName 属性

nodeName 属性规定节点的名称

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

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

2.什么是DOM节点

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

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

3.常见的DOM属性

属性是节点（HTML 元素）的值，您能够获取或设置。

nodeName 属性

nodeName 属性规定节点的名称

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

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

4.访问元素的方法

通过使用 getElementById() 方法

通过使用 getElementsByTagName() 方法

通过使用 getElementsByClassName() 方法

5.修改元素的方法

改变 HTML 内容

document.getElementById("p1").innerHTML="New text!";

改变 CSS 样式

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

5.修改元素的方法

改变 HTML 内容

document.getElementById("p1").innerHTML="New text!";

改变 CSS 样式

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

追加子元素的方法

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

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

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

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

替换 HTML 元素:parent.replaceChild(para,child); 方法

实例

                        var element=document.getElementById("d1");

                        var para=document.createElement("p");

                        var node=document.createTextNode("This is new.");

                        para.appendChild(node);

                        element.appendChild(para);

6.DOM - 事件

允许 JavaScript 对 HTML 事件作出反应

onclick 事件——当用户点击时

onload 事件——用户进入

onunload 事件——用户离开

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup 事件——鼠标抬起

7.参考文献

W3C

8.更多讨论

鸣谢

感谢大家观看

BY : 陈尚欢 | 韩阳