Friday,January,15th

知识点总结

HTML DOM编程

Document Object Model 文档对象模型，用于操作网页中元素

DOM 节点

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

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

DOM 方法

这里提供一些您将在本教程中学到的常用方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

DOM 属性

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

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

nodeValue 属性

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

DOM 访问

访问 HTML DOM - 查找 HTML 元素

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

• 通过使用 getElementById() 方法
• 通过使用 getElementsByTagName() 方法
• 通过使用 getElementsByClassName() 方法

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素引用：

语法:

node.getElementById("id");

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

语法：

node.getElementsByTagName("tagname");

DOM 修改

修改HTML=改变元素、属性、样式和事件

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

• 改变 HTML 内容
• 改变 CSS 样式
• 改变 HTML 属性
• 创建新的 HTML 元素
• 删除已有的 HTML 元素
• 改变事件（处理程序）

创建 HTML 内容

改变元素内容的最简单的方法是使用 innerHTML 属性。

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

对事件做出反应

HTML事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图片已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户触发按键时

HTML 事件属性

向 button 元素分配一个 onclick 事件：

<button onclick="displayDate()">点我</button>

使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

onmouseover 和 onmouseout 事件

JavaScript(JS)

JavaScript概述

JavaScript的历史

ECMAScript 起源

JavaScript 是脚本语言

JavaScript的语法组成

浏览器支持

JavaScript的基础语法

JavaScript的编写方式

JavaScript中的几个概念

基本词法

区分大小写

心得体会

使用HTML DOM编程语言编写了物品的选购和价格的结算实例、关于事件监听实例、鼠标放上去和离开实例，老师讲述和实操之后，实现了这些实例，感受了一下JavaScript语言魅力，

经过在云创动力一周的学习之后，学到了很多相关专业知识，同时也学到了很多关于生活中的常识。和待了两年多的兰州比起来，对西安的爱还是偏多一点。希望有机会去参观一下钟楼、鼓楼、兵马俑；去浪一圈不夜城，还有回民街。

······。