<!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. Django（四） 后台管理：创建管理员、注册模型类、自定义管理页面显示内容

    后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...

  2. NFS挂载共享文件夹

    修改rcS启动脚本,使开发板初始化完成,自动挂载共享文件夹 修改开发板ip,使之与虚拟机处于同一网段(二者可以互ping)     挂载虚拟机的共享文件夹     rcS 1 ifconfig eth ...

  3. JuJu团队11月29号工作汇报

    JuJu团队11月29号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达  生成所有mini batch, 支持不同batch_size  优化代码  熟悉julia 婷婷 ...

  4. 《ES6标准入门》(阮一峰)--10.对象的扩展

    1.属性的简洁表示法 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // ...

  5. TP框架数据模型

    1.TP框架的数据模型需要建在Model文件夹下: 1.数据模型 与控制器相似,但是每个数据模型控制一张数据表. 2.数据模型可写可不写,如果不写 则沿用父类数据模型. 2.访问数据库: 1.更改数据 ...

  6. Vulkan SDK之Vertex Buffer

    A vertex buffer is a CPU-visible and GPU-visible buffer that contains the vertex data that describes ...

  7. 15.swoole学习笔记--异步写入文件

    <?php //异步写入文件 $content="hello world"; swoole_async_writefile('2.txt',$content,function ...

  8. sendgrid 批量发送邮件，收件栏只显示当前用户的方案

    需求:批量发送邮件,用户可能看到其他用户的邮箱地址,之前用BBC发送,但问题是接收地址是同一个. 官方解决方案:https://sendgrid.kke.co.jp/docs/Tutorials/A_ ...

  9. 记-OSPF学习

    LSA Type 1:Router LSA1.传播范围 :只能在本区域2.通告者 :每台路由器 (router-id作为标识)3.内容 :路由和拓扑信息show ip ospf database ro ...

  10. 洛谷 P1470 最长前缀 Longest Prefix

    题目传送门 解题思路: 其实思路没那么难,就是题面不好理解,解释一下题面吧. 就是在下面的字符串中找一个子串,使其以某种方式被分解后,每部分都是上面所给集合中的元素. AC代码: #include&l ...