javascript dom编程艺术阅读笔记

最新推荐文章于 2022-10-05 17:14:21 发布

放风筝的小小马

最新推荐文章于 2022-10-05 17:14:21 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/hexon804/article/details/50675797

版权

第二章

1.程序设计语言分为：解释型和编译型两大类；java或C++等语言需要一个编译器，将源代码翻译为直接在计算机上执行的二进制可执行文件的程序，属于编译型

javascript语言不需要编译器，只需要解释器；在www环境下，web浏览器负责完成解释和执行工作。对于代码中的错误，只有等到解释器实际执行到有关代

码时才会被发现

2.要求程序员必须对数据类型做出声明的程序设计语言被称为强类型（stongly typed），如c，c++；像javascript不要求程序员对数据类型做出声明的语言则称为弱类型（weekly typed）语言

3.向数组中添加元素的操作称为填充（populating）

3.数组

var arr = Array(5);

var arr = Array(1,2,3,4,5);

var arr = Array();

arr[0] =1;

关联数组：

var lennon = Array();

lennon["name"] = "john";

lennon["old"] = "23";

lennon["living"] = "shenzhen";

数组的下标不局限于数字，也可以是字符串；

数组的元素也可以是一个数组

var beatles = Array();

beatles[0] = lennon;

那么beatles[0]["name"] = "john";

4. 局部变量和全局变量

如果在一个函数的内部不小心使用了某个全局变量的名字，即使本意是想使用一个局部变量，javascript也会认为是在引用那个全局变量。

但是，额可以使用var关键字明确的为在函数中使用的变量设定一个作用域。如果在某个函数中使用了var，那个变量就被视为一个局部变量，它将只存在与这个函数的上下文

中，反之，如果没有使用var，那个变量就将被视为一个全局变量，如果在脚本里已经存在一个与之同名的变量，这个函数将覆盖那个现有变量的值。

注意：我们必须把函数内部的变量全部明确的使用var声明为局部变量

5. 对象

5.1 对象是自我包含的数据集合，包含在对象里的数据可以通过两种形式——即属性（property）和方法（method）访问：

a. 属性是隶属于某个特定对象的变量

b. 方法是只有某个特定对象才能调用的函数

要使用对象，就必须创建一个对象的实例（instance）；实例是对象的具体表现；对象是统称，实例是个体

如：假如有一个对象Person；创建实例使用：var jeremy = new Person;（Person对象是不存在的，在此只是做个例子）

5.2 我们可以利用JavaScript语言创建自己的对象——术语称之为用户定义对象（user-defined object）；javascript自带的预先定义对象，称之为内建对象（native

object）

5.3 宿主对象

指不是javascript脚本中预先定义的对象，而是web浏览器提供的预定义对象被称为宿主对象（host object）；

宿主对象主要包括Form、Image和Element。我们可以通过这些对象获得关于某给定网页上的表单、图像和各种表单元素的信息

第三章

DOM分别对应着：文档（D）、对象（O）和模型（M）

3.1 javascript语言里的对象分为三种类型：

a. 用户定义对象（user-defined object）：由程序员自行创建的对象

b. 内建对象（native object）：内建在javascript语言里的对象，如Array、Math和Date等

c. 宿主对象（host object）：由浏览器提供的对象

window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM(浏览器对象模型，Window Object Model(窗口对象模型))

DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们通过javascript去读取这张地图

3.3.1 节点

a. 元素节点（element node）：如<body>，<p>和<ul>之类的元素

b. 文本节点（text node）：如<p>元素，它里面包含的是文本段落内容，所以可以叫做文本节点；如<li>标签，也叫做文本标签，其包含着一些列表项

c. 属性节点（attribute node）：表示元素的属性值，属性的作用是对元素做出更具体的描述；属性节点一般都放在起始标签里，所以属性节点总被包含在元素节点中、

如： <p title="name">张三</p>；title就是一个属性节点

d. CSS:层叠样式表：告诉浏览器如何显示这份文档的内容；继承是CSS中的强大功能之一，CSS也把文档的内容视为一颗节点树，节点树上的各种元素将继承其父元素的

