<!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. Docker-harbor-V1.3.0 ”私有仓库“搭建 Easy

    准备: centos     7.0 Docker version 1.12.6    docker-compose version 1.19.0   1: updata-yum:   更新yum 源 ...

  2. Good Bye 2019

    A.Card Game 题目大意:两个人都有共有n张卡牌,每张卡牌上都有一个数xi,没有两张牌上的数相同,且xi不小于1不大于n.每次两个人选出一张牌来,牌上数字大的人赢得此局,如果谁最后手上拥有所有 ...

  3. java集合简单特性

  4. P1047 编程团体赛

    转跳点:

  5. UVA - 10635 Prince and Princess（LCS，可转化为LIS）

    题意:有两个长度分别为p+1和q+1的序列,每个序列中的各个元素互不相同,且都是1~n2的整数.两个序列的第一个元素均为1.求出A和B的最长公共子序列长度. 分析: A = {1,7,5,4,8,3, ...

  6. arduino 通过串口接收string，int类型数据

    串口接收string类型数据源码如下 String comdata = ""; void setup() {     Serial.begin(9600); }   void lo ...

  7. 云时代架构阅读笔记九——web应用存在的问题及解决办法

    web应用通常存在的10大安全问题 1.SQL注入 拼接的SQL字符串改变了设计者原来的意图,执行了如泄露.改变数据等操作,甚至控制数据库服务器, SQL Injection与Command Inje ...

  8. 七十、SAP中内表批量指定位置插入

    一.代码如下 二.调试一下 三.被插入的数据 四.效果如下

  9. truncate table （tablename ）表明

    Truncate是SQL中的一个删除数据表内容的语句,用法是: 语法 TRUNCATE TABLE name 参数 name 是要截断的表的名称或要删除其全部行的表的名称. 下面是对Truncate语 ...

  10. Spring入门之一-------实现一个简单的IoC

    一.场景模拟 public interface Human { public void goHome(); } Human:人类,下班了该回家啦 public interface Car { void ...