document.getElementByclassName（）方法

document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)

使用getElementByclassName（）方法，使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。

节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。

注：使用节点列表对象的length属性获取相同特定class属性值的元素的数量， 然后根据索引值获取想要的元素相关信息。

如果不存在指定的id属性时，返回NULL

addEventListenver()方法的语法、参数、及返回值

语法	document.getElementByclassName（元素的class属性值）
参数
元素的class属性值	String型 必须；想获取的元素的class属性值,可以同时指定多个属性值如"exp col"
DOM 版本	DOM 1
返回值	节点列表对象，代表了所有相同class属性值的元素集合，根据相关元素出现的先后进行排序

使用例1 改变第一个div元素的内容



第一个class属性值为exp的div元素.

第二个class属性值为exp的div元素.

第三个class属性值为exp的div元素.

点击以下按钮，改变第一个div元素的内容

按钮

注: IE8及之前浏览器不支持getElementsByClassName()方法

HTML+Javascript文件

charset="UTF-8">

class="exp">第一个class属性值为exp的div元素.

class="exp">第二个class属性值为exp的div元素.

class="exp">第三个class属性值为exp的div元素.

点击以下按钮，改变第一个div元素的内容

onclick="myFc()">按钮

注: IE8及之前浏览器不支持getElementsByClassName()方法

使用例2 改变classs属性为 exp col的第一个div元素的背景颜色



class属性值为exp的div元素.

class属性值为exp的div元素.

class属性值为exp col的div元素.

class属性值为exp col的div元素.

点击以下按钮，改变classs属性为 exp col的第一个div元素的背景颜色

按钮

注: IE8及之前浏览器不支持getElementsByClassName()方法

HTML+Javascript文件

charset="UTF-8">

class="exp">class属性值为exp的div元素.

class="col">class属性值为exp的div元素.

class="exp col">class属性值为exp col的div元素.

class="exp col">class属性值为exp col的div元素.

点击以下按钮，改变classs属性为 exp col的第一个div元素的背景颜色

onclick="myFc()">按钮

注: IE8及之前浏览器不支持getElementsByClassName()方法

使用例3 获取class属性值为 exp的div元素的个数



class属性值为exp的div元素.

class属性值为exp的div元素.

class属性值为exp col的div元素.

class属性值为exp col的div元素.

点击以下按钮，获取class属性值为 exp的div元素的个数

按钮

注: IE8及之前浏览器不支持getElementsByClassName()方法

HTML+Javascript文件

charset="UTF-8">

class="exp">class属性值为exp的div元素.

class="col">class属性值为exp的div元素.

class="exp col">class属性值为exp col的div元素.

class="exp col">class属性值为exp col的div元素.

点击以下按钮，获取class属性值为 exp的div元素的个数

onclick="myFc()">按钮

id="demo">

注: IE8及之前浏览器不支持getElementsByClassName()方法

使用例4 改变所有class属性值为 col的元素的背景颜色



class属性值为exp的div元素.

class属性值为exp的div元素.

class属性值为exp col的div元素.

class属性值为exp col的div元素.

点击以下按钮，改变所有class属性值为 col的元素的背景颜色

按钮

注: IE8及之前浏览器不支持getElementsByClassName()方法

HTML+Javascript文件

charset="UTF-8">

class="exp">class属性值为exp的div元素.

class="col">class属性值为exp的div元素.

class="exp col">class属性值为exp col的div元素.

class="exp col">class属性值为exp col的div元素.

点击以下按钮，改变所有class="col">class属性值为 col的元素的背景颜色

onclick="myFc()" class="col">按钮

id="demo">

注: IE8及之前浏览器不支持getElementsByClassName()方法