样式属性

3.3.2 getElementById()方法

作用：返回一个与给定id属性值的元素节点相对应的对象，该方法与document对象相关联的函数；

使用方法：document.getElementById(id);

typeof 操作符可以告诉我们它的操作数是不是一个字符串、数值、函数、布尔值或对象；

如： alert(typeof document.getElementById("abc"));

3.3.3 getElementsByTagName()方法

作用：返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素；该函数的参数是一个HTML标签的名字

使用方法：document.getElementsByTagName(tag)

注意：该函数返回的是一个数组，该数组中包含的是对象

如：1. var items = document.getElementsByTagName("li");获得标签<li>的数量

同时可以使用通配符：var num = document.getElementsByTagName("*").length; 获得文档中所有元素的数量

3.4 注意：文档中的每个元素节点都是一个对象

小结：a. 一份文档就是一颗节点树

b. 节点可以分为不同的类型：元素节点、文本节点和属性节点

c. document.getElementById()可以返回返回一个对象，该对象是文档中的一个特定的元素节点

d. document.getElementsByTagName() ：返回一个对象数组，他们分别对应着文档中的一个特定的元素节点

e. 这些节点都是一个对象

3.4.1 getAttribute()方法

作用：找到我们想要查询的那个元素之后，可以利用它把该元素的各种属性值查询出来

使用方法：object.getAttribute(attribute)

注意：getAttribute()方法不能通过document对象调用，只能通过一个元素节点对象调用它；

如：可以把它与document.getElementsByTagName()方法结合起来，便可以查询元素的属性；

var paras = document.getElementsByTagName("p");
for (i = 0; i < paras.length; i++){
alert(paras[i].getAttribute("title"));
}

假如文档里只有一个带有title属性的<p>元素，但是文档中还有一个或更多个不带title属性的<p>元素，则相应的getAttribute("title")调用将返回null空值

3.4.2 setAttribute()方法

作用：允许对属性节点的值做出修改

使用方法：object.setAttribute(attribute, value);

如：var shopping = document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title", "a list of goods");
alert(shopping.getAttribute("title"));

在这个例子中id为purchases的元素节点， 并不存在title属性，我们发出 setAttribute()调用实际 完成了两项操作：先把属性创建出来，然后再对其值进行设置

关键点注意：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和行为动作发生相应的变化，但我们在通过浏览器的view source(查看

源代码)选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不

一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。对页面内容的刷新不需要最

终用户在它们的浏览器里执行页面刷新操作就可以实现。

第四章

4.3 javaScript函数的调用

通过：<script type="text/javascript" src="script/showPic.js"></script> 在html文件中插入JavaScript文件showPic.js；这条语句是放在html文件中的<head>标签内、

事件处理函数

作用：在预定事件发生时让预先安排好的JavaScript代码开始执行，也就是说“触发一个动作”

onclick事件：当用户点击某个链接时触发一个动作

JavaScript代码是包含在一对引号之间的：我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可

4.4.1 childNodes属性

作用：childNodes属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。

childNodes属性将返回一个数组，这个数组包含给定元素节点的全体子元素。

如：function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
} 这个函数获得body元素下的所有子元素的数量

4.4.2 nodeType属性

作用：可以用于区分文档里的各个节点，该属性可以让我们知道自己正在与哪一种节点打交道，其返回值是一个数字

使用方法：

var body_element = document.getElementsByTagName("body")[0];//此处为什么要加[0]???因为获取的是标签body的元素集合（数组），而在一个html中可以有多个同

类型的标签， 虽然HTML文档中只有一个body标签，但是相对于其他的标签可以有多个，如<a>标签，所

以这里需要采 用访问数 组的方式进行操作

alert(body_element.childNodes.length);
alert(body_element.nodeType);

nodeType属性有12种可取值；但其中只有3种具有使用价值：元素节点、属性节点和文本节点，属性值分别为：1、2、3

4.4.5 nodeValue属性

作用：检索（和设置）节点的值；node.nodeValue

使用方法： var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
alert(description.childNodes[0].nodeValue);

