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