第一章《JavaScript简史》

1、JavaScript是一种脚本语言，通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行，它需要由Web浏览器进行解释和执行。

2、DOM是一套对文档的内容进行抽象和概念化的方法，它是一种API（应用编程接口）。

W3C对DOM的定义是：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。

第二章《JavaScript语法》

1、驼峰格式（camel case）命名：删除中间的空白（下划线），后面的每个新鲜单词改用大写字母开头.如：var mgMood="happy"

2、给新元素给出下标时，不需要局限于使用整数数字，也可以使用字符串。如：

var good=Array();

good["name"]="John";

good["year"]="1990";

3、条件语句的求值结果永远是一个布尔值，即true和false。

4、==和===

==：不严格相等，比如用==的情况下，false和空值是相等的。相反是！==；

===严格相等，不仅比较值是否相等，还会比较变量的类型。相反是！===；

5、逻辑操作符的对象是布尔值，每个逻辑操作数返回一个布尔值true或者是false；逻辑非(!)操作符只能作用于danger逻辑操作数。

6、if和while的唯一区别：

当给定条件的求值结果=true时：while语句{}里的代码就会反复的执行下去，直到返回了false；

if语句，{}里的代码只能执行一次，不能重复执行；

7、for循环的两大优势：

1）控制结构更加清晰，与循环相关的所有内容都包含在for语句的圆括号部分；

2）常见的用途之一：遍历数组

8、对象：就是由一些属性和方法组合在一起而构成的一个数据实体，它是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性(property)、方法(method)

属性——隶属于某个特定对象的变量；

方法——只有某个特定对象才能调用的函数；

9、对象的类型：

　　1）用户自定义对象（user-defied object）：由程序员自行创建的对象;

　　2）内建对象（native object）：JavaScript提供的一系列预先定义好的，内建在javascript语言里、拿来就可以用的对象。例如：Array、Math、Date等

　　3）宿主对象：JavaScript有一些其他已经预定好的对象，这些对象不是由JavaScript的语言本身，而是由它的运行环境（具体到web应用，这个环境就是浏览器）提供的预定义对象，就是宿主对象。 简单说，就是由浏览器提供的对象：

　　——Form、 Image、 Element等。通过这些对象可以获得关于网页上表单、图像和各种表单元素的信息；

　　——document对象。可以获得网页上的任何一个元素的信息

第三章《DOM》

　　1、何为DOM？  D：document(文档);    O：object(对象)     M：model(模型);   window对象对应着浏览器窗口本身，这个对象的属性和方法通常成为DOM。document对象的主要功能就是处理网页内容;

　　2、节点（node）：文档中的一个连接点，一个文档是由一些节点构成的集合;节点有三种：元素节点、文本节点、属性节点;

　　　　1）元素节点(element node)：DOM的原子是元素节点，标签的名字就是元素的名字。元素可以包含其他的元素，HTML中只有节点树的根元素<html>元素没有被包含;

　　　　　　如：<p id="box" class="pox">hello</p>  中的元素名字“p”

　　　　2）文本元素(text node)：文本节点总是被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点;

　　　　　　如：<p id="box" class="pox">hello</p>  中的“hello”

　　　　3）属性节点(attribute node)：属性节点用来对元素做出更具体的描述，所以属性节点总是被包含在元素节点中。并非所有元素走包含着属性，但所有属性都被元素包含;

　　　　　　如：<p id="box" class="pox">hello</p>   中的id属性

　　3、DOM中获取元素的三种方法:

比较 getElementById(通过属性ID获取) getElementByTagName(通过标签名获取) getElementByClassName(通过类名获取)
返回元素 返回1个对象，  返回一个数组  返回一个数组
参数个数 1个 1个（可以使通配符“*”） 1个
语法 getElementById（“id”） getElementByTagName("tag") getElementByClassName("class")
实例 getElementById（“box”） getElementByTagName("p")  getElementByClassName("pox")

　　　　　　　　

几点注意：

　　1）即使在整个文档，只有一个符合选择的标签。getElementByTagName也会返回一个数组，这个数组的长度是1;