注意：包含在<p>元素里的文本是另一种节点，它在DOM里是<p>元素的第一个子节点。也就是说，如果想获得<p>元素的文本内容，就必须检索它的第一个子节点的nodeValue属性值

4.4.6 firstChild和lastChild属性

node.firstChild 等同于 node.childNodes[0]

node.lastChild 等同于node.childNodes[node.childNodes.length - 1];

第五章

5.1.3 质疑

注意： 1.不管想通过javascript改变网页的哪种行为，都必须三思而后行，首先要确认：为这个网页增加这种额外的行为 是否有必要？

如果要使用javascript，就要确认：这样做对用户的浏览体验产生怎样的 影响？还有更重要的问题：如果用户的浏览器 不支持javascript该怎么办？

2.只有在绝对必要的情况下才使用弹出窗口，因为这涉及到网页的可访问性问题

5.2 预留后路

window.open()函数

原型：window.open(url, name, features);

作用：创建新的浏览器窗口

使用： url: 需要新建窗口的url地址；

name: 新建窗口的名字，在代码中可以通过名字与窗口通信

features：窗口的属性；如窗口的尺寸（宽和高）以及新窗口被激活和禁用的各种浏览功能（工具条，菜单条，初始显示位置，等等）；记住：对于该参数，新窗

口的浏览功能要少而精。

示例：function popUp(winUrl){

window.open(winUrl, "newWin", "width=200", "height=300");

}

5.2.1 “JavaScript:”伪协议

“真“协议：指因特网上的标准化通信协议，如：http://、ftp:// 等等

”伪“协议：人们对非标准化通信机制的统称。”JavaScript:“伪协议让我们可以通过一个链接来调用JavaScript函数

如：通过JavaScript: 伪协议调用popUp()函数：

<a href="javascript:popUp('http://www.baidu.com');">baidu</a>

这条语句在支持“javascript:”伪协议并启用了JavaScript功能的浏览器中运行正常；不支持这种伪协议的浏览器则会尝试去打开链接但会失败；支持这种伪协议

但禁用了JavaScript功能的浏览器则什么也不做

注意：在html文档里，通过”javascript:“ 伪协议调用JavaScript代码的方式 非常不好

5.4分离JavaScript（讨论了将css、JavaScript从HTML中分离出来的方法，重要）

类似于在HTML中使用style属性一样，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率，又容易引发问题的做法；

使用一个”挂钩“，就像CSS机制中的的class或id属性那样，把JavaScript代码调用行为与html文档中的结构和内容分离开来，网页就会健壮的多

5.5 向后兼容性

有些浏览器对JavaScript和DOM脚本代码的支持可能不太好，这样有可能导致某些代码无法使用的状况，为了解决这种问题，可以使用 对象检测（object detection）方法

对象检测（object detection）方法：只要把某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式的求值结果是true还是false来决定应该采取怎样的行为。在JavaScript语言里，几乎所有的东西（包括各种方法在内）都可以被当做对象来对待，而这意味着我们可以容易的把不支持某个特定DOM方法的浏览器检测出

来：if (method){

statements;

}

示例： window.onload = function(){
if (!document.getElementsByTagName) return false; //如果浏览器不支持document.getElementsByTagName方法，就不执行后面的代码
.....
}

第六章

6.1 与DOM编程工作有关的问题不外乎 预留后路、 向后兼容性和 分离JavaScript这几大类

6.3.2 如果想用JavaScript为网页添加一些行为，就不应该让JavaScript代码对网页的结构有任何依赖

6.3.5 匿名函数：在整个脚本文件中只出现一次的函数，匿名函数没有函数名，只能在哪里定义，就在哪里使用。

如：links[i].onclick = function() {}

6.4.1 nodeName属性总是返回一个大写字母的值，即使元素在HTML文档里是小写字母

6.5 DOM core和HTML-DOM

DOM core并不只属于JavaScript，支持DOM 的任何一种程序设计语言都可以使用它们

有许多属性专属于HTML-DOM；同样的操作既可以用DOM core来操作，也可以用HTML-DOM来操作

