第三章DOM

3.1文档中的DOM的"D"

如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，Dom就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。

3.2对象：DOM中的"O"

对象是一种自给的数据集合。与某个特定对象相关联的变量被称为这个对象的属性，只能通过某个特地给对象去调用的函数被称为这个对象的方法。

JavaScript语言里的对象可以分为三种类型。

用户定义对象：由程序员自行创建的对象。
内建对象：内建在JavaScript语言里的对象，如Array、Math和Date等。
宿主对象：由浏览器提供的对象。

window对象对应的是浏览器窗口本身，这个对象的属性和方法通常称为Bom(浏览器对象模型)，但我觉得称为window Object Model（窗口对象模型）更为贴切。在本书的后续内容里，我们几乎只讨论docment对象的属性和方法。

3.3模型：DOM中的"M"

DOM中的"M"代表的是"Model"模型。

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body><h1>What to buy</h1><p title ="a gentle reminder">Don't forget to buy this stuff.</p><ul id ="purchases"><li>A tin of beans</li><li class = "sale">Chinese></li><li class = "sale important">Milk</li></ul></body></html>

（不必具体分析了，能看明白）

3.4节点

在DOM中，文档是由节点构成的集合，只不过此时的节点是文档树中上的树枝和树叶而已。

在DOM中有许多不同类型的节点，接下来让我么看看其中的三种：元素节点、文本节点和属性节点。

3.4.1元素节点

DOM的原子时元素节点。

标签的名字就是元素的名字。文本段落元素的名字是"P"，无需清单元素的名字是"ul"，元素中还可以包含其他的元素等等。

3.4.2文本节点

元素节点只是节点类型的一种。在上述例子中华，<P>元素包含着文本"Don't forget to buy this stuff"它就是个文本节点。

3.4.3 属性节点

属性节点用来对元素做出更具体的描述。

3.4.4 CSS

DOM并不是与网页结构打交道的唯一技术，CSS声明元素样式的语法与JavaScript函数的定义语法很相似：

selector {property: value;
}

在样式声明里，我们建议定义浏览器在现实元素时使用的颜色、字体和字号，如下所示：

p{color:yellow;font-family:"arial",sans-serif;font-size:1.2em;
}

继承是CSS技术中的一项强大功能。

例如，如果我们为body元素定义了一些颜色或字体，包含在body元素里的所有元素都将获得那些样式：

body {
color: white;
background-color:black;
}

这些颜色不仅作用在那些包含在<body>标签里的内容，还将作用于嵌套在body元素里的全部元素。

1.class属性

<p class = "special">This paragraph has the special class</p>
<h2 class = "special"> So does this headline </2>

子可以为class属性相同的所有元素定义同一种样式：

.special {
font-style:italic;
}

还可以像下面这样利用class属性为一种特定类型的元素定义一种特定的样式：

h2.special {
text-transform:uppercase；
}

2.ID属性

ID属性的用途是给网页里的某个元素加上一个独一无二的标识符。

<ul id = "purchases">

在样式表里，可以像下面这样为由特定ID属性值的元素定义一种独享的样式：

#purchases{border:1px soild white;background-color:#333;color:#ccc;padding:1em;
}

样式表可以利用

ID属性为包含在特定元素的其他元素定义样式。

#purchases li {font-weight:bold;
}

3.4.5获取元素

有三种DOM方法可获取元素节点。分别是通过元素ID、通过标签姓名和通过类名字来获取。

1.getElementById

这是一个方法，这个方法将返回一个与那个有着给定ID 属性值的元素节点对应的对象。

这个是docmeny对象特有的函数。ID值放在双引号或单引号里。

下面是一个例子：

docmeny.getElementById("purchases")

这个调用将返回一个对象，这个对象对应着docment对象里的一个独一无二的元素，那个元素的HTMLid属性值是purchases。你可以用typeof操作符来验证这一点。告诉我们是什么操作数。

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body><h1>What to buy</h1><p title ="a gentle reminder">Don't forget to buy this stuff.</p><ul id ="purchases"><li>A tin of beans</li><li class = "sale">Chinese></li><li class = "sale important">Milk</li></ul></body><script>alert(typeof document.getElementById("purchases")</script></html>

What to buy

Don't forget to buy this stuff.

A tin of beans
Chinese>
Milk

