JavaScript学习总结（一）DOM文档对象模型

一、文档(D)

　　一个网页运行在浏览器中，他就是一个文档对象。

二、对象（O）

　　“对象”是一种自足的数据集合。与某个特定对象相关联的变量被称为这个对象的属性，只能通过某个对象调用的函数被称为这个对象的方法。

　　JavaScript中有三种类型的对象：

　　①用户自定义对象：不做了解

　　②内建对象（native object）：JavaScript中一开始就存在的。列如Array，Math，Date等（JavaScript语法区分大小写）

　　③宿主对象（host object）：由浏览器提供的对象。列如window对象，尽量不使用这种对象。

三、模型（M）

　　DOM中M，既Model模型，代表这某种一类事物的表现形式，浏览器提供了网页的模型，JavaScript读取模型，获取信息，操作DOM。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title></title>

    </head>

    <body>

        <h1>DOM</h1>

        <ul>

            <li>1</li>

            <li>2</li>

        </ul>

    </body>

</html>

html代表整个文档，<html>标签下包含两个分支<head>和<body>,<body>下包含<h1>和<ul>,<ul>下包含<li>。这些节点元素组成了一个完整的网页。JavaScript通过获取节点元素来操作DOM模型。

四、DOM对象获取元素节点的方法

1.getElementById

　　document对象特有的函数。document.getElementById（id），id对应节点元素的id值，用“id的值”或'id的值'表示。改方法返回的是一个对象object

2.getElementsByTagName

　　getElementsByTagName类似于getElementById，它的参数是标签的名字；列如想获取标签li的对象，即为document.getElementsByTagName(“li”)，返回类型为object数组。获取某个文档有多少个元素节点可以用alert（document.getElementByTagName("*").length）。*为通配符，代表所有元素节点。

3.getElementByClassName

　　getElementByClassName为HTML5新增方法，通过class属性中的类型访问元素。getElementByClassName（class）也与getElementsByTagName类似，返回值也是一个具有相同元素的数组。

五、获取和设置属性

1.getAttribute

　　getAttribute是一个函数，可以返回一个元素的属性值。object.getAttribute("元素")

　　例如获取p元素的title属性

var paras = document.getElementTagName("p");

for(var i=0;i<paras.length;i++){

alert(paras[i].getAttribute("title"));+}

2.setAttribute

　　设置修改元素节点的值,只能用于元素节点。

objet.setAttribute(attribute,value)

秒客网