第七章

7.1 将结构（HTML）、样式（CSS）和行为（javascript）分开是一个基本原则

document.write()方法：

优点：可以方便的将文本插入到html文档中；

缺点：违背了“分离JavaScript”原则；必须要在HTML文档的body部分使用<script>标签才能调用该方法。这违背了结构和行为分开的原则

7.2 innerHTML属性（查看书的113页）

特点：浏览器几乎到支持innerHTML属性，但不属于W3C标准

作用：读取/写入某给定元素里的HTML内容

innerHTML属性值没有细节可言，不像DOM树有很多节点；如果想获得细节，就必须使用DOM方法和属性

注意：innerHTML属性是一项专利技术，不是一项业界标准，在编写JavaScript代码时应该避免使用任何形式的专利

7.3 DOM提供的方法

浏览器实际显示的是HTML文档中的DOM节点树，注意理解这句话；也就是说如果我们要动态的改变HTML中的内容，只需要改变DOM节点树

7.3.1 createElement()方法：创建元素

如：var para = creatElement("p"); 创建一个p元素，并使用para引用指针指向它

7.3.2 appendChild() 方法：将节点插入某个文档的节点树中，使其成为该文档节点树中的一个子节点

如：var para = document.creatElement("p");

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

testDiv.appendChild(para);

将创建的p元素添加到id为testDiv的元素节点中

7.3.3 creatTestNode() 方法：创建文本节点

使用：document.creatTextNode(text);

如：var para = document.creatElement("p");//创建一个元素节点p

var testDiv = document.getElementById("testDiv");//获取id为testDiv的节点

testDiv.appendChild(para);//将元素节点p插入到testDiv节点树中，成为它的一个子节点

var txt = document.creatTextNode("Hello world");//创建一个文本节点

para.appendChild(txt);//将文本节点txt插入到para节点中，使其成为para的子节点

7.4.1 insertBefore() 方法：将一个新元素插入到一个现有元素的前面

使用方法：提供三个参数：a. 想插入的新元素（newElement）

b. 想把这个新元素插入到那个现有元素（targetElement）的前面

c. 这两个元素共同的父元素（parentElement）

语法：parentElement.insertBefore(newElement, targetElement);

可以通过targetElement.parentNode获得元素的父元素

注意：在DOM中，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）；这关系到我们使用insertBefore方法

第八章

8.1

编写代码最重要的两项原则：“循序渐进”和“预留后路”

循序渐进（progressive enhancement）原则：从最核心的内容开始，逐步添加额外的功能。应该先用标记语言给核心内容加上正确的标记以使其获得正确的结构；然后

再充实被加上了正确标记的内容。充实的内容既可以是CSS样式表呈现的效果，也可以是通过DOM脚本添加的操作行为。

核心内容应该在刚开始编写文档时就成为文档的组成部分；

第九章

9.1.4 分离
选择最合适的工具去解决问题是最基本的原则。这意味着：

a. 使用(X)HTML去搭建文档的结构

b. 使用CSS去设置文档的呈现效果

c. 使用DOM脚本去实现文档的行为

9.2.1

如果用DOM style属性设置样式信息，就可以通过DOM将样式信息检索出来。

style 语法：element.style.property = value;

如：<p id = "example" style = "color: grey; font-family; 'Arial', san-serif;"> An example of a paragraph</p>

但是，我们一直强调的结构、样式和行为者三者之间要分开，所以其实用DOM style设置样式并不是很合适

9.3 何时该用 DOM 脚本去设置样式信息

9.3.1

通过CSS声明样式信息的具体做法主要有三种：

第一种：为同类型的所有元素（比如p元素）统一的声明一种样式

第二种：为有着特定class属性的所有元素统一的声明一种样式

第三种：为有着唯一id属性的元素声明一种样式

也就是说，通过CSS无法根据某个元素在节点树里的位置来为它声明一种样式，但是通过DOM代码可以来实现找到节点树中的某个元素节点，并通过style属性来为其指定

样式

nextSibling属性找出的是下一个节点，注意：是节点，不是元素节点；

