吴裕雄--天生自然 JAVASCRIPT开发学习:HTML DOM 集合(Collection)

Posted tszr

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了吴裕雄--天生自然 JAVASCRIPT开发学习:HTML DOM 集合(Collection)相关的知识,希望对你有一定的参考价值。

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

<h2>javascript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

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

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style=‘color:red;‘> " + myCollection[1].innerHTML + </span>;
</script>

</body>
</html>

技术图片

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

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

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

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "文档包含" + myCollection.length + " 个段落。";
</script>

</body>
</html>

技术图片

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

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myCollection = document.getElementsByTagName("p");
    var i;
    for (i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
}
</script>

</body>
</html>

技术图片

 

以上是关于吴裕雄--天生自然 JAVASCRIPT开发学习:HTML DOM 集合(Collection)的主要内容,如果未能解决你的问题,请参考以下文章

吴裕雄--天生自然 JAVASCRIPT开发学习:对象 实例

吴裕雄--天生自然 JAVASCRIPT开发学习:测试 jQuery

吴裕雄--天生自然 JAVASCRIPT开发学习:函数定义

吴裕雄--天生自然 JAVASCRIPT开发学习:函数参数

吴裕雄--天生自然 JAVASCRIPT开发学习:HTML DOM 集合(Collection)

吴裕雄--天生自然 JAVA开发学习:继承