上述代码保存为HTML的文件，会弹出一个报告是 alert(typeof document.getElementById("purchases")的类型——它是一个对象。

2.getElementByTagName

返回一个对象数组，这个方法只有一个参数的函数，它的参数是标签的名字。

3.getElementsByClassName

可以通过class属性中的类名来访问元素。

3.4.6盘点知识点

1.一份文档就是一颗节点树。

2.节点分为不用的类型：元素节点、属性节点和文本节点等。

3.getElementById将返回一个对象，该对象对应着文档里的一个特定元素节点。

4.getElementByTagName和getElementByClass将返回一个对象组，它们分别对应着文档里的一组特定的元素节点。

3.5获取和设置属性

至此，已经介绍了3种获取特定元素的方法：分别是getElementById,getElementByTagName和getElementByClassName。得到需要的元素一行，我我们就可以设法获取它的各个属性。getAttribute方法就是用来做这个事情的，相应地，setArribute方法则可以更改属性节点的值。

3.5.1getAttrubute

getAttribute是一个函数。它只有一个参数——你打算查询的属性的名字：

object.getAttribute（attribute）

getAttribute方法不属于docment对象，所以不能通过docment对象，所以不能通过docment对象调用。

3.5.2 setAttribute

它语序我们对属性节点值直接作出修改，与getAttribute一样，setAttribute也只能用于元素节点：

object.setAttribute（attribute,value）

3.6小结

本章介绍了DOM提供的五个方法：

getElementById

getElementByTagName

getElementByClassName

getAttribute

setAttribute

这五个方法是编写需要DOM脚本的基石。

JavaScript Dom编程艺术（第二版）读书笔记第三章DOM相关推荐

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记
经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书. 2015年12月14日,之前使用韩顺平老师的 ...
JavaScript DOM编程艺术第二版学习（1/4）
接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...
Java 核心技术卷 II(第 8 版) – 读书笔记 – 第 1 章（下）
22.一旦获得了一个 Charset,就可以在 Java 的 Unicode 和指定的编码格式之间进行转化,下面以 GBK 和 Unicode 之间做为例子. 从 Unicode 到 GBK: imp ...
《Python核心编程》第二版第18页第一章练习 -Python核心编程答案-自己做的-
<Python核心编程>第二版第18页第一章练习这里列出的答案不是来自官方资源,是我自己做的练习,可能有误. 1.9 练习 1-1. 安装Python.请检查Python是否已经安装到你 ...
Android群英传神兵利器读书笔记——第三章：Android Studio奇技淫巧
Android群英传神兵利器读书笔记--第三章:Android Studio奇技淫巧这篇文章篇幅较长,可以使用版权声明下面的目录,找到感兴趣的进行阅读目录 3.1 Android Studio使用 ...
计算机系统导论第九章,计算机系统导论 -- 读书笔记 -- 第三章程序的机器级表示 (持续更新)...
计算机系统导论 -- 读书笔记 -- 第三章程序的机器级表示 (持续更新) 第三章程序的机器级表示 3.1 历史观点 3.2 程序编码 1. 命令行 (1)编译 Linux> gcc -Og ...
java虚拟机读书笔记第三章垃圾收集器和内存分配策略
java虚拟机读书笔记第三章垃圾收集器和内存分配策略 GC需要完成的三件事情:哪些内存需要回收.什么时候回收.如何回收垃圾回收器在对堆进行回收前,首先要确定那些对象存活,哪些对象已经死去,判断的 ...
Spring Boot 核心编程思想-第二部分-读书笔记
怕什么真理无穷进一步有近一步的欢喜说明本文是Spring Boot核心编程思想记录的笔记,书籍地址:Spring Boot编程思想(核心篇): 这篇文档会记录这本我的一些读书的思考,内容可能比较 ...
阅读JavaScript高级程序设计（第二版）笔记
第一章js简介 JavaScript诞生在1995年,当时负责进行输入型验证. JavaScript是一种专为与网页交互而设计的脚本语言,分为 : 1. ECMAScript核心语言功能. 2.文档对 ...

JavaScript Dom编程艺术（第二版）读书笔记第三章DOM

第三章DOM

3.1文档中的DOM的"D"

3.2对象：DOM中的"O"

3.3模型：DOM中的"M"

3.4节点

What to buy

3.5获取和设置属性

3.6小结

JavaScript Dom编程艺术（第二版）读书笔记第三章DOM相关推荐

最新文章

热门文章

JavaScript Dom编程艺术（第二版）读书笔记 第三章DOM

第三章DOM

3.1文档中的DOM的"D"

3.2对象：DOM中的"O"

3.3模型：DOM中的"M"

3.4节点

What to buy

3.5获取和设置属性

3.6小结

JavaScript Dom编程艺术（第二版）读书笔记 第三章DOM相关推荐

最新文章

热门文章

JavaScript Dom编程艺术（第二版）读书笔记第三章DOM

JavaScript Dom编程艺术（第二版）读书笔记第三章DOM相关推荐