JavaScript DOM 编程艺术

1. HTML: 超文本标记语言

CSS:层叠样式表, 具有继承性

W3C:万维网联盟

DOM:文档对象模型, 是一套对文档的内容进行抽象和概念化的方法. 是一种API. 一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容结构和样式.

BOM:浏览器对象模型, 调整Web浏览器窗口的亮度宽度和位置等属性

DHTML: Dynamic HTML(动态HTML), 曾被认为是HTML/XHTML, CSS和Javascript相结合的产物

XHTML: 可扩展超文本标记语言, 正确嵌套, 必须关闭, 标签小写, 必须有根元素

HTML5: 狭义上比html多了几个标签, 广义上html,js其他技术的综合

API:应用编程接口

WaSP: Web标准计划

Ajax:异步数据传输技术, 对页面的请求以异步方式发送到服务器. 而服务器不会用整个页面来相应请求, 它会在后台处理请求, 与此同时用户还能继续浏览页面并与页面交互.

JavaScript: 是一门脚本语言, 通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行.

　JScript: JavaScript->ECMAScript

structed programming结构化程序设计

DOM Core

HTML-DOM

CSS-DOM

XMLHttpRequest对象: 可扩展超文本传输请求, 客户端(浏览器)与服务器交换数据

2. 第0级DOM主要用途:翻转图片和验证表单数据

第1级DOM主要用途:通过DHTML的推动,将Netscape与微软等js标准化

3. 程序设计语言分为解释型(javascript)和编译型(java, C++等)两大类.

4. 标量(scalar): 字符串,数值和布尔值.如果某个变量是标量,他在任意时刻就只能有一个值

数组: 用一个变量去存储一组值. 用一个变量表示一个值的集合,集合中的每个值都是这个数组的一个元素. 将数组的key值(0)改为(string),就是关联数组,但不建议. 将数据存为对象是首选方式.

len = [];len['name'] = 12; len = {}; len.name =12; 数组是一个内建对象;

5. 操作: 算数运算符(算数运算符的 + , 可以拼接字符串), 条件语句( 比较操作符, 逻辑操作符 ), 循环语句(while 循环, for循环, do至少执行一次), 函数 function A(arguments) {}

6. 对象是自包含的数据集合,包含在对象里的数据可以通过两种形式访问(属性和方法),分为(用户定义对象,内建对象,宿主对象)

属性: 隶属于某个特定对象的变量

方法: 只有某个特定对象才能调用的函数

内建对象: 数组, Math对象(Math.round()), Date对象

宿主对象: 不是由JavaScript语言本身而是由它的运行环境提供的. Form,Image,Element,document对象

7. 节点分为元素节点,属性节点,文本节点

元素(div) 属性(id, class) 文本

document.getElementById('id'), 返回对象; 文档中每个元素都是一个对象.

document.getElementsByTagName('tag / *'),返回对象数组; *是所有标签

document.getElementsByClassName('class'),返回对象数组; 注意: class是(A B), 那么(B, A) / (A, B, C) / (A, C, B)也会被匹配; 只有新的浏览器支持

document.getElementById('num1').getElementsByTagName('*'): 获取id为num1的标签(div)共有多少个;

document.getElementById('num1').getElementsByClassName('A'): 获取id为num1的标签共有多少个带class为A的;

8. NodeType存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点, 前3个有用

nodeName = P, nodeType = 1, firstChild = text, firstChild.nodeName = 空, firstChild.nodeType = 3, firstChild.firstChild = 空

节点类型		描述	子节点	nodeName 返回(大写)	nodeValue 返回
1	Element	代表元素	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference	元素名	null
2	Attr	代表属性	Text, EntityReference	属性名称	属性值
3	Text	代表元素或属性中的文本内容。	None	#text	节点的内容
4	CDATASection	代表文档中的 CDATA 部分（不会由解析器解析的文本）。	None	#cdata-section	节点的内容
5	EntityReference	代表实体引用。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	实体引用名称	null
6	Entity	代表实体。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	实体名称	null
7	ProcessingInstruction	代表处理指令。	None	target	节点的内容
8	Comment	代表注释。	None	#comment	注释文本
9	Document	代表整个文档（DOM 树的根节点）。	Element, ProcessingInstruction, Comment, DocumentType	#document	null
10	DocumentType	向为文档定义的实体提供接口	None	文档类型名称	null
11	DocumentFragment	代表轻量级的 Document 对象，能够容纳文档的某个部分	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	#document 片段	null
12	Notation	代表 DTD 中声明的符号。	None	符号名称	null

9. 获取和设置属性

object.getAttribute(attribute): 是对象的方法不是document, 没有返回null; document.getElementById('id').getAttribute('class');

object.setAttribute(attribute): 是对象的方法不是document, 已存在则覆盖; document.getElementById('id').setAttribute('class', 'text-center');

通过setAttribute对文档进行修改后, 通过浏览器查看源码时看到的仍将是改变前的属性值, 也就是说, setAttribute做出的修改不会反应在文档本身的源代码里.

这种'表里不一'的现象的原因: DOM的工作模式,先加载文档的静态内容, 再动态刷新,动态刷新不影响文档的静态内容.对页面内容进行刷新却不需要在浏览器里刷新页面.

10. 匿名函数: link[i].onclick = function {}

11. object.innerHTML: 从对象的起始位置到终止位置的全部内容, 包含html标签, 注释等

object.innerText(仅IE): = innerHTML.replace(/<.+?>/gim,'') 出去标签注释

object.outerHTML: innerHTML + 对象本身

12. var para = document.createElement("p"); 创建节点;

var testdiv = document.getElementById("testdiv");

testdiv.appendChild(para); 插入节点

var txt = document.createTextNode("Hello"); 创建文本

para.appendChild(txt); 将文本插入节点

13. 服务器在向XMLHttpRequest对象发出响应时,(AJAX在chrom浏览器须配置服务器, 否则有跨域问题)

request.readyState有5种: 0未初始化, 1正在加载, 2加载完毕, 3正在交互, 4完成;

request.responseText返回数据;

request.responseXML数据类型;

14. setTimeout("function", interval); => setTimeout(move(), 5000);

parseInt("39px") = 39