1、文档：DOM中的“D”
"D"代表document(文档)
2、对象：DOM中的“O”
“O”代表object(对象)
对象的分类
- 用户定义对象(user-defined object)
- 内建对象(native object)
- 宿主对象(host object)
window对象
window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型）
BOM提供了window.open和window.blur等方法。以至于被滥用于各种弹出窗口和下拉菜单
3、模型：DOM中的“M”
“M”代表“Model”（模型）
DOM把一份文档表示为一棵树（数学意义上的概念）
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shoping 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">Cheese<li>
<li class="sale important">Milk<li>
</ul>
<body>
</html>
代码中<html>相当于树根，即根元素。<head>和<body>属于下一个分支，位于同一层次且互不包含，属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h1>、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。
如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确
4、节点
节点（node）属于网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况，文档是由节点构成的集合。
- 元素节点
- 文本节点
- 属性节点
4、1元素节点
DOM的原子是元素节点（element node）诸如<body>、<p>、<ui>之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是<html>元素，它是我们的节点树的根元素。
4、2文本节点
在上述例子中，<p>元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点（text node）。
4、3属性节点
属性节点是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述：
<p title="a gentle reminder">Don't forget to buy this stuff.<p>
在DOM中title="a gentle reminder"是一个属性节点（attribute node），在前面的例子中无序清单元素<ul>有个id属性。有些清单元素<li>有class属性。
三者之间的关系.png
4、4 CSS
类似javascript脚本，我们也可以将CSS样式嵌在文档<head>部分（style>标签之间）。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式：
<link type="text/css" href="file.css" rel="stylesheet">```
**继承（inheritance)**是CSS技术中的一项强大功能。
1)、 class属性
```html
<p class="special">This pargraph has the special class<p>
<h2 class="special">So dose this headline</h2>```
在样式表里可以为上面的代码进行定义
```css
special{
font-style: italic;
}```
还可以这样定义
```css
h2.special{
text-transform: uppercase;
}```
2)、id属性
id属性的用途是给网页里的某个元素加上一个独一无二的标识符：
```html
<ul id="purchases">```
样式表定义
```css
#purchases{
border:1px solid white;
background-color：#333;
color：#ccc;
padding:1em;
}```
```css
#purchases li{
font-weight:bold;
}```
####4、5获取元素
> 有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名和通过类名字来获取
- **getElementById**
- **getElementsByTagName**
- **getElementsByClassName**
###1)getElementById
此方法将返回一个与那个有着给定id属性值的元素节点对应的对象，**在javascript里注意大小写**。它是document对象特有的函数，在脚本代码里，函数名的后面必须跟有**一对圆括号**，这对圆括号包含这**函数的参数。**`document.getElementById(id)`在getElementById方法中只有一个参数：**你想获得的那个元素的id属性的值，**这个id属性必须放在单引号或双引号里。`docment.getElementById("purchases")`这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTLM id属性值是`purchases`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shoping 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">Cheese<li>
<li class="sale important">Milk<li>
</ul>
<script>
alert(typeof docment.getElementById("purchases"));
</script>
<body>
</html>
//利用`typeof`操作符进行验证（typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。
验证可得是一个对象
2)getElementsByTagName
getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字：decument.getElementByTagName(tag)
alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shoping 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">Cheese<li>
<li class="sale important">Milk<li>
</ul>
<script>
var items=document.getElementByTagName("li");
for (var i=0; i<items.length;i++){
alert(typeof items[i]);
}
</script>
<body>
</html>
//代码运行结果显示三个alert对话框，显示的消息都是“object”。
getElementsByTagName允许把一个通配符作为它的参数，通配符（*）必须放在引号里
alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");
//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素
3)getElementByClassName
这个方法让我们能够通过class属性中的类名来访问元素，getElementByClassName也只接受一个参数，就是类名：
getElementByClassName(class)```
这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组。
```javascript
document.getElementsByClassName("sale")```
利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可
```javascript
alert(document.getElementsByClassName("important sale").length);
//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。
也可以和getElementById组合使用
var shopping=document.getElementById("purchase");
var sales=shopping.getElementsByClassName("sale");
sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。
getElementByClassName方法非常有用，但只有较新的浏览器才支持它。所以，需要使用已有的DOM方法来实现自己的getElementsByClassName。
function getElementsByClassName(node,classname){
if (node.getElementsByClassName){
//使用现有的方法
return node.getElementsByTagName("*");
for (var i=0; i<elems.length;i++){
if(elems[i].ClassName.indexof(classname)!= -1){
results[results.length]=elems[i];
}
}
return results；
}
}```
####5 获取和设置属性
- **getAttribute方法**(获取元素的属性)
- **setAttribute方法**(更改属性节点值)
#####5、1getAttribute
getAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)
```html
object.getAttribute(attribute)```
getAttribute只能通过元素节点对象调用。
例如，可以与getElementByTagName方法合用获取每个`<p>`元素的title属性
```html
var paras = document.getElementByTagName("p");
for (var i=0; i<paras.length; i++){
alert(paras[i].getAttribute("title"));
}
代码运行后显示着文本“a gentle reminder”的alterdui
网友评论