JavaScript DOM编程艺术读书笔记(一)
第一章,第二章
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编程艺术读书笔记(一)的更多相关文章
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- JavaScript DOM编程艺术读书笔记(二)
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
- JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...
- JavaScript DOM编程艺术 读书笔记
2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...
- JavaScript DOM编程艺术读书笔记(四)
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
- 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
- 《JavaScript DOM编程艺术》笔记一
1.CSS: 继承是CSS技术中的一项强大功能,节点树上的各个元素将继承其父元素的样式属性. 2.3种获取DOM元素方法:getElementById返回一个对象,getElementsByTagNa ...
随机推荐
- /etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc
/etc/profile./etc/bashrc.~/.bash_profile.~/.bashrc很容易混淆,他们之间有什么区别?它们的作用到底是什么?/etc/profile: 用来设置系统环境参 ...
- CGI
CGI的工作原理一般是这么定义的: 客户端web浏览器浏览某个主页后,利用一定的方式提交数据,并通过HTTP协议向Web服务器发出请求,服务器端的HTTP Daemon(守护进程)将描述的主页信息通过 ...
- boost相关
1 boost 常用函数 <1> tcp跟udp的收发函数名 tcp收发 async_write async_read async_read_until udp收发 async_send_ ...
- jsoncpp初使用
一 前言 由于最近一个c++项目需要使用json这种数据格式来传输数据, so上网去寻找合适的类库,毕竟对于这种不是很新的技术, 自己造轮子有点得不偿失. 从百度上翻了翻, 基本上就boost跟jso ...
- linux内核调试技巧之addr2line
addr2line工具是一个可以将指令的地址和可执行影像转换为文件名,函数名和源代码行数的工具.这在内核执行过程中出现崩溃时,可用于快速定位出出错的位置,进而找出代码的bug. 用法 addr2lin ...
- 【转载】windows平台安装nodejs过程
第一步 下载nodejs 访问https://nodejs.org/en/download/url 根据您的系统是32位或64位,按照文字说明进行下载 第二步 安装nodejs 双击运行nodejs的 ...
- 火车采集器 帝国CMS7.2免登录发布模块
帝国cms7.2增加了金刚模式,登录发布有难度.免登录发布模块配合火车采集器,完美解决你遇到的问题. 免登录直接获取栏目列表 通过文件内设置密码免登录发布数据 帝国cms7.2免登陆文章发布接口使用说 ...
- Modelsim-altera 仿真 顶层原理图的解决办法
解决办法:首先需要将.bdf原理图文件转换为Verilog HDL等第三方EDA工具所支持的标准描述文件.在Quartus下,保持*.bdf为活动窗口状态,运行[File]/[Create/Updat ...
- node.js搭建简单的websocket
1.首先在官网http://www.nodejs.org/下载NODE.JS 2.打开命令行CMD,进入NODEJS\node_modules\的目录,输入npm install socket.io ...
- Jmeter组件7. JDBC Connection Configuration & JDBC Request
Jmeter同样可以测试数据库的性能,通过执行增删改查的语句,以下举的是oracle的例子 Step 1: 下载ojdbc14.jar包放到Jmeter lib包中,在test plan中配置,并且重 ...