要找出下一个元素节点，可以根据nodeType属性，编写函数找出
9.3.3

我们决定是使用CSS还是DOM来设置样式，需要考虑以下因素：

a. 这个问题最简单的解决方案是什么

b. 哪种方案会得到更多的浏览器支持

一般原则：如果想改变某个元素的呈现效果，就使用CSS; 如果想改变某个元素的行为，就应该选用DOM; 如果想根据某个元素的行为去改变它的呈现效果，就运用你的理

智——在这个问题上并没有放之四海而皆准的原则；

9.4 className属性

className属性是个可读可写的属性，而且凡是元素节点都有这个属性；这是改变元素的class名字。使用className属性，元素原来的class名就会被替换，有关原class

的所有信息都会被替换，这是它的弊端，但是有办法解决；我们可以使用“追加”的形式，这样原class仍然存在；

用法：element.className = value;

使用clasName属性追加的步骤：

1.判断元素的class属性是否为null，如果为null，则我们可以直接进行替换

2.如果元素的class属性不为null，则把一个空格和新的class设置追加到className属性上

如：

function addClass(element, value){
	if (!element.class){
		element.className = value;
	}else {
		newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

将某种具体的东西改进为一种非常通用的东西的过程叫做抽象化（abstraction）

小结：一般来说，要改变文档的样式，应该使用CSS样式表，但是CSS无法定位到节点树中的某一个特定的节点元素，此时我们可以通过DOM脚本来定位节点元素，并改变其样式，而改变的方法，可以对元素的class使用className进行追加

第十章

10.1何为动画

简单理解：动画就是让元素的位置随时间而不断的发生变化

10.1.1 位置

可使用DOM中的style属性改变元素的位置

10.1.2 时间

小结：何为动画？让元素的位置随时间而不断的发生变化

如何实现？通过不断改变元素的位置；位置如何改变：通过DOM中的style属性；时间如何改变：通过setTimeOut()函数和clearTimeOut()函数

movement = setTimeOut(“function”, interval)函数：每隔interval毫秒执行一次function函数，该函数带有一个返回值，将该返回值用作clearTimeOut()函数的形参可以，取消该函数的执行

clearTimeOut(movement)函数：根据movement，取消函数的执行；

parseInt(string)：将字符串中的数字提取出来，返回出来的是整数

parseFloat(string)：将字符串中的数字提出出来，返回出来的是float型数据

10.2.5 变量作用域问题

javascript允许我们为元素创建属性：

element.property = value; //表示我们为element元素创建了一个property属性，其属性值为value;

当既不能使用全局变量又不能使用局部变量时，可以考虑为元素创建属性来实现功能

10.3

第十一章网站设计

11. 网站用途——网站素材——网站结构

11.2 CSS

将CSS文件分门别类的保存在多个文件夹里；具体怎么分类可依据实际情况来决定

如：将颜色，字体，以及元素框架（盒模型）等三部分进行分类

使用@import url(11_color.css);在css样式表中插入外部样式表
11.4 颜色

如果要为某个元素设置前景颜色，那么就应该再为它设置一种背景颜色。如果不这么做，可能会导致内容变成“隐形”文字

11.4.1 在布局样式表中，在最开始使用通配符把每个元素的内边距和外间距设置成零，防止页面受浏览器默认设置的影响

11.6 在编写JavaScript代码时，要对函数进行归类，如反复使用的函数分一类，

第十二章

1.创建Ajax网站的最好方法是：先把网站创建为一个普通的网站，再利用Ajax技术去充实它

放风筝的小小马

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript dom编程艺术阅读笔记

第二章1.程序设计语言分为：解释型和编译型两大类；java或C++等语言需要一个编译器，将源代码翻译为直接在计算机上执行的二进制可执行文件的程序，属于编译型javascript语言不需要编译器，只需要解释器；在www环境下，web浏览器负责完成解释和执行工作。对于代码中的错误，只有等到解释器实际执行到有关代码时才会被发现2.要求程序员必须对数据类型做出声明的程序设计语言被称为强类型
复制链接

扫一扫