《Javascript DOM编程艺术》阅读笔记二

本篇笔记是对于《Javascript DOM编程艺术第2版》的笔记！第二版哦~
第二版在第一版的基础上经过了扩展，涵盖了HTML5、Ajax和JavaScript库(尤其是jQuery)；且这一版以介绍库的附录代替了上一版介绍DOM方法的附录。（由Jerrymy Keith写的序得知）
编写代码时，切记“渐进增强，平稳退化”
《Javascript DOM编程艺术》阅读笔记一

第八章_充实文档的内容笔记

• 引用Body标签
  • DOM Core方法
  • HTML_DOM方法
• 缩略语列表
• 文献来源链接
• 快捷键清单(accessibility)

疑惑，145页中的函数代码清单中写了“遍历链接保存访问键得到akeys数组，而后遍历访问键”这里为什么要再写一个for去遍历访问键呢？直接写在上面遍历链接的for不可以吗？不美观？不易阅读？还是不能这样写？

第九章_CSS-DOM笔记

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

element.style.property;//property为style对象的属性，注意⚠️当CSS属性包含连字符（-）时需转换为驼峰命名法
// style属性只能返回内嵌样式
// style对象的各个属性都是可读写的
// style对象的属性值永远是一个字符串

一.CSS声明样式方法集合

1. 标签元素

p{
	font-size: 1em
}

2. 有特定class属性的所有元素

.classname{
	font-size: .8em
}

3. 有独一无二id属性的元素

#id{
	font-size:1.2em
}

4. 类似属性的多个元素

input[type*="text"]{
	font-size:1.2em;
}

6. 根据元素位置

p:first-of-type{
	font-size:2em;
	font-weight:bold;
}

二.通用方法之获取下一个元素节点

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

三.响应事件

CSS	DOM
:hover(连接< a >样式比较支持，且只有部分浏览器有效果)	onmouseover

四.class属性值追加(可用于通过javascript代码更新元素class属性直接改变某个元素的样式)

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

• javaScript特别擅长处理重复性任务！！！
• 对函数进行抽象

第十章_用JavaScript实现动画效果笔记

let variable = setTimeout("function",interval);// 延时执行
clearTimeout(variable);// 清除指定延时

parseInt(string);// 字符串转数值（整数）
parseFloat(string);// 字符串转浮点数

element.property = value;// 对element元素创建property属性，且对该属性赋值为value

Math.ceil(number);// 返回不小于number的值的最小整数
Math.floor(number);// 返回不大于number的值的值大整数
Math.round(number);// 四舍五入，取整数

• 添加安全检查
• 减少硬编码

第十一章_HTML5笔记

• 结构层 超文本标记语言(HTML)

• 样式层 层叠样式表(CSS)

• 行为层 JavaScript和文档对象模型(DOM)
  HTML5新标记规范原文->HTML5新标记规范简体中文
  Modernizr工具

• Canvas

• 音频和视频，参考链接，参考链接2

这章觉得挺受用的～可以看书，笔记就不过多记录📝了～简单讲了些控件和播放器（标准播放控件），有机会可以根据这个例子和参考链接不断完善优化出一个自己满意的播放器。

第十二章_综合实例笔记

站点结构

• /images 保存要用的图片
• /styles 保存CSS文件
• /scripts 保存JavaScript文件

页面结构

设计

• 颜色
• 布局
• 板式

表单

创建加载图像

正则表达式

• 如果本身包含斜杠或其他特殊字符，必须使用反斜杠对其转移
• + 前面的模式重复一次或多次
• * 前面的模式重复零或多次
• \s 任意空白字符
• \S 任意非空白字符，包括回车符和换行符
• 更多参考文档

压缩代码

谷歌ClosureCompiler

附录_JavaScript库笔记

选择器
处理事件
Ajax、Prototype、JQuery
动画与效果

第一版附录(非原书📖第一版整理)

DOM方法和属性

1. 创建节点

reference = document.createElement(element);
reference = document.createTextNode(text);

2. 复制节点

reference = node.cloneNode(deep);// deep[true|false]是否复制原节点的所有属性

3. 插入节点

reference = element.appendChild(newChild);
reference = element.insertBefore(newNode,targetNode);

4. 删除节点

reference = element.removeChild(node);//保证兼容性，需判断元素节点的节点类型为1再执行删除操作

元素类型	节点类型
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

5. 替换节点

reference = element.replaceChild(newChild,oldChild);

6. 处理节点

element.setAttribute(attributeName,attributeValue);

7. 查找节点

attributeValue = element.getAttribute(attributeName);
element = document.getElementById(id);
elements = document.getElementsByTagName(tagName);
booleanValue = element.hasChildNodes();

8. 节点的属性

name = node.nodeName;
value = node.nodeValue;

9. 遍历节点树

nodeLists = node.childNodes;
node.childNodes.length;
reference = node.firstChild;
reference = node.lastChild;
reference = node.nextSibling;
reference = node.parentNode;
reference = node.previousSibling// 返回给定节点的前一个子节点；只读属性

7+. document.getElementsByName(name);
document.getElementsByClassName(name);
6+. document.createAttribute(attrName);
element.removeAttribute(attrName);

=====================================================================
在光怪陆离的现实世界中，你稍不留神就会误入歧途，掉进一味标新立异的泥淖(nao)里。
进一步理解；一个技能只学会了皮毛是没有意义的。