学习笔记之Document Object Model（1）——如何使用document获得文档元素（element对象）

1树结构

一个HTML代码可以看作一个DOM节点图,

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>style样式</title>
    </head>
    <body>
        <h2 id="con">I love JavaScript</H2>
        <p name="show"> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
        <ul>
            <li>Javascript</li>
            <li>DOm</li>
        </ul>
    </body>
</html>

常见的节点类型有三种：

1>元素节点：<head></head>;<h2></h2>....

2>文本节点：就是指在那些标签之间的文字，被页面显示出来的文字；

3>属性节点：就是每个标签的属性；

我们想要操作这些节点（想要修改它们的属性，修改内容）,必须先的获取元素，获取元素的方法有以下几种：

1.document.getElementById():通过ID属性选取元素；

2.document.getElementsByName():通过name属性选取元素；

3.document.getElementsByClass():通过CSS样式名选取元素；

4.document.getElementsByTagName():通过标签名选取元素。

注意：除了getElementById方法获得的是唯一元素，其他方法都将获得的是一个元素的集合（数组）。因为ID唯一，name不一定唯一。

1. getElementById()具体说明

HTML元素都可以有一个id属性，在文档中该属性必须唯一。getElementById()是DOM中提供的方法，通过这个方法可以获取对应id属性的元素节点对象。其使用方式如下：

var ele = document.getElementById('con');

在IE8及其早期版本中，getElementById()方法匹配元素时不区分大小写，且会返回name属性元素，在使用时应该注意。

2. `getElementsByName()`具体说明

HTML的name属性最初用于为表单元素分配名字，表单数据提交到服务器后服务器通过该属性获取元素值。与id属性不同，name属性不一定是唯一的。通过Document对象的getElementsByName()方法可以获取指定name属性的元素。注意：该方法会返回一个包含若干Element对象的集合。其使用方式如下：

var eles = document.getElementsByName('show');
eles[0]; //访问第一个名为itbilu的元素

在IE8及其早期版本中，getElementsByName()方法不存在，在IE8中该方法会将对应id属性的元素也返回，在使用时应注意。

3. `getElementsTagName()具体说明`

与getElementsByName()方法类似，getElementsTagName()方法也会返回一个Element对象集合。不同的是，getElementsTagName()方法是通过标签名选取元素的。如，选取所有div元素，可以使用如下方法：

var divs = document.getElementsTagName('p');

4. `getElementsClassName()具体说明`

HTML的class属性值是一个空格分隔的样式名列表，在JavaScript中使用Element对象className属性存储HTML元素的class属性值。通过code>Document对象的getElementsClassName()，可以返回包含指定CSS样式的Element对象集合。使用方式如下：（因为上面例程没有添加CSS样式，在这里添加一下）

.game{
   width:560px;
   margin:5px auto;
}

<div class="game">
   <canvas id="canvas" width="560" height="560"></canvas>
   <div id="msg"></div>
   <input type="button" value="上一关" onClick="NextLevel(-1)">
   <input type="button" value="下一关" onClick="NextLevel(1)">
   <input type="button" value="重玩本关" onClick="NextLevel(0)">
   <input type="button" value="游戏说明" onClick="showHelp()">
</div>

var eles = document.getElementsClassName('game');

在IE8及其早期版本中，getElementsClassName()方法不支持，在使用时应注意。

迷茫的小羊

原创文章 24 获赞 45 访问量 3万+

关注私信