第一章，第二章

　　DOM：是一套对文档的内容进行抽象和概念化的方法。

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

　　DHTML(Dynamic HTML)：动态HTML的简称，不是一项新技术，而是通过HTML CSS 和Javascript组合的。DHTML背后的含义其实就是：

  • 利用HTML把网页标记为各种元素；
  • 利用CSS设置元素样式和它们显示的位置；
  • 利用JavaScript实时地操纵页面和改变样式。

　　但是虽然浏览器制造商的目的是一样的，但是他们完成的方法却不一样，这就是浏览器之间的冲突(浏览器战争)。这样就导致了许多脚本不得不编写两次。 比如：

　　-->Netscape的DOM使用专有元素，称之为层"layers"，层有唯一ID，要引用一个元素需要这么做 :   document.layers['myelement']

　  -->而微软的DOM却需要这么做 ： document.all['myelement']

　　WebKit(http://webkit.org)是Safari和Chrome采用的一个开源web浏览器引擎。

　　记住把<script>标签放在HTML文档的最后，<body>标签之前，能使浏览器更快的加载页面！

　　注释    //  /**/或者<!-这么写就是javascript中的注释  不需要写成<!--这是HTML中的注释-->   还是建议使用//或者/**/

　　变量名声明可以使用"_"比如 my_mood    函数名声明可以使用驼峰格式  比如 myMood()

　　必须明确类型声明的是强类型语言 javascript不需要明确进行类型声明，所以是弱类型语言

　　字符串单引号或者双引号都可以，但是如果想输出 don't ask 如果用单引号的话需要对这个字符转义  var my_mood = 'don\'t ask'  双引号也是一样的道理。

　　定义数组 Array关键字：

　　var beatles = Array(4)；  4是长度  也可以不指定 赋值就是beatles[0] = "josh" ;

　　或者var beatles = Array("John","Pual","George","Ringo");  也可以var beatles = ["John","Pual","George","Ringo"];  数组元素可以混搭的 比如var lennon = ["John",1940,false];    var lennon = [];也可以

　　

　　对象：对象中的数据通过两种方式访问：属性（property）和方法（method）；-->object.property　　　　object.method

　　内建对象：比如Array，Math ，Date等 比如  var beatles = new Array() 这其实就是创建了一个Aray对象的实例  这样就可以使用beatles.length来获取多少个元素

　　宿主对象：这些不是Javascript提供的，而是由他的运行环境提供的，比如form ，image和element等。document也是一种宿主对象，可以获取网页上任何一个元素的信息

　　在函数中如果使用var ，那个变量就是被视为一个局部变量，只存在于函数之中，如果没使用var 则是全局变量；

　　

第三章 DOM

　　DOM ： D是doucument文档   O是对象Object (用户定义对象，内建对象，宿主对象)  M模型Model

　　-->提一下：windows对象对于浏览器窗口本身，这个对象的属性和方法称之为BOM，提供了window.open window.blur等方法。

　　

三种重要的节点：

  • 元素节点：可包含其它类型的节点
  • 文本节点：内容
  • 属性节点：对元素做具体的描述，所有的属性都被元素包含

　　

　　

获取元素的3种方法：元素ID，标签名字，以及类名字
　　

  • getElementById(),id值必须放在单引号或者双引号中；  document.getElementById("id"); 返回的是一个对象，可以用alert(typeof document.getElementById("id"))；来验证
  • typeof：操作数是一个字符串，数值，函数，布尔值还是对象。
  • getElementsByTagName():返回一个对象数组，标签放在单引号或者双引号中
  • 通配符必须放在“”里，为“”防止与乘号混淆
  • 运用通配符可以快速的得出有多少个子元素
  • 可以混合使用getElementById()与getElementsByTagName()得到某个具体id元素下的元素数组，每个值都是一个对象。
  • -->var shopping  = document.getElementById("purchase");    var items = shopping.getElementsByTagName("*");  alert(items.length);
  • getElementsByClassName()：是HTML5 DOM新增的一个方法，通过属性中的类名来访问元素:返回值与getElementsByTagName()类似
  • 要指定多个类名，只需要在字符串参数中用空格分隔类名，其顺序不重要；  比如document.getElementsByClassName("purchases sale").length
  • 每个节点都是一个对象，有自己的属性和方法；

在说明如何获得节点以后，本章又讨论了获取和设置属性的方法，如下：

  • getAttribute()：该方法只能通过元素节点对象调用；
  • setAttribute():该方法允许我们对属性节点的值做出修改

第四章 案例研究 JavaScript图片库

　　插入链接来引用javascript脚本,把他放在</body>之上　　

<script type = "text/javascript" src = "showpic.js"> </script>

　　

　　事件处理函数，比如鼠标指针悬浮在一个元素上时候触发一个动作,就用onmouseover.  离开一个元素是触发 onmouseout  点击就是onclick　　

<li> <a href = "images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false"> Fireworks</a></li>  ##return false禁止点击的默认行为  仅仅将这个动作关联到函数showPic(this)

　　

节点的类型总共有12种可取值，有3种具有实用价值： nodeType属性：返回节点的类型；node.nodeType（可用此来验证是否获得了自己想选择的节点）

  • 元素节点的nodeType属性值是1
  • 属性节点的nodeType属性值是2
  • 文本节点的nodeType属性值是3

想要改变一个文本节点的值，可以使用nodeValue  node.nodeValue

<p id = "description">Choose a image</p>

alert(description.nodeValue);返回的将是一个null 因为这个返回的是<p>,<p>元素本身的nodeValue就是null  我们需要的是<p>里边包含的文本

包含在<p>里边的文本是另一种节点，他是p的第一个子节点，可以写作 alert(description.childNodes[0].nodeValue);或者alert(description.firstChild.nodeValue);

贴上本章的JS代码

function showPic(whichPic) {

    var source = whichPic.getAttribute("href");　　　　//获取资源路径

    var placeholder = document.getElementById("placeholder");

    placeholder.setAttribute("src",source);

    var text = whichPic.getAttribute("title");　　//获取内容
    var description = document.getElementById("description");

    description.firstChild.nodeValue = text;

}

JavaScript DOM编程艺术读书笔记(一)的更多相关文章

  1. JavaScript DOM编程艺术读书笔记(三)

    第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...

  2. JavaScript DOM编程艺术读书笔记(二)

    第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...

  3. JavaScript DOM编程艺术 - 读书笔记1-3章

    1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...

  4. JavaScript DOM编程艺术 读书笔记

    2. JavaScript语法 2.1 注释      HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...

  5. JavaScript DOM编程艺术读书笔记(四)

    第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...

  6. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

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

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

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

    发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...

  9. 《JavaScript DOM编程艺术》笔记一

    1.CSS: 继承是CSS技术中的一项强大功能,节点树上的各个元素将继承其父元素的样式属性. 2.3种获取DOM元素方法:getElementById返回一个对象,getElementsByTagNa ...

随机推荐

  1. vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

    父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...

  2. 用读写锁三句代码解决多线程并发写入文件 z

    C#使用读写锁三句代码简单解决多线程并发写入文件时提示“文件正在由另一进程使用,因此该进程无法访问此文件”的问题 在开发程序的过程中,难免少不了写入错误日志这个关键功能.实现这个功能,可以选择使用第三 ...

  3. iOS5.0以上使用新浪微博开放平台OAuth 续(及解决登录无效问题)

    新浪微博开放平台为第三方应用提供了简便的合作模式,满足了手机用户和平板电脑用户随时随地分享信息的需求.通过调用平台的api即可实现很多微博上的功能. 本篇主要目的是记录新浪微博移动SDK iOS版本的 ...

  4. PSP(11.2~11.9)

    5号 类别c 内容c 开始时间s 结束e 中断I 净时间T GUI 学习QT视频 9:00 10:10 0m 70m 复习 软件工程 10:10 11:10 10 50m 复习 软件工程 14:20 ...

  5. [DFNews] Blackbag发布MacQuisition 2013 R2

    New in MacQuisition 2013 R2: Improved FileVault 2 Detection - Automatically detect the presence of a ...

  6. Android中View绘制流程以及invalidate()等相关方法分析

    [原文]http://blog.csdn.net/qinjuning 整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的,该函数做的执行过程可简 ...

  7. mac-终端命令

    发现一个比较好点的关于mac终端下命令的解释文档,全文粘贴到这,免得丢了(原文在此): Mac终端 命令行 [一]bash 终端设置      1.环境变量设置首先要知道你使用的Mac OS X是什么 ...

  8. Metro Win8风格的按钮（Filp翻转）

    原地址->http://www.cnblogs.com/yk250/p/5661093.html 介绍:简约而不简单....颜色可随意调制,最好用Blend工具. 效果图如下:话说这个图会不会太 ...

  9. map，hash_map, hash_table, 红黑树 的原理和使用

    在刷算法题的时候总是碰到好多题,号称可以用hash table来解题.然后就蒙圈了. 1.首先,map和hash_map的区别和使用: (1)map底层用红黑树实现,hash_map底层用hash_t ...

  10. setContentType、setCharacterEncoding、pageEncoding和contentType

    request.setCharacterEncoding()是设置从request中取得的值或从数据库中取出的值 response.setContentType("text/html;cha ...