接下来项目需要网页相关知识，故在大牛的指引下前来阅读本书。

记录方式：本书分四部分阅读，完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西，浏览的童鞋看着指南可以跳过一些不必要的坑~

当前水平：HTML&CSS&JS基本掌握，能在阅读文档以及Google查找的情况下完成前端代码编写，但是学习不深，HTML5&CSS3新特性、JS基础&框架皆不熟悉

读书目的：了解DOM概念并通过训练熟悉掌握，了解JS特性

博客目的：督促自己学习并记录下过程

博客编写时读书进度：第6章完结

　　阅读规划：

　　　　浏览目录之后，总结该书学习思路大致如下(其实就是生搬目录)：

　　　　　　简史-》最基础语法-》DOM-》动态标记的创建-》充实文档的内容（不懂照抄）-》CSS DOM-》JS动画-》HTML5特性简介

　　　　　　456这三章以图片库为练习项目来具体讲解程序优化、分离、兼容等问题，程序比较简单，了解结果之后可以自己写完再与书中的对比

　　　　　　12章为综合实例，尚未了解

　　开始阅读：

　　　　一、简史：

　　　　　　导读：基本概念

　　　　　　内容：

　　　　　　　　DOM概念：一套对文档的内容进行抽象&概念化的方法, 亦是一种得到共同认可的基本约定。

　　　　　　　　DOM标准化作用：可以让 任何一种Programming Language 对 使用任何一种标记语言所编写出来的文档  进行操控！（json&xml&xaml之类的）

　　　　　　　　浏览器引擎：　WebKit(Safari & Chrome) 、 Gecko(Firefox)

　　　　　　思考：至此，DOM的概念还是不清晰，知道DOM将文档划分层级（或说是树）来方便文档的操作，但是在浏览器上的表现和作用体现在哪呢？

　　　　二、最基础语法：

　　　　　　导读：最基础的语法，所以只是节选一些觉得之前不太了解的

　　　　　　内容：

　　　　　　　　1、数组初始化有多种方式：　

　　　　　　　　var array1 = Array();    //无长度空数组

　　　　　　　　var array2 = Array(4);  //有长度空数组

　　　　　　　　var array3 = [];           //无长度空数组

　　　　　　　　var array4 = ["A","B"];  //普通数组

　　　　　　　　2、用对象来代替数组将大大提升可读性：

　　　　　　　　var a={}

　　　　　　　　a.first = "xiaoming";

　　　　　　　　a.second = "qixi";

　　　　　　　　3、对象分为：内建对象、宿主对象、用户自定义对象（同上,这本书说读者自己玩所以不介绍）

　　　　　　　　　　内建对象:就是一些JS已经定义好的对象，有学过Java的童鞋可以把这货当做 Java的类 ,就是 System.currentTimeMillis & new Person().year 这样的东西

　　　　　　　　　　宿主对象:不是由JS提供，而是由代码运行环境提供（也就是浏览器！），有Form、Image、Element以及document(JS大佬)等

　　　　　　思考：看完本章主要收获是在 对象 方面，JS的document原来是属于宿主对象的！那window呢？

　　　　　　思考答复：

　　　　　　　　本书3.2有讲到window：

　　　　　　　　　　window对象是宿主对象 中 最基础的对象 。window 对应着浏览器窗口本身，提供了浏览器的各种基础操作方法如open()、blur()。

　　　　三、DOM：

　　　　　　导读：'D'、'O'、'M'的概念，节点操作，属性操作 （同目录）

　　　　　　内容 :

　　　　　　　　1、DOM概念：

　　　　　　　　　　'D': 网页文档 =》 文档对象 （操作对象）；

　　　　　　　　　　'O': 同 第二章 =》内容 =》第3点；

　　　　　　　　　　'M': 直接翻译是'model'或者'map'，即能够通过'M'来看懂DOM的信息。

　　　　　　　　　　DOM的作用： 一份文档 =》一颗树（数学或编程意义上的层级关系）

　　　　　　　　　　　　通过树的模型来描述文档中各个节点之间的关系，所以也将文档称为 "节点树"

　　　　　　　　2、节点操作

　　　　　　　　　　a、节点类型：

　　　　　　　　　　　　在JS中使用 "节点.nodeType" 可以得到对应的数字，一般只得到到1(元素节点)、2(属性节点)、3(文本节点)

　　　　　　　　　　　　　　元素节点:<body>、<p>这样的；

　　　　　　　　　　　　　　属性节点:<p title="我是属性节点"> ， 加粗位置即为一个属性节点

　　　　　　　　　　　　　　文本节点:<p>我是文本节点</p>元素节点中间包含的加粗文本这样的；

　　　　　　　　　　　　属性节点总是被包含在元素节点中，文本总是在属性节点下一级。每个节点都是一个对象!不信的typeof节点试试~