　　2）getElementByClassName中要指定多个类名，要在字符串参数中用空格分隔,且类名的顺序不对搜索的元素有任何影响，只要有元素包含搜索的类名，就会被选中：

　　　　例如：getElementByClassName("pox ppox");

　　3)getElementByClassName在新老浏览器上的兼容：

　　　　function getElementByClassName(node,classname){

　　　　　　if(node.getElementByClassName){

　　　　　　　　//使用现有方法

　　　　　　　　retrun node.getElementByClassName(classname);

　　　　　　}else{

　　　　　　　　var results=new Array();

　　　　　　　　var elems=node.getElementByTagName("*");

　　　　　　　　for(var i=0;i<elems.length;i++){

　　　　　　　　　　if(elems[i].classname).indexOf(classname)!=-1{

　　　　　　　　　　　　results[results.length]=elems[i];

　　　　　　　　　　}

　　　　　　　　}

　　　　　　　　return results;

　　　　　　}

　　　　}

　　//这个getElementByClassName函数接受两个参数，第一个node表示DOM树中的搜索起点;第二个classname就是要搜索的类名;

4、获取和设置属性方法

　　1）获取属性方法：getAttribute

　　　　getAttribute方法不属于document对象，所以不能通过document对象调用，只能通过元素节点调用:

　　　　例：搜索p里面的title，如果存在，就打印出来;

　　　　var paras=document.getElementByTagName("p");

　　　　for(var i=0;i<paras.length;i++){

　　　　　　var title_text=paras[i].getAttribute("title");

　　　　　　if(title_text)    alert(title_text);

　　　　}

　　2）设置属性方法：setAttribute

　　　　setAttribute也只能用于元素节点。

　　　　例：修改p元素的title，并打印新的title

　　　　　　<p id="box" title="text">hello</p>

　　　　　　//修改如下

　　　　　　var pp=dpcument.getElementById("box");

　　　　　　pp.setAttribute("title","shopping");

