document.getElementByclassName（）方法

最新推荐文章于 2024-01-27 16:45:42 发布
最新推荐文章于 2024-01-27 16:45:42 发布
阅读量10w+ 收藏 40
点赞数 15
文章标签： js

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文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML DOM</title>

</head>

<body>

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

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

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

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

<button onclick="myFc()">按钮</button>

<p><strong>注:</strong> IE8及之前浏览器不支持getElementsByClassName()方法</p>

<script>

function myFc() {

var x = document.getElementsByClassName("exp");

x[0].innerHTML = "嘿，你好！";

}

</script>

</body>

</html>

使用例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文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML DOM</title>

<style>

.exp{

border: 1px solid black;

margin: 5px;

}

.col{

color:blue;

}

</style>

</head>

<body>

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

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

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

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

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

<button onclick="myFc()">按钮</button>

<p><strong>注:</strong> IE8及之前浏览器不支持getElementsByClassName()方法</p>

<script>

function myFc() {

var x = document.getElementsByClassName("exp col");

x[0].style.backgroundColor = "red";

}

</script>

</body>

</html>

使用例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文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML DOM</title>

<style>

.exp{

border: 1px solid black;

margin: 5px;

}

.col{

color:blue;

}

</style>

</head>

<body>

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

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

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

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

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

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<p><strong>注:</strong> IE8及之前浏览器不支持getElementsByClassName()方法</p>

<script>

function myFc() {

var x = document.getElementsByClassName("exp");

document.getElementById("demo").innerHTML = x.length;

}

</script>

</body>

</html>

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


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

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

按钮

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

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML DOM</title>

<style>

.exp{

border: 1px solid black;

margin: 5px;

}

.col{

color:blue;

}

</style>

</head>

<body>

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

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

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

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

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

<button onclick="myFc()" class="col">按钮</button>

<p id="demo"></p>

<p><strong>注:</strong> IE8及之前浏览器不支持getElementsByClassName()方法</p>

<script>

function myFc() {

var x = document.getElementsByClassName("col");

var i;

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

x[i].style.backgroundColor = "red";

}

}

</script>

</body>

</html>

