javascript dom 编程艺术读书笔记

阅读过程

浏览了一遍第一章，讲述的是javascript的历史。然后跳过第二章来到第三章。 认真阅读了3~10章，上面出现的代码全部自己敲了一遍书上所有的代码。对第 11章HTML5简单浏览了一遍。最后一章综合示例也跟着书上的步骤实现了一遍， 但contact页面没有完善（个人觉得这部分可能后端实现较多）。对本书的附录 关于javascript库有了一定了解。 本书最后综合示例的的网上链接
自己copy的代码

---

本书中基本概念

DOM

• D document
• O object
• M Model / Map

dom-->节点树 其中的关系为父、子、兄弟

• 元素节点 tags elements
• 文本节点 <tag>中包含的文本：<p>text node</p>
• 属性节点 <tag>中的属性：<p title="attribute"></p>

获取元素的方法

• getElementById("id") 返回一个有id值的元素节点对应的对象
• getElementsByTagName("tag") 返回给定标签名的一个对象数组
• getElementsByClassName("class") 返回相同类名的元素的数组

获取和设置属性

• getAttribute("attribute") 元素节点调用返回属性值
• setAttribute("attr","value") 设定元素节点的属性值

事件处理函数

_onclick 、onmouseover 、onmouseout 等 dom中通过元素对象调用来实现某一功能

elementNode.onclick = function() {code};

__onload__事件 页面加载时调用--让html文件加载完成后再调用javascript 函数

window.onload = functionName;

编写一个函数实现多个函数共同加载

function addLoadEvent(func) {
	var oldonload = window.onload; //现有处理的函数的值存入变量
	if (typeof window.onload != 'function') {
		window.onload = func; // 若处理函数没有绑定新的函数，直接添加
	} else {
		window.onload = function() {
			oldonload(); // 把新函数加入到现有函数的末尾
			func();
		}
	}
}

关于节点的一些概念

childNodes 获取任何一个元素的所有子元素，返回一个数组
firstChild 元素的第一个子元素节点或者文本节点
lastChild 元素最后一个子元素节点或者文本节点

nodeType节点属性

• 元素节点 1
• 属性节点 2
• 文本节点 3

nodeValue文本节点值

var elem = document.getElementsByTagName("h1")[0];
elem.firstChild.nodeValue = "nodeValue";

nodeName节点名称
nodeName总是返回大写字母的值，即使在html文件中为小写，应用时

elementNode.nodeName == "IMG";//判断是不是img标签

nextSibling兄弟节点 node.nextSibling

添加元素

• createElement 创建元素节点 document.createElment("p")
• createTextNode 创建文本节点 document.createTextNode("Hello")
• appendChild 添加到父节点的子节点(last) parent.appendChild(child)
• insertBefore 插入到一个元素节点之前 parentElement.insertBefore(newElement, targetElemment)
  parentElement为目标元素的父元素
• insertAfter 把节点插入到另一个节点之后, 函数实现如下
  一般步骤(如添加一个段落)

1. 创建一个p元素节点
2. 把这个p元素节点追加到文档中的一个元素节点上
3. 创建一个文本节点
4. 把这个文本节点追加到刚才创建的那个p元素节点

function insertAfter (newElement, targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}

className添加class属性
element.setAttribute("class","value")
也可以用element.className = "value"
但元素本身class属性可能有值的，故可这样实现

element.className += " value" //value前有一空格为了分离不同的属性值

也可以自定义addClass函数实现添加class属性

function addClass(element, value) {
	if (!element.className) {
		element.className =  value;
	} else {
		newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

关于实现javascript 与 HTML 标记分离

将结构与行为分离，创建一文件夹scripts存放js文件在，html中通过
<script src="scripts/file.js"> </script>调用。

1. 对标签中的事件响应，可以通过javascirpt实现，从而分离

<a href="images/bb.jpg" onclick="showPic(this)"; return false>BII</a>
//href添加文件链接为了实现平稳退化，当事件响应函数不工作时，页面依然显示图片  
//return false 为了防止用于被带到当前链接的窗口
//下面在javascript脚本中实现了onclick事件
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
	links[i].onclick = function() {
		return !showPic(this); //当showPic函数返回TRUE，取反后为false,浏览器不会打开此链接。
		//如果函数返回返回false,那么认为图片没有更新，于是返回true以允许默认行为发生
	}
}

2. 对于html文件中一段内容只是服务于特殊的功能，可以将这段写在脚本中实现分离
   像html 文件中的动态显示和略缩语列表

3. 三位一体的网页

• 结构层
• 表示层
• 行为层

通过<link>标签插入css样式，通过<script>标签插入script脚本 **何时该使用dom设置样式---表示层实现

• 元素的位置css不易定位
• 条件反复的定位，如表格的奇偶行
• 事件的响应

书中常用技术

1. 对象检测
   为了防止浏览器不支持某dom方法，需进行检测

if (!document.getElementByID) return false;

对于获取的元素是否存在

if (!document.getElementById("id")) return false;

对于部分元素不包含id属性，可跳过此循环

if (!document.getElementById("id")) continue;

2. 变量处理
   将获取的元素节点定成变量

var articles = document.getElementsByTagName("article");

为了改变变量的作用域，可以绑定在属性上扩大作用域

var links = nav.getElementsByTagName("a");
var sectionId = links[i].getAttribute("href").split("#")[1];
links[0].destination = sectionId;

3. 空格与换行符充当了文本节点

<blockquote cite="www.sds.com">
    <p>
    A platform
    </p>
</blockquote>

var quotes = document.getElementsByTagName("blockquote");
var elem = quotes[0].lastChild;

p节点是blockquote的最后一个元素节点，但在</p>标签和</blockquote>标签之间还存在着一个换行符
浏览器会把换行符解释为一个文本节点，这样一来lastChild属性就是一个文本节点
然而对于空格也是一样的，同样被认为是文本节点
对此可以这样解决

var quoteElements = quotes[0].getElementsByTagName("*"); //返回其所有的**元素节点**
var elem = quoteElements[quoteElements.length - 1];
//也有支撑lastElementChild
var elem = quotes[0].lastElementChild;