　　　　　　alert(pp.getAttribute("title");

　　　　注意：1）如果setAttribute用在一个本身就有这个属性的元素节点上，这个属性就会被覆盖掉;

　　　　　　　2）setAttribute做出的修改不会反映在文档本身的源代码里面。原因是：这是DOM的工作模式，即先加载静态文档，再动态刷新;

第四章 《案例研究：javascript 图片库》

　　1、想改变某个Input元素的value属性时，这两种方法等价：element.value="the new value"  =  element.setAttribute("value","the new value")

　　2、事件处理函数：

　　　　语法：event="javascript statement(s)"       例如：onclick="showPic(this)"

　　　　作用：在特定事件发生时，调用特定的javascript代码。

　　　　工作机制：在给某个元素添加了事件处理函数后，一旦事件发生，相应的javascript代码就会得到执行。被调用的javascript代码可以返回一个值，这个值将被传递给那个事件处理函数。 例如：我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的javascript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段javascript代码返回的值是true，onclick事件处理函数就认为“这个链接被点击了”;繁殖，返回的值是false，onclick事件处理函数就认为“这个链接没有被点击”。

　　3、childNodes属性：childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：element.childNodes

　　　　　　　　　　　 childNodes属性返回的数组包含元素节点等所有类型的节点。在文档里，几乎每一样东西都是一个节点，包括空格和换行符。

　　4、nodeType属性：用node.nodeType语法来获取节点的nodeType属性，例如：alert(body_element.nodeType);

　　　　　　　　　　　nodeType属性有12种可取值，但是只有3种实用：

　　　　　　　　　　　　　　元素节点的nodeType属性值：1

　　　　　　　　　　　　　　属性节点的nodeType属性值：2

　　　　　　　　　　　　　　文本节点的nodeType属性值：3

　　5、nodeValue属性：该属性用于获取（和设置）一个文本节点的值：node.nodeValue

　　　　例如：alert(description.nodeValue);

　　6、firstChild 属性：用来访问childNodes数组的第一个元素。这两种写法等价：

　　　　node.firstChild  = node.childNodes[0]

7、lastChild属性：用来访问childNodes数组的最后一个元素：node.lastCild

第五章《最佳实践》　　1、

《JavaScript Dom编程艺术》（第二版）的更多相关文章

  1. JavaScript 高级程序设计第二版

    20.4 部署 20.4.1 构建 构建过程始于在源控制中定义用于存储文件的逻辑结构.最好避免使用一个文件存放所有的JavaScript,遵循以下面向对象语言中的典型模式:将每个对象或自定义了类别分别 ...

  2. JavaScript 高级程序设计 第二版

    function outputNumbers(count) {     (function () {         for (var i =0;i < count; i++) {        ...

  3. javascript高级程序设计第二章知识点提炼

    这是我整理的javascript高级程序设计第二章的脑图,内容也是非常浅显与简单.希望您看了我的博客能够给我一些意见或者建议.

  4. javascript高级程序设计---第二、三章

    在HTML中引用javaScript javascript的几个属性  type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 ...

  5. javascript高级程序设计第二章

    看后总结: 1.js代码用得最多的两种加载方式: a)外部文件形式:<script type="text/javascript" src="jquery.min.j ...

  6. 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

    1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 lan ...

  7. 《JavaScript高级程序设计》(第二版)

    这本书的作者是 Nicholas C.Zakas ,博客地址是 http://www.nczonline.net/ ,大家可以去多关注,雅虎的前端工程师,是YUI的代码贡献者,可想而知这本书得含金量, ...

  8. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  9. JavaScript高级程序设计（第三版）学习笔记20、21、23章

    第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...

  10. （读书笔记）函数参数浅析-JavaScript高级程序设计（第3版）

    ECMAScript函数不介意传递的参数个数,因为在其内部是用一个数组进行表示的.在函数体内可以通过arguments对象来访问这个参数数组,就像我们正常访问数组一样处理. arguments对象只是 ...

随机推荐

  1. java正则表达式获得html字符串中<img src>的src中的url地址

    /** * 得到网页中图片的地址 */ public static Set<String> getImgStr(String htmlStr) { Set<String> pi ...

  2. 48. 二叉树两结点的最低共同父结点(3种变种情况)[Get lowest common ancestor of binary tree]

    [题目] 输入二叉树中的两个结点,输出这两个结点在数中最低的共同父结点. 二叉树的结点定义如下:  C++ Code  123456   struct BinaryTreeNode {     int ...

  3. jQuery根据name取input值问题

    最近做项目用$("input[name=inputName]").val();去取input值得时候发现取值有问题:总是取第一次输入的值,如果在同一个页面不发生表单提交,然后将in ...

  4. Android导包导致java.lang.NoClassDefFoundError

    摘要: SDK方法总数是不能超过65k的.是否也引入其他的三方库,导致总数超过限制.超出限制会导致部分class找不到,引发java.lang.NoClassDefFoundError.解决方法:近日 ...

  5. C语言简单文法

    <源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...

  6. Java_File类讲解_打印目录树状结构_递归算法

    package cn.xiaocangtian.testFile; import java.io.File; public class FileTree { public static void ma ...

  7. BFS_Maze_求解迷宫最短路径

    /* 10 10 #.######.# ......#..# .#.##.##.# .#........ ##.##.#### ....#....# .#######.# ....#..... .## ...

  8. microsoft office professional plus2013激活

    激活工具一般使用KMS8,KMS8不支持零售版的激活, 而office professional plus2013零售版,需要先转化为VOL版 需要以下两步: 1.将word转化为vol版 链接: h ...

  9. Lintcode 175. 翻转二叉树

    -------------------- 递归那么好为什么不用递归啊...我才不会被你骗...(其实是因为用惯了递归啰嗦的循环反倒不会写了...o(╯□╰)o) AC代码: /** * Definit ...

  10. MySQL Workbench中修改表字段字符集

    背景介绍重要性必要性作用意义略过,开门见山: 用SQL语法修改字符集,可以参考此篇: http://www.cnblogs.com/HondaHsu/p/3640180.html MySQL提供图形界 ...