boat_sea
关注
  • 15
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
js document.getElementsByClassName的使用介绍与自定义函数
11-29
getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。 getElementByClassName()函数的使用方法： 使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,GetElementByClassName()只使用一个字符串值作为输入.并
浅谈javascript中的DOM方法
01-19
1:获取对象的三种方法 　　1)document.getElementById(id);通过对象的属性id来获取; 　　2)element.getElementByTagName(tag);通过标签名来获取; 　　3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法. 　　1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 　　2)object.setAttribute(attribute,value);设置元素的属性.==
document.getElementByClassName对吗?
fury的博客
01-27 352
是一个用于获取具有相同 class 名称的元素集合的方法。它返回一个包含所有符合条件的元素的 HTMLCollection 对象，可以通过索引来访问其中的元素。返回的是集合对象，即使只有一个元素匹配也会返回一个包含该元素的集合。document.getElementByClassName对吗?在 JavaScript 中，获取元素的方法是。此外，还可以使用其他选择器方法来获取元素，比如。，它们提供了更灵活和强大的选择器功能。
DOM操作获取元素节点及切换元素属性值
z_2532040197的博客
07-14 1308
DOM 是document object model （文档对象模型 ），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口；把文档中的代码翻译成一个对象模型。 在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象。 这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等。 ...
getElement四种方法返回的不同
weixin_33923762的博客
07-20 1万+
当想通过dom在js中获取单个html元素时，常用的四种方法有：getElementById("id")getElementsByClassName("className")getElementsByTagName("tagName")querySelector(".className")(或者#id或者直接写tag)但是，通过getElementsByClassName("className")...
（学习）document.getElementsByClassName()
weixin_48372590的博客
04-14 2万+
个人学习记录，根据别的博主的demo学习，并加上自己的学习标记，文章有标记来源
getElementsByClassName()的详细用法
热门推荐
caa112的博客
10-11 6万+
1.document.getElment(“id”).getElementsByClassName(“class”) 例子： html: <div id="Paris" class="tabcontent"> <span class="topright">&times;</span> </div> js: var Id=document....
getElementsByClassName() 定义与用法
LdleFlsh的博客
06-15 7180
getElementsByClassName() 方法 定义和使用 getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。 NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。 提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。 浏览器支持 谷歌4.0 ie浏览器9.0 ..
JS中获取元素的方法
weixin_43765641的博客
09-11 4780
2、document.getElment.querySelectorAll('选择器') 获取拥有此选择器的元素，获取的是一个数组。1、document.getElement.querySelector('选择器') 获取该选择器的第一个元素。2、不只是通过document对象获取元素，也可以通过父元素获取子元素。document.getElementsByClassName('class名')document.getElementByid('id名')注意：1、获取多个元素的，获取到的都是数组。
getElementsByClassName用法
biaoboke的博客
11-14 3万+
在学习JavaScript过程中，遇到的一点小问题，希望及时与大家分享，有不妥之处请不吝赐教。
JS中getElementsByClassName与classList兼容性问题解决方案分析
12-29
HTML5新添加了这个方法，这个方法可以通过document和html元素调用，接受一个参数，这个参数包含一个或多个类名的字符串，返回带有制定类型的NodeList（存在性能问题），传入的多个类型顺序不重要。这个方法仅仅在...
9种方法优化jQuery代码详解
11-21
用对选择器 在jQuery中，可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，应该了解它们的性能差异 ...Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName
jQuery代码优化方法总结
11-27
用对选择器 在jQuery中，可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，应该了解它们的性能差异 ...Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName
2010考研管理类联考综合能力答案解析.pdf
04-24
考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。
NumPy Matplotlib Matplotlib 是 Python 的绘图库 .zip
04-24
matplotlib绘图 通过 Matplotlib，开发者可以仅需要几行代码，便可以生成绘图、直方图、功率谱、条形图、错误图、散点图等。 Matplotlib基础知识 1.Matplotlib中的基本图表包括的元素 x轴和y轴 水平和垂直的轴线 x轴和y轴刻度 刻度标示坐标轴的分隔，包括最小刻度和最大刻度 x轴和y轴刻度标签 表示特定坐标轴的值 绘图区域 实际绘图的区域 2.hold属性 hold属性默认为True，允许在一幅图中绘制多个曲线；将hold属性修改为False，每一个plot都会覆盖前面的plot。 但是不推荐去动hold这个属性，这种做法（会有警告）。因此使用默认设置即可。 3.网格线 grid方法 使用grid方法为图添加网格线 设置grid参数（参数与plot函数相同） .lw代表linewidth，线的粗细 .alpha表示线的明暗程度 4.axis方法 如果axis方法没有任何参数，则返回当前坐标轴的上下限 5.xlim方法和ylim方法 除了plt.axis方法，还可以通过xlim，ylim方法设置坐标轴范围
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档）
04-24
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 第二章 需求分析 4 2.1可行性分析 4 2.1.1技术的可行性 4 2.1.2经济的可行性 4 2.1.3操作可行性 4 2.2需求调研 4 第三章 数据库设计 6 3.1数据库的分析与设计 6 3.1.1数据库的概念结构设计 6 3.1.2数据表的逻辑结构设计 7 第四章 系统功能实现 8 4.1 系统后台界面 8 4.2书籍类别管理 8 4.3 书籍信息界面 9 4.4竞拍管理界面 9 4.5 微信小程序首页 9 4.6书籍信息添加 10 4.7书籍竞拍界面 11 4.8用户后台界面 11 第五章 系统测试 12 5.1 系统测试的意义 12 5.2 系统测试的内容 12 5.3系统测试结果 12 总结 13
利用openCV控制单片机小车运动轨迹.zip
最新发布
04-24
利用openCV控制单片机小车运动轨迹.zip
基于Python的PCA人脸识别算法的原理及实现代码+文档详解.zip
04-24
基于Python的PCA人脸识别算法的原理及实现代码+文档详解.zip个人经导师指导并认可通过的98分课程设计项目，主要针对计算机相关专业的正在做课程设计、期末大作业的学生和需要项目实战练习的学习者。
document.getElementsByClassName
05-18
document.getElementsByClassName 是 JavaScript 中的一个方法，用于获取文档中具有指定类名的所有元素。它返回一个类数组对象，可以通过下标或迭代器访问元素。 例如，如果文档中有以下 HTML 代码： ```html <div class="box"> <p class="text">Hello World!</p> </div> <div class="box"> <p class="text">Goodbye World!</p> </div> ``` 我们可以使用以下代码获取所有类名为 "box" 的 div 元素： ```javascript var boxes = document.getElementsByClassName("box"); ``` 此时，boxes 就是一个类数组对象，包含两个元素，分别是两个 div 元素。我们还可以进一步获取每个 div 元素中类名为 "text" 的 p 元素： ```javascript for (var i = 0; i < boxes.length; i++) { var text = boxes[i].getElementsByClassName("text")[0].innerHTML; console.log(text); } ``` 上述代码会输出 "Hello World!" 和 "Goodbye World!"，分别对应两个 div 元素中的 p 元素中的文本内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值