JavaScript Dom编程艺术学习笔记2

本篇笔记是本书的第七、八、九章内容，前六章知识可查看JavaScript Dom编程艺术学习笔记1

• 第七章 动态创建标记
• 第八章 充实文档的内容
• 第九章 CSS-DOM

---

第七章 动态创建标记

本章内容：

1. 传统技术：document.write和innerHTML；
2. 深入剖析DOM方法：createElement、createTextNode、appendChild和insetBefore。

1.document.write和innerHTML

• document.write, 违背了“行为应该与表现分离”原则，应避免使用该方法
• innerHTML, 始于微软IE4浏览器，可用来读、写某给定元素里的HTML内容。需要把一大段HTML内容插入网页时，innerHTML更适用
• 一旦使用了innerHTML属性，它的全部内容将被替换掉

2.DOM方法

在DOM看来，一个文档就是一棵节点树。要在节点树上添加内容，就必须插入新的节点；要添加一些标记到文档，就必须插入元素节点。

• createElement方法：
  var para = document.createElement("p");，此时的p元素还不是DOM节点树的组成部分，这种情况称为文档碎片（document fragment）
• appendChild方法：
  把新节点加入节点树，parent.appendChild(child)

var testdiv = document.getElementById("testdiv");
  testdiv.appendChild(para);```
-  **createTextNode方法：**

var txt = document.createTextNode("Hello world");
para.appendChild(txt);```

• 以上例子思路顺序如下：

  1. 创建一个p元素节点；
  2. 创建一个文本节点；
  3. 把这个文本节点追加到第一步创建的p元素节点上；
  4. 把p元素节点追加到test.html文档中的一个元素节点上

• insertBefore()
  parentElement.insertBefore(newElement,targetElement)

  • 新元素：要插入的元素newElement
  • 目标元素：targetElement
  • 父元素：目标元素的父元素parentElement，targetElement的parentNode属性值就是父元素
  • 在DOM里，元素节点的父元素必须是另一个元素节点，属性节点和文本节点的子节点不允许是元素节点

• insertAfter()函数
  DOM本身未提供inserAfter方法，我们可以构造该函数：

function insertAfter(newElement,targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) { 
       parent.appendChild(newElement); 
    } else { 
        parent.insertBefore(newElement,targetElement.nextSibling); 
      }
}
//该函数构造思路可参考本书该章节
//同第六章构造的addLoadEvent()函数

---

第八章 充实文档的内容

1.两项原则

渐进增强(progressive enhancement)：总是从最核心的内容开始，根据内容使用标记实现良好的结构，然后逐步加强这些内容。这些增强工作既可以是通过CSS改进呈现效果，也可以是通过DOM添加各种行为。内容应该在刚开始编写文档时就要成为文档的组成部分。
平稳退化：渐进增强的实现必然支持平稳退化。缺乏必要的CSS和DOM支持的访问者仍然可以访问到核心内容。

2.显示“缩略语”列表

• for (variable in array)
  把数组的下标（键）临时赋值给变量。
• 和
  :缩略语，对单词或短语的简写形式的统称；
  :首字母缩写词
  HTML5中，已统一使用。
• 示例代码：
  通过注释可了解到一些知识点和思路

