JavaScript DOM编程艺术（第2版）学习笔记1（1~4章）

第一章一些基本概念

HTML（超文本标记语言），构建网页的静态结构，由一系列的DOM组成；

CSS（层叠样式表），给网页各部分结构添加样式；

JavaScript，通过获取DOM给静态结构加上动作，使用户能够与静态网页进行交互；

DOM，一种API（应用程序接口），通过这个接口动态的访问和修改结构或样式。

浏览器内核，即渲染引擎（rendering engine），造成不同浏览器之间存在兼容问题。渲染引擎负责对html和js文档进行解释并决定浏览器如何显示网页内容及样式。目前常用的几种浏览器引擎，Safari&chrome--WebKit，firefox--Gecko，IE--Trident。

第二章 Javascript语法

html的基本结构：

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8"/>
  <title></title>
</head>

<body></body>

</html>

js代码必须通过html实现，有两种方法：

1，把代码放在head中的script标签内

2，把代码单独存为js文件，在script标签中引用js文件路径，script标签可以放在head或body中，放在body中效率更高

由于之前学过廖雪峰的JavaScript基础教程，本书的第二章只是简单的回顾。

第三、四章操作DOM的方法和属性

1，节点分为三种，元素节点，文本节点，属性节点，文本节点和属性节点包含在元素节点中

2，css负责给各元素添加样式，为了精准的定位到唯一的元素，给元素添加class属性或id属性。

class属性可以应用到多个元素上，css中用 .class名给一类元素添加样式；

id属性只能应用到唯一元素上，css中用 #id名给唯一的元素添加样式；

3，获取元素的方法，属于document对象

getElementById；getElementsByClassName；getElementsByTagName

id对应唯一的元素，所以方法为单数element；class和tag对应多个元素，所以方法为复数elements

使用方法：

var test=document.getElementById('id名'); 返回元素节点，每个元素节点都是一个对象，所以返回的数据类型为对象

tag和class方法可以用for循环遍历一组元素

4，获取和设置元素的属性，属于元素节点对象

获取属性getAttribute，一个参数，需要获取的属性名。

设置属性setAttribute，两个参数，需要修改的属性名，修改后的值。

注意：1）当属性不存在时，先创建属性，再给属性赋值

2）通过setAttribute修改属性值后，在浏览器中查看源代码时仍显示修改前的值，这是由于DOM的工作模式，先静态加载页面结构再动态刷新，动态刷新不影响静态结构，不在浏览器里刷新页面提高网页打开的速度

5，一些常用的元素节点对象的属性

childNodes，获取某一元素的全部子节点

注意：返回的是数组，但不能用length获取该节点子元素的个数，因为childNodes返回的不只有元素节点，所有的节点都计算在内

两种简化写法：

firstChild，等价于childNodes[0]，第一个元素

lastChild，等价于childNodes[childNodes.length-1]，最后一个元素

nodeType，返回数字判断节点的类型，元素节点1；属性节点2；文本节点3

nodeValue，获取节点的值