getElementsByClassName()方法

getElementsByClassName()方法

目的是根据类名来获取一个nodel节点。同一个类有好多节点,但是呢可以自己选取。用x[0]诸如此类。
如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div class="example">第一 Div 元素 class="example"。</div>
<div class="example">第二个 Div 元素 class="example"。</div>
<p>点击按钮修改第一个 Div 元素的文本信息(索引值为 0 的 class="example")。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>


<script>
    function myFunction(){
        x=document.getElementsByClassName("example");
        x[0].innerHTML="hello,world!";
    }
</script>

</body>
</html>

分析

x=document.getElementsByClassName("example");
这一句document是对象。getElementsByClassName("example")是方法。example是参数。
x[0].innerHTML="hello,world!";
这一句是给nodelist的第一个node的innerHTML属性赋值。代表标签之间的文字。

参考

HTML DOM innerHTML 属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,817评论 0 8
  • 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课...
    前端进阶之旅阅读 12,813评论 13 94
  • 1.感恩妈妈睡在隔壁 女儿睡在身边的踏实 虽然会睡的横七竖八 不定时的还要对我人身攻击 但是很依赖这空气里都弥漫着...
    九数泉馨七悦阅读 260评论 -2 2
  • 食堂的饭从来不香,菜也是。即便如此,食堂客流量还是大的离谱,它就在那儿,你爱来不来。食堂里养的狗和掌勺老刘关系不错...
    JENX阅读 166评论 0 1
  • 我想人生在路上,你我也不止远方。 一个人的路,艰苦劳累也要走下去;两个人的路,打打闹闹,分分合合也要走...
    小小的旸旸阅读 287评论 1 2