function displayAbbreviations(){
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) retrun false;
    //取得所有缩略词
    var abbreviations = document.getElementsByTagName("abbr");
    if (abbreviations.length < 1) return false;
    var defs = new Array();
    //遍历这些缩略词
    for(var i = 0; i

3.显示“文献来源连接表”

• 步骤：

  1. 遍历这个文档里所有的blockquote；
  2. 从blockquote元素提出去cite属性的值；
  3. 创建一个标示文本是source的链接；
  4. 把这个链接赋值为blockquote元素的cite属性的值；
  5. 把这个链接插入到文献节选的末尾

• 注意：
  编写DOM脚本时，一定要检查nodeType属性值。很多DOM方法只能用于元素节点，如果用在文本节点上就会出错。

• 示例代码：
  一些思路和知识点可参考注释

function displayCitations(){
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    var quotes = getElementsByTagName("blockquote");
    for(var i = 0; i < quotes.lentgh; i++){
        //如果没有cite属性，继续循环
        if(!quotes[i].getAttribute("cite")) continue;
        var url = quotes[i].getAttribute("cite");
        //变量url包含着将成为那个链接的href属性值的字符串
        var quoteChildren = quotes[i].getElementsByTagName("*");
        //如果没有元素节点，继续循环
        if(quoteChildren.length < 1) continue;
        //取得引用中的最后一个元素节点
        var elem = quoteCildren[quoteCildren.lentgh - 1];
        //elem变量包含着将成为那个链接在文档中的插入位置的节点
        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        link.setAttribute("href", url);
        var superscript = document.createElement("sup");
        superscript.appenChild(link);
        elem.appenChild(superscript);
    }
}

4.显示“快捷键清单”

accesskey属性可以把一个元素（如链接）与键盘某个特定的键关联在一起
步骤和前两小节类似，不再赘述，可参考这个书原文:)
关于基本键的约定俗成的设置可参考这里.

5.检索和添加信息

• 对文档现有信息进行检索，需要用到下列方法：
  getElementById
  getElementsByTagName
  getAttribute
• 把信息添加到文档里，需要使用下列方法：
  createElement
  createTextNode
  appendChild
  insertBefore
  setAttribute

---

第九章 CSS-DOM

1.三位一体的网页

浏览器的网页是由结构层（HTML/XHTML）、表现层（CSS）和行为层（JS&DOM）构成的共同体

2.style属性

style属性是一个对象，可用typeof验证。
需要引用一个中间带减号的CSS属性时，DOM要求使用驼峰命名法：
font-family -> element.style.fontFamily

3.何时用DOM脚本设置样式

3.1 根据元素在节点树里的位置设置样式
（1）通过CSS声明样式主要有三种：

• 为标签元素统一声明样式：

p{font-size: 1em;}

• 为有特定class属性的元素统一声明样式：

.fineprint{font-size: 0.8em;}

• 为有id属性的元素单独声明样式：

#intro{font-size: 1.2em;}

• 还可以根据元素的位置声明样式。

（2）构造获取“下一个元素节点”函数

function getNextElement(node) {
  if(node.nodeType == 1) {
    return node;
  }
  if (node.nextSibling) {
    return getNextElement(node.nextSibling);
  }
  return null;
}

3.2 根据某种条件反复设置某种样式
JavaScript特别擅长处理重复性任务，构造一个函数为表格添加斑马线效果，隔行设置就OK：
(1) 把文档里的所有table元素找出；
(2) 对每个table元素创建odd变量并初始化为false；
(3) 遍历这个表格里的所有数据行
(4) 如果变量odd的值是true，设置样式并把odd变量修改为false；
(5) 如果变量odd的值是false，不设置样式，但把odd变量修改为true。

function stripeTables() {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for (var i=0; i

3.3 响应事件
采用纯粹的CSS还是利用DOM来设置样式，需要考虑下面两点：

• 这个问题最简单的解决方案是什么；
• 哪种解决方案会得到更多浏览器的支持。

4.className属性

与其使用DOM直接改变某个元素的样式，不如通过JS代码去更新这个元素的class属性。

如果元素已经有了class，可把新的class设置值追加到className属性上去(intro的第一个字符是空格)：

elem.className += " intro"

需要给一个元素追加新的class时：

• 检查className属性的值是否为null
• 如果是，把新的class设置值直接赋值给className属性；
• 如果不是，把一个空格和新的class设置值追加到className属性上。

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}
//第一个参数是需要添加新class的元素（element），第二个是新的class设置值（value）

5.对函数进行抽象

示例：

function styleHeaderSiblings() {
  if (!document.getElementsByTagName) return false;
  var headers = document.getElementsByTagName("h1");
  for (var i=0; i

给改进后的函数styleElementSibling增加两个函数tag和theclass，参数变量tag和theclass代替原函数的字符串"h1"和"intro"。

function styleHeaderSiblings(tag, theclass) {
  if (!document.getElementsByTagName) return false;
  var elems = document.getElementsByTagName("tag");
  for (var i=0; i