html中document.getElementsByClassName() 方法

html中document.getElementsByClassName函数的使用方法

    • 定义和使用
    • 使用方法

定义和使用

getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示: 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。

使用方法


<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)title>
head>
<body>

<ul class="qipa250">
  <li class="child">Coffeeli>
  <li class="child">Teali>
ul>
<p>点击按钮修改第一个列表项的文本信息 (索引值为 0)。p>
<button onclick="myFunction()">点我button>
<p><strong>注意:strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。p>
<script>
function myFunction() {
    var list = document.getElementsByClassName("qipa250")[0];
    list.getElementsByClassName("child")[0].innerHTML = "Milk";
}
script>

body>
html>

<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)title>
<style>
div {
    border: 1px solid black;
    margin: 5px;
}
style>
head>
<body>

<div id="qipa250DIV">
  <p class="child">div 元素中第一个 class="child" 的 p 元素 (索引值为 0).p>
  <p class="child">div 元素中第二个 class="child" 的 p 元素 (索引值为 1).p>
  <p class="child">div 元素中第三个 class="child" 的 p 元素 (索引值为 2).p>
div>
<p>点击按钮为 div 元素中第二个 class="child" 的 p 元素添加背景颜色。p>
<button onclick="myFunction()">点我button>
<p><strong>注意:strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。p>
<script>
function myFunction() {
    var x = document.getElementById("qipa250DIV");
    x.getElementsByClassName("child")[1].style.backgroundColor = "red";
}
script>

body>
html>

你可能感兴趣的:(Html,Javascript,Jquery)