<!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)的更多相关文章

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM 事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM - 改变 HTML

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄--天生自然 JAVASCRIPT开发学习：条件语句

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄--天生自然 JAVASCRIPT开发学习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

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

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 吴裕雄--天生自然 JAVASCRIPT开发学习： this 关键字

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. leetcode1143 Longest Common Subsequence

    """ Given two strings text1 and text2, return the length of their longest common subs ...

  2. leetcode1019 Next Greater Node In Linked List

    """ We are given a linked list with head as the first node. Let's number the nodes in ...

  3. NO14 快照-克隆-必须掌握的Linux目录结构

    壹  VMware克隆,快照讲解及相应问题讲解: ·快照:比喻:假设把人生作一个快照.1岁10岁20岁6无限还原到前一个设置的节点. ·克隆学习一般用链接克隆,不另外占用磁盘,但是依赖本体虚拟机.完整 ...

  4. Golang的运算符-算数运算符

    Golang的运算符-算数运算符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.算术运算符概述 常见的算术运算符: +: 可表示正号,如",结果为"Jaso ...

  5. C++学习链表

    #include"pch.h" #include<iostream> #include<string> using namespace std; struc ...

  6. C++面试常见问题——09static关键字

    static关键字 局部变量 局部变量 局部变量是最常见的量,编译器不会对其进行初始化,除非对其显式赋值,不然初始值是随机的. 普通局部变量存储在栈空间,使用完毕后会立即被释放. 静态局部变量 静态局 ...

  7. 解决：Server IPC version 9 cannot communicate with client version 4

    使用idea的maven项目运行mapreduce程序Server IPC version 9 cannot communicate with client version 4 原因: Java初始化 ...

  8. 044-PHP获得多个类对应的反射信息

    <?php //获得多个类对应的反射信息 class demo{ public $str_1; private $str_2; protected $str_3; public function ...

  9. 021-PHP常用的数值类型判断函数

    <?php //判断数组 $colors = array("red", "blue", "green"); if(is_array($ ...

  10. 第二阶段scrum-7

    1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 部署云服务器完成,链接数据库完成,消息收发正在制作.