JavaScript Dom编程艺术学习笔记2

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

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

第七章动态创建标记

本章内容：

传统技术：document.write和innerHTML；
深入剖析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<abbreviations.lentgh; i++){
		var current_abbr = abbreviations[i];
		//解决IE兼容问题
		if(current_abbr.childNodes.lentgh < 1) continue;
		//得到当前缩略语的解释文字，即title属性的值
		var definition =current_abbr.getAttribute("title");
		//得到文本节点的nodeValue属性并把它赋值给变量key,即缩略短语本身
		var key = current_abbr.lastChild.nodeValue;
		//把key用作数组元素的下标（键），definition用作数组元素的值
		//比如defs数组第一个元素的下标是W3C，值是World Wide Web Consortium
		defs[key] = definition;
	}
	//创建定义列表
	var dlist = document.createElement("dl");
//对于defs关联数组里的每个键，把它的值赋给变量key
	for(key in defs){
		var definition = defs[key];
		//创建定义标题
		var dtitle = document.createElement("dt");
		var dtitle_text = document.createTextNode(key);
		dtitle.appendChild(dtitle_text);
		//create the definition description
		var ddesc = document.createElement("dd");
		var ddesc_text = document.createTextNode(definition);
		ddesc.appenChild(ddesc_text);
		dlist.appenChild(dtitle);
		dlist.appenChild(ddesc);
	}
	//IE兼容性
	if(dlist.childNodes.lentgh < 1) return false;
	var header = document.createElement("h2");
	var header_text = document.createTextNode("Abbreviations");
	header.appenChild(header_text);
	document.body.appendChild(header);
	document.body.appendChild(dlist);
}

addLoadEvent(displayAbbreviations);

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<tables.length; i++) {
    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j++) {
      if (odd == true) {
        rows[j].sytle.backgroundColor = "#fcc";
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}
addLoadEvent(stripeTables);

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<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
    addClass(elem,"intro");
  }
}

给改进后的函数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<headers.length; i++) {
    var elem = getNextElement(headers[i].nextSibling);
    addClass(elem, theclass);
  }
}
addLoadEvent(function(){
  styleElementSibling("h1", "intro");
})

posted @ 2016-07-30 12:34 lusg 阅读(321) 评论(0) 编辑收藏举报

刷新页面返回顶部

lusg

刘高兴的前端之路

JavaScript Dom编程艺术学习笔记2

第七章动态创建标记

1.document.write和innerHTML

2.DOM方法

第八章充实文档的内容

1.两项原则

2.显示“缩略语”列表

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

4.显示“快捷键清单”

5.检索和添加信息

第九章 CSS-DOM

1.三位一体的网页

2.style属性

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

4.className属性

5.对函数进行抽象

公告

lusg

刘高兴的前端之路

JavaScript Dom编程艺术学习笔记2

第七章 动态创建标记

1.document.write和innerHTML

2.DOM方法

第八章 充实文档的内容

1.两项原则

2.显示“缩略语”列表

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

4.显示“快捷键清单”

5.检索和添加信息

第九章 CSS-DOM

1.三位一体的网页

2.style属性

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

4.className属性

5.对函数进行抽象

公告

第七章动态创建标记

第八章充实文档的内容