［笔记4］JavaScript DOM编程艺术_DOM
DOM
当创建了一个网页并把它加载到Web浏览器中时，你编写的网页文档就会转换为一个文档对象
对象
JS语言里的对象可以分为三种类型：
- 用户定义对象：由程序猿自行创建的对象
- 内建对象：内建在JS语言里的对象，如Array，Date，Math
- 宿主对象：由浏览器提供的对象（最基础的对象是window对象）
PS:一直在用，却不知道它的基础分类
window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型）。BOM提供了window.open和window.blur等方法。
document的主要功能就是处理网页内容
DOM代表着加载到浏览器窗口的当前网页。DOM把一份文档表示为一棵树。更具体的说，DOM把文档表示为一棵家谱树。家谱树本身就是一种模型。DOM的原子是元素节点
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
| 节点分类 | 实例 |
|---|---|
| 属性节点 | title="a gentle reminder" |
| 文本节点 | Don't forget to buy this stuff |
CSS
CSS层叠样式表，告诉浏览器应该如何显示一份文档的内容。
语法：
selector｛
property:value;
｝
继承是CSS技术中的一项强大功能。CSS也把文档的内容视为一颗节点树。节点树上的各个元素将继承其父元素的样式属性。
例子：
body｛
color:white;
background-color:black;
｝
这些颜色不仅作用域那些直接包含在<body>标签里的内容，还将作用域嵌套在body元素内部的所有元素。
为了把某一个或某几个元素与其它元素区分开来，需要使用class属性或者id属性
PS：class属性可以帮了对多个元素进行样式定义。id属性是在网页里的某个元素加上一个独一无二的标志符，为特定id属性值的元素定义一种独享的样式。
尽管id本身只能使用一次，样式表还是可以利用id属性为包含在该特定元素里的其它元素定义样式。
purchases li{
font-weight:bold;
}
获取元素
三种方式获得元素节点，分别是通过元素ID、通过标签名字和通过类名来获取。
- getElementById 是document对象特有的函数。document.getElementById(id)，例如：document.getElementById("purchases")
typeof操作符用来验证操作数是一个字符串、数值、函数、布尔值还是对象。如 typeof document.getElementById("purchases"),它的值是object。
文档中的每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象。
- getElementsByTagName 如果你的元素没有id，可以通过该方法获取没有id属性的对象。该方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的元素。例如：document.getElementByTagName("li")
getElementsByTagName允许把一个通配符作为它的参数。通配符（星号字符“＊”）必须放在引号里，这是为了让通配符与乘法操作符有所区别。
如果你想知道某份文档里总共有多少个元素，用通配符即可。
document.getElementsByTagName("*").length;
实例：getElementById和getElementsByTagName结合起来运用。如果想知道id属性值是purchase的元素包含着多少个列表项，必须通过一个更具体的对象去调用这个方法。
var shopping＝document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");
- getElementsByClassName 通过class属性中的类名来访问元素。返回具有相同类名的数组元素。使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名，只要用空格分隔类名即可。其中类名的顺序不重要
知识盘点：
- 一份文档就是一颗节点树
- 节点分为不同的类型：元素节点、属性节点和文本节点
- getElementById返回一个对象，该对象对应着文档里的一个特定的元素节点。
- getElementsByTagName和getElementByclassName将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点。
- 每个节点都是一个对象
获取和设置属性
getAttribute
object.getAttribute(attribute)获取元素属性。注意它不属于document对象，所以不能用document对象调用。只能通过元素节点对象调用。
在JavaScript中null的含义是“没有值”，if(something)与if(something!=null)完全等价，如果something存在，则if语句的条件将为真；如果something不存在，则if语句的条件将为假。
setAttribute
setAttribute允许对属性节点值作出修改，与getAttribute一样，setAttribute也只能用于元素节点。object.setAttribute(attribute,value)
如果一个元素没有对应属性。setAttribute实际上完成两个操作：先创建这个属性，然后设置它的值。
一个非常值得关注的细节：通过setAttribute对文档做出修改后，在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的属性值，也就是说setAttribute做出修改不会反映在文档本身的源代码里。这种表里不一的现象源自于DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要再浏览器里刷新页面。
