[关闭]
@tsingwong 2016-02-13T15:03:54.000000Z 字数 4232 阅读 881

DOM day1

JavaScript DOM

1. 文档："D"

D，即document(文档)。没有文档，DOM无从谈起。当创建一个网页并将其加载到web浏览器时，DOM悄然而生。

2. 对象："O"

O，即Object(对象)。
在JavaScript语言中对象大体分为三种类型：

3. 模型："M"

M，即Model(模型)。
任意的网页文档都可以转化成一个节点树。

4. 节点

节点(node)表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM中，文档是由节点构成的集合。

元素节点
元素的名字就是标签的名字。例如，文本段落元素的名字是“p”，无序清单元素的名称是“ul”，列表项元素的名字是“li”。    元素可以包含其他元素。实际上，没有被包含在其他元素里的唯一元素是<html>元素，他是节点树的跟元素。
文本节点
例如<p>元素中包含文本"Don't forget to buy this stuff."。这是一个文本节点。文本节点总是被包含在元素节点内部。但反之不一定成立。
属性节点
例如，"<p title="a gentle reminder">Don't forget to buy this stuff.</p>"中，title="a gemtle reminder"是一个属性节点。可对元素里的东西做出准确的描述。   因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。但反之不一定成立。

5. 层叠样式表

层叠样式表，即通常所称的CSS。类似JavaScript的脚本语言，对样式的声明即可以嵌在文档的<head>部分（<style>标签之间）,也可以放在另一个样式表文件中。

类似DOM，CSS也把文档的内容视为一颗节点树。节点树上的各个元素将继承其父元素的样式属性。故为了把某一个或某几个元素与其他元素区别开来，需要使用 class 属性或 id 属性。

1. class 属性

可以在所有元素上任意应用class属性：

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

在样式表中，可以为这样的class属性值相同的所有元素定义同一种样式：

  1. .special{
  2.     font-style: itakic;
  3. }

也可以利用class属性为一种特定类型的元素定义一种特定的样式：

  1. h2.special{
  2.     text-transform:uppercase;
  3. }
2. id 属性

id 属性用途是给网页里的某个元素加上一个独一无二的标识符，例如:

    <ul id="purchases">

在样式表里，可以为有特定id属性值的元素定义一个独享的形式：

  1. #purchases{
  2.     border:1px solid white;
  3.     background-color: #333;
  4.     color: #ccc;
  5.     padding: 1em;
  6. }

尽管id本身只能使用一次，样式表可以利用id属性为包含在该特定元素里的其他元素定义样式。

  1. #purchases li {
  2.     font-weight:bold;
  3. }

6. 获取元素

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

1. getElementById

该方法将返回一个与那个给定id属性值的元素节点对应的对象。注：JavaScript语言严格区分父母大小写。
他是document对象特有的函数。getElementById方法只有一个参数：你想获得的那个元素的id属性的值。这个id值必须放在单引号或双引号中。

document.getElementById(id)

例如：

    document.getElementById("purchases")
2. getElementsByTagName

该方法返回一个对象数组，每个对象分别对应着文档里给定标签的一个元素。类似getElementById，这个方法也只有一个参数：

elemt.getElementsByTagName(tag)

它与getElementById方法有许多相似之处，但它返回的是一个数组。例：

    document.getElementsByTagName("li")

该调用返回一个对象数组，每个对象分别对应着document对象中的一个列表项元素。
getElementsById允许把一个通配符作为其参数，意味着文档中每个元素都将在这个函数所返回的数组里。通配符 * 必须放在引号中，为了区分通配符与乘法操作符。例想知道文档中总共有多少个元素节点，可以使用

    alert(document.getElementsByTagName("*").length);

还可以将getElementById与getElementByTagName结合起来运用。例只想知道id属性值是purchase的元素包含多少个列表项：

  1. var shopping = document.getElementById("purchases");
  2. var items = shopping.getElementsByTagName("*");
3. getElementsByClassName

该方法通过class属性中的类名来访问元素。与上面两个方法类似，getElementsByClassName也只能接受一个参数，即类名：

getElementsByClassName(class)

该方法返回值是一个具有相同类名的元素的数组。例如下面这行代码返回一个数组，其中包含类名为"sale"的所有元素：

document.getElementsByClassName("sale")

使用该方法还可以查找那些带有多个类名的元素。即指定多个类名，在字符串参数中用空格分隔开类名。例如：

alert(document.getElementsByClassName("important sale").length);

同样的，getElementByClassName方法可以组合上两个方法使用。例如想知道在id为“purchases”元素中有多少类名包含“sale”列表项，可以先找到特定对象，然后调用getElementsByClassName：

  1. var shopping = document.getElementById("purchases");
  2. var sales = shopping.getElementsByClassName("sale");

getElemenysByClassName方法非常有用，但只有较新的浏览器支持。故一般使用已有的DOM方法来实现自己的getElementsByClassName，适用于新老浏览器：

  1.     function getElementsByClassName(node, classname){
  2.         if (node.getElementsByClassName) {
  3.             //使用现有方法
  4.             return node.getElementsByClassName(classname);
  5.         } else {
  6.             var results = new Array();
  7.             var elems = node.getElementsByTagName("*");
  8.             for (var i = 0; i < elemes.length; i++) {
  9.                 if (elems[i].className.indexOf(classname) != -1) {
  10.                     results[results.length] = elemes[i];
  11.                 }
  12.             }
  13.             return results;
  14.         }
  15.     }

这个 getElementsByClassName 函数接受两个参数，第一个nod表示DOM树中的搜索起点，第二个classname就是要搜索的类名。如果传入节点上已经存在适当的getElementsByClassName函数，那么新函数直接返回相应的节点列表。如果不存在，新函数循环遍历所有标签，查找带有相应类名的元素。（这个例子不适用多个类名。）

7. 获取和设置属性

1. getAttribute

只有一个参数——即打算查询的属性名字：

object.getAttribute(attribute)

该方法不属于 document 对象，故不能通过 document 对象调用。只能通过元素节点调用。例如，下例为获取每个<p>的title属性：

  1. var paras = document.getElementsByTagName("p");
  2. for (var i=0; i < paras.length;i++){
  3.     var title_text = paras[i].getAttribute("title");
  4.     if(title_text) alert(title_text);
  5. }
2. setAttribute

该方法允许对属性节点值做出修改。与 getAttribute 一样，setAttribute也只能用于元素节点：

    object.setAttribute(attribute,value)

例如：

  1. var paras = document.getElementsByTagName("p");
  2.     for (var i = 0; i < paras.length; i++) {
  3.         var title_text = p aras[i].getAttribute("title");
  4.         if (title_text) {
  5.             paras[i].setAttribute("title", "brand new title text");
  6.             alert(paras[i].getAttribute("title"));
  7.         }
  8.     }

上述代码先从文档里获取全部带有title属性的<p>元素，然后将它们的title属性值都修改成 brand new title text 。
注： setAttribute 做出的修改不会反映在文档本身的源代码里。
原因： DOM工作模式，先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。即，对页面内容进行刷新却不需要在浏览器里刷新页面。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注