Javascript_DOM编程艺术翻译版
javascript教学各模块构成的逻辑关系
一、引言JavaScript是一种高级的、解释型的编程语言，被广泛运用于Web开发中。
在JavaScript的学习中，理解各模块之间的逻辑关系对于提高学习效率和建立系统性的知识体系至关重要。
本文将从JavaScript教学的各个模块出发，分析它们之间的逻辑关系。
二、基础语法1. 变量和数据类型在JavaScript中，变量的使用和数据类型的定义是构建其他模块的基础。
掌握好变量的概念和不同数据类型的区分是学习JavaScript的第一步。
2. 运算符和表达式运算符和表达式的概念是基于变量和数据类型的进一步延伸，学习它们有助于理解JavaScript中的运算规则和逻辑运算。
3. 控制流程条件语句和循环结构的学习是基础语法的重要组成部分，它们决定了程序的执行流程，是编写复杂程序的基础。
三、函数和对象1. 函数函数是JavaScript中的一个重要概念，它能够封装一段代码并在需要时被重复调用，学习函数的定义和使用能够提高代码的复用性和可维护性。
2. 对象和数组在JavaScript中，对象和数组是用来存储和操作数据的重要工具。
学习它们的定义和操作能够更加灵活地处理数据，为程序的开发提供了更多的可能性。
四、面向对象编程1. 类和继承在面向对象编程中，类是一种对事物的抽象描述，它能够帮助程序员更好地组织数据和操作。
继承是面向对象编程中的一个重要概念，它使得已存在的类可以被其他类所复用，提高了代码的可复用性。
2. 原型和闭包原型和闭包是JavaScript中独特的面向对象编程概念，学习它们有助于深入理解JavaScript的设计思想，提高编程技巧和能力。
五、DOM和事件处理1. DOM操作DOM是文档对象模型的缩写，它是JavaScript操作HTML文档的接口。
学习DOM操作有助于实现网页的动态交互和数据渲染。
2. 事件处理在Web开发中，事件处理是至关重要的一环。
学习事件处理能够使程序实现用户和界面的互动，提升用户体验。
Web设计与编程导论(双语)教案
Web设计与编程导论(双语)教案第一章：Web设计概述1.1 课程介绍介绍Web设计与编程导论的课程目标和内容。
强调双语教学的重要性和优势。
1.2 Web设计的基本概念解释Web设计的定义和重要性。
1.3 Web设计的原则与方法介绍Web设计的基本原则，如一致性、可用性、导航等。
讨论Web设计的方法和流程，包括需求分析、设计、开发和测试。
第二章：HTML与CSS基础2.1 HTML简介解释HTML的定义和作用。
介绍HTML的基本结构和常见标签。
2.2 CSS简介解释CSS的定义和作用。
介绍CSS的基本语法和选择器。
2.3 布局和样式演示如何使用HTML和CSS创建基本的网页布局。
介绍常用的CSS布局技术和样式技巧。
第三章：JavaScript基础3.1 JavaScript简介解释JavaScript的定义和作用。
介绍JavaScript的基本语法和数据类型。
3.2 操作DOM介绍DOM（文档对象模型）的概念。
演示如何使用JavaScript操作DOM元素和属性。
3.3 事件处理介绍JavaScript中的事件处理机制。
演示如何使用JavaScript编写事件处理函数。
第四章：Web设计与用户体验4.1 用户体验概述解释用户体验的定义和重要性。
讨论用户体验设计的原则和方法。
4.2 界面设计介绍界面设计的基本原则，如布局、颜色和字体等。
演示如何使用HTML、CSS和JavaScript创建美观的界面。
4.3 交互设计解释交互设计的概念和重要性。
演示如何使用JavaScript和CSS创建交互式的Web元素。
第五章：Web设计与编程最佳实践5.1 代码规范与可维护性强调代码规范的重要性。
介绍常见的代码规范和最佳实践。
5.2 兼容性与性能优化讨论Web设计的兼容性和性能优化问题。
演示如何测试和优化Web页面的兼容性和性能。
5.3 网络安全与隐私保护介绍网络安全和隐私保护的基本概念。
讨论Web设计中应考虑的安全和隐私问题。
【传智播客.Net培训】视频课件：DOM编程
•
<body onbeforeunload="window.event.returnValue=' 真的要放弃发 帖退出吗？'">。显示的文字随浏览器版本而有差异。
—高级软件人才实作培训专家 其他事件
�
除了有特有的属性之外，当然还有通用的HTML元素的事件： onclick（单击）、ondblclick（双击）、onkeydown（按键按下 ）、onkeypress（点击按键）、onkeyup（按键释放）、 onmousedown（鼠标按下）、onmousemove（鼠标移动）、 onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动 到元素范围）、onmouseup（鼠标按键释放）等。
—高级软件人才实作培训专家 动态设置事件
可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样 function f1() { alert("1"); } function f2(){ alert("2"); } <input type="button" onclick="document.ondblclick=f1" value="关 联事件1" />//注意f1不要加括号。如果加上括号就变成了执行f1 函数，并且将函数的返回值复制给document.ondblclick <input type="button" onclick="document.ondblclick=f2" value="关 联事件2" />
—高级软件人才实作培训专家 window对象1
javascript高级程序设计
构成javascript 完整实现的各个部分：>javascript 的核心ECMAScript 描述了该语言的语法和基本对象；描述了该语言的语法和基本对象；>DOM 描述了处理页面内容的方法和接口；描述了处理页面内容的方法和接口；>BOM 描述了与浏览器进行交互的方法和接口；原始值和引用值在ECMAScript 中，变量可以存放两种类型的值，即原始值和引用值。
原始值是存储在栈中的简单数据段，原始值是存储在栈中的简单数据段，也就是说，也就是说，它们的值直接存储在变量访问的位置。
位置。
引用值是存储在堆中的对象，引用值是存储在堆中的对象，也就是说，也就是说，也就是说，存储在变量处的值是一个指针，存储在变量处的值是一个指针，存储在变量处的值是一个指针，指向存指向存储对象的内存处。
储对象的内存处。
为变量赋值时，为变量赋值时，ECMAScript ECMAScript 的解释程序必须判断该值是原始类型的，还是引用类型的。
要实现这一点，解释程序则需尝试判断该值是否为ECMAScript 的原始类型之一。
由于这些原始类型占据的空间是固定的，由于这些原始类型占据的空间是固定的，所以可将它们存储在较小的所以可将它们存储在较小的内存区域内存区域------------栈中。
栈中。
栈中。
ECMAScript 有5种原始类型，即underfined underfined 、、null null、、boolean boolean 、、number number、、stringECMAScript 提供了typeof 运算来判断一个值是否在某种类型的范围内。
注意：对变量或值调用typeof 运算符的时候返回object---object---的变量是一种引用的变量是一种引用类型或null 类型。
类型。
String 类型的独特之处在于，它是唯一没有固定大小的原始类型。
转换成字符串：转换成字符串：ECMAScript 的boolean 值、数字、字符串的原始值得有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。
JavaScript教案
JavaScript最新教案第一章：JavaScript简介1.1 课程目标了解JavaScript的历史和发展掌握JavaScript的基本概念和特点理解JavaScript在Web开发中的作用1.2 教学内容JavaScript的起源和发展JavaScript的语法和特点JavaScript的核心概念JavaScript在现代Web开发中的应用1.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答1.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料1.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第二章：JavaScript基础语法2.1 课程目标掌握JavaScript的基本语法和结构理解变量、数据类型和运算符的使用学会使用控制结构和函数2.2 教学内容JavaScript的基本语法和结构变量和数据类型的定义和使用运算符的种类和功能控制结构的作用和实现函数的定义和调用2.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答2.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料2.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第三章：JavaScript对象和数组3.1 课程目标理解对象的概念和作用掌握对象的创建和属性的操作学会使用数组和字符串的处理方法3.2 教学内容对象的概念和作用创建对象和使用构造函数属性和属性的操作数组的概念和操作方法字符串的处理和操作3.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答3.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料3.5 教学评估练习题和代码实现项目评估和反馈第四章：JavaScript事件处理4.1 课程目标理解事件的概念和作用掌握事件处理的方法和技巧学会使用事件监听器和事件委托4.2 教学内容事件的概念和作用事件处理的方法和技巧事件监听器的使用和实现事件委托的原理和应用4.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答4.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料4.5 教学评估练习题和代码实现项目评估和反馈第五章：JavaScript高级应用5.1 课程目标掌握JavaScript的高级特性学会使用ES6和ES7的新特性理解模块化和组件化的开发模式5.2 教学内容JavaScript的高级特性ES6和ES7的新特性模块化的概念和实现组件化的开发模式和应用5.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答5.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料5.5 教学评估练习题和代码实现项目评估和反馈第六章：JavaScript DOM操作6.1 课程目标理解DOM的概念和结构掌握DOM的查询和修改方法学会使用DOM事件处理和动画6.2 教学内容DOM的概念和结构DOM的查询方法（getElementById, getElementsByClassName, querySelector等）DOM的修改方法（添加、删除、修改元素和属性）DOM事件处理（事件监听器、事件流、事件对象）DOM动画的实现（transition, animation等）6.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答6.4 教学资源教案和演示文稿示例代码和练习题6.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第七章：JavaScript网络请求7.1 课程目标理解网络请求的概念和原理掌握JavaScript中网络请求的实现学会使用协议和REST API7.2 教学内容网络请求的概念和原理JavaScript中的网络请求（XMLHttpRequest, Fetch API）协议的基本概念和状态码REST API的设计原则和实现7.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答7.4 教学资源教案和演示文稿示例代码和练习题7.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第八章：JavaScript模块化和打包8.1 课程目标理解模块化的概念和优势掌握JavaScript模块化的实现学会使用打包工具和构建流程8.2 教学内容模块化的概念和优势JavaScript模块化的实现（CommonJS, ES6模块）打包工具的使用（Webpack, Parcel, Rollup）构建流程和自动化（Gulp, Grunt, npm scripts）8.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答8.4 教学资源教案和演示文稿示例代码和练习题8.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第九章：JavaScript前端框架9.1 课程目标理解前端框架的概念和作用掌握常见前端框架的使用学会前端框架的原理和扩展9.2 教学内容前端框架的概念和作用常见前端框架（React, Vue, Angular）的使用和比较前端框架的原理和扩展（组件化、状态管理等）9.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答9.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料9.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第十章：JavaScript项目实践10.1 课程目标理解项目实践的重要性掌握项目开发的流程和技巧完成一个简单的JavaScript项目10.2 教学内容项目实践的重要性项目开发的流程和技巧（需求分析、设计、编码、测试）完成一个简单的JavaScript项目（如待办事项列表、天气应用等）10.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答10.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料10.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈重点和难点解析一、JavaScript简介1.1 重点和难点解析JavaScript的历史和发展JavaScript的基本概念和特点JavaScript在Web开发中的作用二、JavaScript基础语法2.1 重点和难点解析变量和数据类型的定义和使用运算符的种类和功能控制结构的作用和实现函数的定义和调用三、JavaScript对象和数组3.1 重点和难点解析对象的概念和作用创建对象和使用构造函数属性和属性的操作数组的概念和操作方法字符串的处理和操作四、JavaScript事件处理4.1 重点和难点解析事件的概念和作用事件处理的方法和技巧事件监听器的使用和实现事件委托的原理和应用五、JavaScript高级应用5.1 重点和难点解析JavaScript的高级特性ES6和ES7的新特性模块化的概念和实现组件化的开发模式和应用六、JavaScript DOM操作6.1 重点和难点解析DOM的概念和结构DOM的查询方法DOM的修改方法DOM事件处理和动画七、JavaScript网络请求7.1 重点和难点解析网络请求的概念和原理JavaScript中的网络请求协议和REST API八、JavaScript模块化和打包8.1 重点和难点解析模块化的概念和优势JavaScript模块化的实现打包工具和构建流程九、JavaScript前端框架9.1 重点和难点解析前端框架的概念和作用常见前端框架的使用和比较前端框架的原理和扩展十、JavaScript项目实践10.1 重点和难点解析项目实践的重要性项目开发的流程和技巧完成一个简单的JavaScript项目全文总结和概括：本文针对“JavaScript最新教案”的十个章节进行了重点和难点的解析。
javaScript-DOM编程艺术
数组就是javaScript的内建对象。当我们用new 关键字去初 始化一个数组时，其实是在创建一个Array对象的新实 例。 Date对象可以用来存储和检索与一个特定的日期和时间有 关的信息。在创建Data对象的新实例时，javaScript解释器 将自动地使用当前的日期和时间对它进行初始化。 Var current_date = new Date(); Date()对象提供了getDay()、getHours()、getMonth()等 一系列方法。
数值，甚至可以把多种数据类型混在一起存入一个数组。 数组元素还可以是变量，例如： Var name=”john”; Beatles[0] = name ; 数组的元素还可以是一个数组的元素。数组的元素还可以 包含其他的数组。 6.关联数组 我们可以通过在填充数组时为每个新元素明确的给出下标 的方式来改变数组的默认的数值下标。在为新元素给出下 标时，不必局限于整数数字。数组下标可以是字符串。例 如： Var lennon = Array(); Lennon[“name”]=”john”; Lennon[“year”]=1940 ; 这个就称为是关联数组（associative array）。从某种意义上 讲，完全可以把所有的数组看作是关联数组。尽管数值数组的 下标是有系统自动创建的一些数字，但每个下标仍关联着一个 特定的值。数值数组完全可以被当作关联数组的一种特例来对 待。 用关联数组代替数值数组的做法意味着，我们可以通过各 个元素的名字而不是一个下标的数值来引用它们，这个可 以大大的提高脚本的可读性。 五、操作 1.算数操作符：（和java的用法基本是相同的（略）） 加号是个比较特殊的操作符，它既可以用于数值，也可以 用于字符串。 把多个字符串首尾相连在一起的操作叫做拼接 （concatenation）。这种拼接也可以通过变量来完成。 我们甚至可以把数值和字符串拼接在一起，因为javaScript 是一种弱类型语言，所以这种操作是被允许的。 2.条件语句 和java的用法基本相同（略） 3.比较操作符 和java的用法基本相同（略） 4.逻辑操作符 和java的用法基本相同（略）
dom常用话术
dom常用话术DOM（DocumentObjectModel）是一种用于处理HTML和XML文档的编程接口。
在Web开发中，DOM的重要性不言而喻，它是JavaScript 与HTML文档之间的桥梁，可以让我们通过JavaScript来操作HTML 文档中的元素。
本文将介绍一些常用的DOM话术，以帮助读者更好地理解和应用DOM。
1. 获取元素在操作HTML文档之前，我们需要先获取HTML文档中的元素。
DOM 提供了多种方法来获取元素，常用的有以下几种：1.1 getElementById该方法可以通过元素的id属性获取元素，返回值是一个元素对象。
例如，我们可以通过以下代码获取id为“demo”的元素：```javascriptvar demo = document.getElementById('demo');```1.2 getElementsByTagName该方法可以通过元素的标签名获取元素，返回值是一个HTMLCollection对象。
例如，我们可以通过以下代码获取所有的p 元素：```javascriptvar pList = document.getElementsByTagName('p');```1.3 getElementsByClassName该方法可以通过元素的class属性获取元素，返回值是一个HTMLCollection对象。
例如，我们可以通过以下代码获取所有class 为“demo”的元素：```javascriptvar demoList = document.getElementsByClassName('demo'); ```1.4 querySelector该方法可以通过CSS选择器获取元素，返回值是一个元素对象。
例如，我们可以通过以下代码获取第一个class为“demo”的p元素： ```javascriptvar demo = document.querySelector('p.demo');```1.5 querySelectorAll该方法可以通过CSS选择器获取多个元素，返回值是一个NodeList对象。
JS中文参考文档
JS中⽂参考⽂档#页⾯标签及概述1JavaScript, Landing, Learn, priority本部分将专注于 JavaScript 语⾔本⾝，⽽⾮局限于⽹页或其他限制环境。
2DOM, Extensions, Transforming_XML_with_XSLT, Web Development, XPath该篇⽂档描述了如何在扩展和⽹站内部通过JavaScript调⽤ XPath 接⼝。
Xpath 表达式可以在 HTML 和 XML ⽂档中使⽤。
3JavaScript, ⼯具, 扩展JavaScript shell 可以让你在不刷新⼀个⽹页的情况下测试⼀段代码。
这在开发和调试代码的时候⾮常有帮助。
4Differential Inheritance, JavaScript差异化继承是基于原型编程的⼀个常见模型，它讲的是⼤部分的对象是从其他更⼀般的对象中派⽣⽽来的的，只是在⼀些很⼩的地⽅进⾏了修改。
每个对象维护⼀个指向它们的prototype的引⽤和⼀个差异化属性列表。
5JavaScr, 严格相等, 同值相等, ⽐较, 相等, 零值相等, ⾮严格相等ES2015中有四种相等算法：6ECMAScript, JS, JavaScript, 参考本章介绍如何使⽤来开发应⽤程序。
7JavaScript No summary!8JavaScript这篇⽂章按照字母顺序列出了MDN⾥边所有的JavaScript⽅法。
9JavaScript, Reference, 参考, 总览本章介绍和说明了 JavaScript 中所有的标准的内置对象、以及它们的⽅法和属性。
10JavaScript, ⼆维数组, 全局对象, 参考⼿册, 数组JavaScript的Array对象是⽤于构造数组的全局对象，数组是类似于列表的⾼阶对象。
11...rest, ...spread, Array, Array.from(), ECMAScript 2015, JavaScript, Reference, arguments, polyfill Array.from()⽅法从⼀个类似数组或可迭代对象中创建⼀个新的，浅拷贝的数组实例。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第3章DOM本章内容●节点的概念●四个非常实用的DOM方法：getElementById、getElementsByTagName、getAttribute和s etAttribute终于要与DOM面对面了。
能够向大家介绍DO M是笔者的荣幸，我非常乐于带领大家通过DOM的眼睛去看世界。
3.1 文档：DOM中的“D”DOM是“Document Object Model”（文档对象模型）的首字母缩写。
如果没有document（文档），DOM也就无从谈起。
当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。
它将根据你编写的网页文档创建一个文档对象。
在人类语言中，“对象”这个词的含义往往不那么明确和具体，它几乎可以用来称呼任何一种客观存在的事物。
但在程序设计语言中，“对象”这个词的含义非常明确和具体。
3.2 对象：DOM中的“O”在上一章的末尾，我们向大家展示了几个JavaSc ript对象的例子。
你们应该还记得，“对象”是一种独立的数据集合。
与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方法。
JavaScript语言里的对象可以分为三种类型：真的不掉线吗？？、●用户定义对象（user-defined object）：由程序员自行创建的对象。
本书不讨论这种对象。
●内建对象（native object）：内建在JavaSc ript语言里的对象，如Array、Math和Date等。
●宿主对象（host object）：由浏览器提供的对象。
在JavaScript语言的发展初期，程序员在编写J avaScript脚本时经常需要用到一些非常重要的宿主对象，它们当中最基础的是window对象。
window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）——但我觉得称之为Window Object Model（窗口对象模型）更为贴切。
BOM向程序员提供了window.open和window.blur等方法，你们在上网冲浪时看到的各种弹出窗口和下拉菜单——其数量之多已经到了泛滥成灾的地步——几乎都是由这些方法负责创建和处理的。
难怪JavaScript会有一个不好的名声！值得庆幸的是，在这本书里我们不需要与BOM打太多的交道。
我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。
我们将着重探讨如何对网页的内容进行处理，而用来实现这一目标的载体就是d ocument对象。
在本书的后续内容里，我们将尽可能地只讨论do cument对象的属性和方法。
现在，我们已经对DOM中的字母“D”（docu ment，文档）和字母“O”（object，对象）做了解释，那么字母“M”又代表着什么呢？3.3 模型：DOM中的“M”DOM中的“M”代表着“Model”（模型），但说它代表着“Map”（地图）也未尝不可。
模型也好，地图也罢，它们的含义都是某种事物的表现形式。
就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个实际存在的城市那样，DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。
真的不掉线吗？？、既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。
要想看懂和使用地图，就必须知道这些记号的含义和用途——这个道理同样适用于DOM。
要想从DOM获得信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。
DOM把一份文档表示为一棵树（这里所说的“树”是数学意义上的概念），这是我们理解和运用这一模型的关键。
更具体地说，DOM把文档表示为一棵家谱树。
家谱树本身又是一种模型。
家谱树的典型用法是表示一个人类家族的谱系并使用parent（父）、chil d（子）、sibling（兄弟）等记号来表明家族成员之间的关系。
家谱树可以把一些相当复杂的关系简明地表示出来：一位特定的家族成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。
类似于人类家族谱系的情况，家谱树模型也非常适合用来表示一份用(X)HTML语言编写出来的文档。
请看下面这份非常基本的网页，它的内容是一份购物清单。
这份文档可以用图3-1中的模型来表示。
我们来分析一下这个网页的结构。
这种分析不仅可以让我们了解它是由哪些元素构成的，还可以让我们了解为什么图3-1中的模型可以如此完美地把它表示出来。
在对Doctype做出声明后，这份文档首先打开了一个<html>标签，而这个网页里的所有其他元素都包含在这个元素里。
因为所有其他的元素都包含在其内部，所以这个<html>标签既没有父辈，也没有兄弟。
如果这是一棵真正的树的话，这个真的不掉线吗？？、<html>标签显然就是树根。
图3-1把网页中的元素表示为一棵家谱树这正是图3-1中的家谱树以html为根元素的原因。
毫无疑问，html元素完全可以代表整个文档。
如果在这份文档里更深入一层，我们将发现<hea d>和<body>两个分枝。
它们存在于同一层次且互不包含，所以它们是兄弟关系。
它们有着共同的父元素< html>，但又各有各的子元素，所以它们本身又是其他一些元素的父元素。
<head>元素有两个子元素：<meta>和<title>（这两个元素是兄弟关系）。
<body>元素有三个子元素：<h1>、<p>和<ul>（这三个元素是兄弟关系）。
如果继续深入下去，我们将发现<ul>也是一个父元素。
它有三个子元素，它们都是<li>元素。
利用这种简单的家谱关系记号，我们可以把各元素之间的关系简明清晰地表达出来。
例如，<h1>和<ul>之间是什么关系？答案是它们是兄弟关系。
那么<body>和<ul>之间又是什么关系？<bod y>是<ul>的父元素，<ul>是<body>的一个子元素。
如果把各种文档元素想像成一棵家谱树上的各个节点的话，我们就可以用同样的记号来描述DOM。
不过，与使用“家谱树”这个术语相比，把一份文档称为一棵“节点树”更准确。
3.3.1 节点节点（node）这个名词来自网络理论，它代表着网络中的一个连接点。
网络是由节点构成的集合。
在现实世界里，一切事物都由原子构成。
原子是现实世界的节点。
但原子本身还可以进一步分解为更细小的亚原子微粒。
这些亚原子微粒同样是节点。
DOM也是同样的情况。
文档也是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。
真的不掉线吗？？、在DOM里存在着许多不同类型的节点。
就像原子包含着亚原子微粒那样，有些DOM节点类型还包含着其他类型的节点。
1. 元素节点DOM的原子是元素节点（element node）。
在描述刚才那份“购物清单”文档时，我们使用了诸如<body>、<p>和<ul>之类的元素。
如果把W eb上的文档比作一座大厦，元素就是建造这座大厦的砖块，这些元素在文档中的布局形成了文档的结构。
各种标签提供了元素的名字。
文本段落元素的名字是“p”，无序清单元素的名字是“ul”，列表项元素的名字是“li”。
元素可以包含其他的元素。
在我们的“购物清单”文档里，所有的列表项元素都包含在一个无序清单元素的内部。
事实上，没有被包含在其他元素里的唯一元素是<html>元素。
它是我们的节点树的根元素。
2．文本节点元素只是不同节点类型中的一种。
如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。
在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大多数内容都是由文本提供的。
在“购物清单”例子里，<p>元素包含着文本“D on’t forget to buy this stuff.”。
它是一个文本节点（text node）。
在XHTML文档里，文本节点总是被包含在元素节点的内部。
但并非所有的元素节点都包含有文本节点。
在“购物清单”文档里，<ul>元素没有直接包含任何文本节点——它包含着其他的元素节点（一些<l i>元素），后者包含着文本节点。
3．属性节点还存在着其他一些节点类型。
例如，注释就是另外一种节点类型。
但我们这里还想向大家再多介绍一种节点类型。
真的不掉线吗？？、元素都或多或少地有一些属性，属性的作用是对元素做出更具体的描述。
例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：在DOM中，title="a gentle reminder"是一个属性节点（attribute node），如图3-2所示。
因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点当中。
并非所有的元素都包含着属性，但所有的属性都会被包含在元素里。
图3-2一个元素节点，它包含着一个属性节点和一个文本节点在前面的“购物清单”示例文档里，我们可以清楚地看到那个无序清单元素（<ul>）有个id属性。
如果曾经使用过CSS，你们对id和class之类的属性应该不会感到陌生。
不过，为了照顾那些对CSS还不太熟悉的读者，我们下面将简要地重温几个最基本的CS S概念。
4．CSS：层叠样式表DOM并不是人们与网页的结构打交道的唯一手段。
我们还可以通过CSS（层叠样式表）告诉浏览器应该如何显示一份文档的内容。
类似于JavaScript脚本，对样式的声明既可以嵌在文档的<head>部分（这需要用到<style>标签），也可以放在另外一个样式表文件里。
利用CSS对某个元素的样式做出声明的语法与JavaScript函数的定义语法很相似：在样真的不掉线吗？？、式声明里，我们可以对浏览器在显示各有关元素时使用的颜色、字体和字号做出定义，如下所示：继承（inheritance）是CSS技术中的一项强大功能。
类似于DOM，CSS也把文档的内容视为一棵节点树。
节点树上的各个元素将继承其父元素的样式属性。
例如，如果我们为body元素定义了一些颜色或字体，包含在body元素里的所有元素都将自动获得——也就是继承，那些样式：这些颜色将不仅作用于那些被直接包含在<bod y>标签里的内容，还将作用于那些嵌套在body元素内部的所有元素。
这里是把刚才定义的样式应用在“购物清单”示例文档上而得到的网页显示效果。