<!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. leetcode922 Sort Array By Parity II

    """ Given an array A of non-negative integers, half of the integers in A are odd, and ...

  2. 七、Vue组件库：Element、Swiper（轮播专用组件）

    一.vue的Element组件库 官网:https://element.eleme.cn/#/zh-CN 1.1安装 推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...

  3. Arch系linux配置Go开发环境

    1. 下载go $ sudo pacman -S go 下载后系统会将go安装在/usr/lib/go目录下 2. 配置一些环境变量 一共需要三个环境变量,分别为: GOROOT -> go语言 ...

  4. springboot启动总是启动不起来UnsatisfiedDependencyException异常

    采用debug模式启动总是停留在 点击后: 鼠标放在ex上: org.springframework.beans.factory.UnsatisfiedDependencyException: Err ...

  5. 13.56mhz自动寻卡功能业界最低功耗：SI522

    随着智能门锁的不断火爆,很多智能门锁产商为了让产品的功耗下降下来,都在不断寻找能自动寻卡的13.56mhz.今天我就为大家推荐一款13.56mhz芯片自动寻卡业界最低功耗,不仅是业界最低另外还完全PI ...

  6. 微信公众号开发之根据OpenID列表群发（十四）

    上一篇我们讲述了<微信公众号开发之根据标签进行群发(十二)>,这次我们讲解一下[根据OpenID列表群发] 根据OpenID列表群发[订阅号不可用,服务号认证后可用] 接口调用请求说明 h ...

  7. NOIP2016天天爱跑步解题思路

    算法:LCA,树上差分+(乱搞) 如果有写错的地方请大佬更正 对于100%数据: u表示起点,v表示终点 对于一条u到v的路径,先讨论LCA!=u&&LCA!=v的情况: 分为u到LC ...

  8. 127-PHP类通过魔术变量判断类中是否存在指定的方法

    <?php class ren{ //定义人类 //定义成员属性 private $name='Tom'; private $age=15; //定义成员方法 public function g ...

  9. JAVA中的指针

    不同于CPP,JAVA中不需要程序员对指针进行操作.不过,这不代表JAVA没有指针,事实上,JAVA的指针操作都被底层代码封装了.笔者在初学Java时,虽然就了解了形参,实参,StringBuffer ...

  10. v2??? 重启失败

    v2??? 重启失败, 提示 Authorization not available. Check if polkit service is running or see debug message ...