JavaScript DOM编程艺术(第2版)读书笔记
2013-10-18 16:46
204 查看
文件对象模型（Document Object Model，简称DOM）：DOM-Core、HTML-DOM、CSS-DOM
文档document --> 对象object --> 模型Model(DOM树)；
DOM节点(node)包括:元素节点(element node)、文本节点（text node）、属性节点（attribute node）,例如：元素<p title="属性">内容</p>；
通过css告诉浏览器如何显示一份文档的内容，可以看做是一颗节点树，子继承父实现；区分元素方法：id属性和class属性；
DOM获取元素节点的方法：
元素id（getElementById）返回一个对象独一无二的、
标签名字（getElementsByTagName）返回一个对象数组、
类名字（getElementByClassName）HTML5 DOM新增的，可以用自定义函数来使用；
每个节点都是一个对象；
获取节点属性 object.getAttribute(attribute) 只能通过元素节点对象调用、
var paras = document.getElementById("p");
paras.getAttribute("title");
设置节点属性 object.setAttribute(attribute,value) 只能通过元素节点对象调用，
paras.getAttribute("title","新属性");
在浏览器的查看源文件里面并没有看到属性更新，因为DOM的工作模式：先加载文档的静态页面-再动态刷新页面-动态刷新不影响文档的静态内容，这正是DOM的真正威力：对页面内容进行刷新却不需要再浏览器里刷新页面。
如果正确的使用了javascript，在没有javascript的情况下网页还能正常浏览，基本的操作能完成，叫平稳退化。例子如下：
function popUp(winURL){ window.open(winURL,"popup","width=320,height=480"); }
<a href="javascript:popUp('http://www.baidu.com/');">Example</a>伪协议,
<a href="#" onclick="popUp('http://www.baidu.com/');">Example</a>内嵌事件处理函数,都不是很好的选择,下面这个才符合平稳退化：
<a href="http://www.baidu.com/" onclick="popUp(this.href; return false;);">Example</a>。
向css学习分离javascript，例子参考源码。
性能考虑：
尽量少访问DOM和尽量减少标记：不管什么时候，只要查询DOM中的某些元素，浏览器就会搜索整个DOM树，从中查找可能匹配的元素，所以要缓存待查找的DOM中的元素，如：var lnks = document.getElementsByTagName("a");后面直接使用变量lnks；
合并和放置脚本：合并多个脚本为一个，放置</body>上面；
压缩脚本：scriptName.min.js这样区分压缩的未压缩的。
共享onload事件，第6章里面。
Ajax应用主要依赖于服务器端处理，而非客户端处理，要做到平稳退化。
在需要对文档里的现有信息进行检索时，以下的DOM方法最有用：getElementById,getElementsByTagName,getAttribute；
在需要把信息添加到文档里去时，以下的DOM方法最有用：createElement, createTextNode, appendChild, inserBefore, setAttribute。
请记住：JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容。
web页面构成：结构层（HTML/XHTML创建）、表示层（CSS负责如何呈现）、行为层（javaScript和DOM实现如何响应事件）（以及浏览器中的JavaScript API：cookie,window等）
获取DOM样式 element.style.color、element.style.fontSize 分别对应css中的样式设置DOM样式 element.style.color="red"
只要有可能，就应该选择更新className属性，而不是去直接更新style对象的相关属性。
把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象；用参数变量代替硬编码常数。
实现动画效果：
setTimeout()让函数经过某个时候在执行，clearTimeout()取消"等待执行"队列里的某个函数，
variable = setTimeout("function",interval); clearTimeout(variable)
现在如果用HTML5就要用到一个开源的JavaScript库Modenizr，不会给你添加浏览器不支持的特性。
<html class="no-js">...
在head中添加<script src="modernizr-1.5.min.js"></script>
文档document --> 对象object --> 模型Model(DOM树)；
DOM节点(node)包括:元素节点(element node)、文本节点（text node）、属性节点（attribute node）,例如：元素<p title="属性">内容</p>；
通过css告诉浏览器如何显示一份文档的内容，可以看做是一颗节点树，子继承父实现；区分元素方法：id属性和class属性；
DOM获取元素节点的方法：
元素id（getElementById）返回一个对象独一无二的、
标签名字（getElementsByTagName）返回一个对象数组、
类名字（getElementByClassName）HTML5 DOM新增的，可以用自定义函数来使用；
每个节点都是一个对象；
获取节点属性 object.getAttribute(attribute) 只能通过元素节点对象调用、
var paras = document.getElementById("p");
paras.getAttribute("title");
设置节点属性 object.setAttribute(attribute,value) 只能通过元素节点对象调用，
paras.getAttribute("title","新属性");
在浏览器的查看源文件里面并没有看到属性更新，因为DOM的工作模式：先加载文档的静态页面-再动态刷新页面-动态刷新不影响文档的静态内容，这正是DOM的真正威力：对页面内容进行刷新却不需要再浏览器里刷新页面。
如果正确的使用了javascript，在没有javascript的情况下网页还能正常浏览，基本的操作能完成，叫平稳退化。例子如下：
function popUp(winURL){ window.open(winURL,"popup","width=320,height=480"); }
<a href="javascript:popUp('http://www.baidu.com/');">Example</a>伪协议,
<a href="#" onclick="popUp('http://www.baidu.com/');">Example</a>内嵌事件处理函数,都不是很好的选择,下面这个才符合平稳退化：
<a href="http://www.baidu.com/" onclick="popUp(this.href; return false;);">Example</a>。
向css学习分离javascript，例子参考源码。
性能考虑：
尽量少访问DOM和尽量减少标记：不管什么时候，只要查询DOM中的某些元素，浏览器就会搜索整个DOM树，从中查找可能匹配的元素，所以要缓存待查找的DOM中的元素，如：var lnks = document.getElementsByTagName("a");后面直接使用变量lnks；
合并和放置脚本：合并多个脚本为一个，放置</body>上面；
压缩脚本：scriptName.min.js这样区分压缩的未压缩的。
共享onload事件，第6章里面。
Ajax应用主要依赖于服务器端处理，而非客户端处理，要做到平稳退化。
在需要对文档里的现有信息进行检索时，以下的DOM方法最有用：getElementById,getElementsByTagName,getAttribute；
在需要把信息添加到文档里去时，以下的DOM方法最有用：createElement, createTextNode, appendChild, inserBefore, setAttribute。
请记住：JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容。
web页面构成：结构层（HTML/XHTML创建）、表示层（CSS负责如何呈现）、行为层（javaScript和DOM实现如何响应事件）（以及浏览器中的JavaScript API：cookie,window等）
获取DOM样式 element.style.color、element.style.fontSize 分别对应css中的样式设置DOM样式 element.style.color="red"
只要有可能，就应该选择更新className属性，而不是去直接更新style对象的相关属性。
把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象；用参数变量代替硬编码常数。
实现动画效果：
setTimeout()让函数经过某个时候在执行，clearTimeout()取消"等待执行"队列里的某个函数，
variable = setTimeout("function",interval); clearTimeout(variable)
现在如果用HTML5就要用到一个开源的JavaScript库Modenizr，不会给你添加浏览器不支持的特性。
<html class="no-js">...
在head中添加<script src="modernizr-1.5.min.js"></script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js键盘事件全面控制详解【转】
- JS基础知识（基本类型 引用类型）
- solr 返回的json数据
- JSON对象和字符串之间的相互转换
- js刷新页面方法大全
- javascript php 之间传递 中文 避免乱码
- javascript php 之间传递 中文 避免乱码
- Processing.js
- js获取IE版本，while代码很特别
- JavaScript 之 走马灯
- 【笔记】安卓不支持JSON包
- 关于form+iframe跨域后的js回调处理
- extjs的调试方法
- ExtJS至propertyGrid 自动排序及设置editor
- javascript - 得到鼠标点击的相对位置
- js函数大全
- Extjs - JSON数据转换
- 用JavaScript(js)对时间格式化
- JS截取字符串常用方法整理及使用示例
- 关于js中字符串replace方法的第二参数为function时，参数的顺序问题分析