<!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 myNodelist = document.querySelectorAll("p");

document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[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 myNodelist = document.querySelectorAll("p");

document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.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 myNodelist = document.querySelectorAll("p");

    var i;

    for (i = 0; i < myNodelist.length; i++) {

        myNodelist[i].style.color = "red";

    }

}

</script>

</body>

</html>

吴裕雄--天生自然 JAVASCRIPT开发学习：HTML DOM 节点列表的更多相关文章

  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. leetcode1302 Deepest Leaves Sum

    """ Given a binary tree, return the sum of values of its deepest leaves. Example 1: I ...

  2. git commit -m 和 git commit -am 区别

    git commit -m 和 git commit -am 通常修改一个文件 并且将文件提交到本地分支的命令是: git add . git commit -m 'update' 以上两个命令其实可 ...

  3. java基础源码 (6)--ArrayListt类

    原作出处:https://www.cnblogs.com/leesf456/p/5308358.html 简介: 1.ArrayList是一个数组队列,相当于动态数组.与java中的数组相比,它的容量 ...

  4. 网卡工作原理和wireshark混杂模式

    通过设置网卡为混杂模式就能捕获局域网内所有发包内容,包括非广播包和非发给自己主机的数据包 这是为什么呢? 即主机A发送一个数据包给主机B,我作为主机C怎么也能截获这个数据包呢,原理是什么? 我的网卡为 ...

  5. fiddler 限速方法

    1.使用的软件下载地址: \\192.168.100.2\共享软件\开发常用\flash_team\工作软件\fiddler2setup.exe 2.注意事项 测试是,在ie浏览器环境下测试 3.软件 ...

  6. 五十七、SAP中关于信息框的总结

    一.事务代码SE91 二.里面有我们创建过的一个消息类Z_TIANPAN_201907_MSG 三.这个消息类中有2个内容 四.我们的代码如下 五.S001效果 六.E001和W001效果 七.I00 ...

  7. Swift 闭包使用(循环引用...）

    class networkTool: NSObject { //定义一个可选类型的闭包,用小括号()?括起闭包 var finishedCallBack2:((_ jsonData:String)-& ...

  8. 通过 spark.files 传入spark任务依赖的文件源码分析

    版本:spak2.3 相关源码:org.apache.spark.SparkContext 在创建spark任务时候,往往会指定一些依赖文件,通常我们可以在spark-submit脚本使用--file ...

  9. 使用docker快速体验kali linux

    环境 运行在 64位 机器 企业版的 win10 系统 下载镜像 首先搜索docker download 去官网下载docker:https://www.docker.com/products/doc ...

  10. .NET via C#笔记5——基元类型，引用类型和值类型

    5 基元类型,引用类型和值类型 5.3 值类型的装箱和拆箱 将值类型转化为引用类型需要进行装箱(boxing) 赋值,传参等操作,如果从值类型转为引用类型,都会进行装箱 装箱的代价比较大 申请一块堆内 ...