　　　　　　　　　　　　还有许多不同类型的节点，详细可参见： w3c NodeType详解

　　　　　　　　　　b、操作节点：(都是document特有的函数)

　　　　　　　　　　　　getElementById(idname)  return一个结果--具有对应id的元素对象

　　　　　　　　　　　　getElementsByTagName(tagname) return一个数组--document中所有元素为tagname的对象集合

　　　　　　　　　　　　getElementsByClassName(classname) return一个数组--document中所有类名为classname的对象集合 （该方法为HTML5 DOM中新增）

　　　　　　　　　　　　　　*这里有个小东西可以做的，因为HTML5 DOM才提供getElementsByClassName，所以可能有的浏览器用不了（。。但是我觉得没有咯），所以可以手撸一个getElementsByClassName

　　　　　　　　　　　　　　　书里有教程和代码，思路我描述一下：

　　　　　　　　3、属性操作

　　　　　　　　    getAttribute&setAttribute 获取&修改节点属性。

　　　　　　　 DOM的工作模式在此得以体现：

　　　　　　　　　　先加载静态html，然后用JS动态刷新。这样做可以刷新页面内容而不需要在浏览器里刷新。

　　　　　　思考：嗯这章没啥好思考的，就是明白了DOM如何处理文档&复习一下DOM提供的基础操作方法~接下来4-6章的图片库练习

　　　　　　　　　　

　　转发请注明出处：http://www.cnblogs.com/qixi233/p/5525633.html

　　　　　

JavaScript DOM编程艺术第二版学习（1/4）的更多相关文章

  1. JavaScript DOM 编程艺术(第二版) 初读学习笔记

    这本书留给我的印象就是结构.表现和行为层的分离,以及书后面部分一直在强调的最佳实践原则:平稳退化,逐步增强,向后兼容以及性能考虑. 要注意这不是一本JavaScript入门书籍~ 2.1 准备工作 用 ...

  2. 【JavaScript DOM编程艺术(第二版)】笔记

    第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\         第2章 javascript语法 1.内建对象: 内建在javasc ...

  3. JavaScript DOM 编程艺术(第二版) 有待解决的问题

    原书 P181,var repeat = "moveElement('"+elementID+"', "+final_x+", "+fina ...

  4. JavaScript DOM 编程艺术(第二版) 常用JS小脚本

    function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  7. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  8. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  9. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

随机推荐

  1. django 项目部署在 Apache 后， 设置二级域名（Apache虚拟主机 、 万网二级域名设置）

    上一篇文章简单说了怎么把django的项目部署到Apache上. 现在想弄个二级域名,也就是我原来有个域名 www.mysite.com,现在我想弄个 bbs.mysite.com ,该怎么做呢. 要 ...

  2. Kernel compiling for Pi 2

    https://www.raspberrypi.org/forums/viewtopic.php?f=66&t=101188&p=807579&hilit=cross+comp ...

  3. mongodb在window下和linux下的部署 和 安装可视化工具

    Windows安装    安装Mongo数据库: 在发布本文的时间官方提供的最新版本是:2.4.0 ,如果不做特殊声明,本教程所用的版本将会是这个版本. 第一步:下载安装包:http://www.mo ...

  4. Oracle中分页查询语句

    Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,如果您对此方面感兴趣的话,不妨一看. Oracle分页查询语句基本上可以按照本文给出的格式来进行套用.O ...

  5. SSH-KeyGen 的用法 【转载】

    SSH-KeyGen 的用法 secureCrt通过密钥登录 做法:1.登录A机器 2.ssh-keygen -t [rsa|dsa],将会生成密钥文件和私钥文件 id_rsa,id_rsa.pub或 ...

  6. JAVA Metrics度量工具 - Metrics Core 翻译

    Metrics核心 翻译自Metrics官方文档: http://metrics.codahale.com/manual/core/ JAVA Metrics是一个用于度量的一个JAVA的类库,使用请 ...

  7. InstallShield12豪华版破解版下载|InstallShield下载|软件打包工具

    InstallShield 12 豪华版+破解版 下载 下载速度:220kb/s InstallShield 12为软件发行方提供率先的安装程序解决方式,可以制作强大可靠的Windows Instal ...

  8. LabVIEW设计模式系列——状态机

    标准:1.状态用枚举自定义类型,便于统一管理修改.2.一般地应该有:Initialize,Idle,Stop,Blank状态.3.Initialize进行一些初始化的操作:Idle一种过渡状态,用于和 ...

  9. 分布式服务框架 Zookeeper -- 管理分布式环境中的数据--转载

    原文:http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ Zookeeper 分布式服务框架是 Apache Hadoop ...

  10. android自定义控件之滚动广告条

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看 ...