首页 > 代码库 > JavaScript学习总结(一)DOM文档对象模型

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类似,返回值也是一个具有相同元素的数组。

  

 

JavaScript学习总结(一)DOM文档对象模型