<!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. Java 布尔运算

    章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...

  2. 51nod 1065：最小正子段和

    1065 最小正子段和 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  取消关注 N个整数组成的序列a[1],a[2],a[3],-,a[n],从中选出一 ...

  3. knockoutjs 经验总结

    http://knockoutjs.com/documentation/introduction.html knockout的模式 MVVM 四大重要概念 声明式绑定UI界面自动刷新依赖跟踪模版 一些 ...

  4. 官网英文版学习——RabbitMQ学习笔记（五）Publish/Subscribe

    发布/订阅模式:把一个消息发送给多个消费者. 前几篇文章的思想是,我们好像看到了生产者将消息直接发送给queue,然后消费者也从queue中进行消费.其实并非如此,RabbitMQ中的消息传递模型的核 ...

  5. Python基础笔记：函数：调用函数、定义函数、函数的参数、递归函数

    一.定义一个求二元一次方程的根的函数 #Sublime Text import math def ee(a,b,c): delta=b*b-4*a*c if delta<0: return 'n ...

  6. ajax异步提交 有时会出现无bug的数据处理异常-----debug没有问题，正常运行却数据处理不正确，极少机会会出现正常的处理结果

    ajax  被使用时,常默认的就使用了异步处理. 当遇到后面的代码对同样的数据进行处理 或 要依赖前面ajax处理的结果时,就会导致数据处理结果不正确,未达到预期值. 且,debug时却能正常完成功能 ...

  7. 第二十一篇 关联管理器(RelatedManager)

    关联管理器(RelatedManager) lass RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器.它存在于下面两种情况: Forei ...

  8. SpringMVC: Ajax技术

    SpringMVC:Ajax技术 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网 ...

  9. es6 part 1 //const let

    1. let 命令 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ...

  10. java_05_IO

    java_05_IO 1,动手动脑 使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件. 分析思路: 1)找到该文件夹下所有文件. 2)找出其中字节数大于 ...