JavaScript DOM 编程艺术学习笔记（一）：静态标记

JavaScriptDOM编程艺术

学习笔记（一）：静态标记

DOM

• DOM脚本程序设计：涵盖了使用任何一种支持DOM API的程序设计语言去处理任何一种标记文档的情况。
• DOM是程序设计语言和标记文档之间的接口，它将文档表示成一棵节点树，每个节点都对应文档中的一个元素，以供程序设计语言处理。

---

网页的三个层次

• 结构层：HTML/XHTML-搭建文档结构
• 表示层：CSS-设置文档呈现效果
• 行为层：JavaScript/DOM-实现文档行为

---

对象

• 用户定义对象
• 内建对象：JavaScript语言里面的对象，如Array、Math、Date等。
• 宿主对象：浏览器提供的对象，如Window、Document等。

---

节点

• 元素节点：DOM树的骨架，每一个HTML标签都是一个元素节点。
• 文本节点：元素节点里面包含的文本内容。
• 属性节点：元素节点的属性单独看成一种节点，如：id、class属性。

注：一份文档中，每一个节点都是一个对象

---

DOM访问

1. 元素节点：

  element.getElementById("*id*")
  element.getElementByTagName("*tag_name*")
  element.getElementByClassName("*class_name*")

例1：document.getElementById(id), 在全文档搜索并返回ID值为id的元素；

例2：Jone.getElementByTagName(“chage”), 在Jone元素的子节点中，搜索元素title名字为”change”的元素，并返回一个数组。

2.属性节点：

element.getAttribute(attribute) 
element.setAttribute(attribute, value)

setAttribute函数中的attribute属性如果原element不存在，则首先创建该属性，再设置其中的值。

3. 文本节点：

node.nodeValue

注意：这里的node一定要是文本节点，它一般是一个元素几点的子节点。节点类型可以用node.nodeType来确定。元素节点值为1，属性节点值为2，文本节点值为3.

4. 子节点：

element.childNodes:返回全部子元素的数组
node.firstChild = node.childNodes[0]
node.lastChild = node.childNodes[node.childNoes.length - 1]

---

JavaScript设计原则

1. 平稳退化

考虑到浏览器不能加载JS的情况（如现阶段大多数的搜索引擎），用户仍能正常访问资源，只是损失了用户体验。

2. 渐进增强

从核心内容开始构建，然后逐渐加强内容。不应该用DOM技术或CSS来向网页上添加重要的内容。否则很难实现平稳退化。
例子：hij