<!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. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-search

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. 剑指offer自学系列(四)

    题目描述: 输入一个正整数数组,把数组里面所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个,例如输入数组{3,32,321},输出的最小数字为321323 题目分析: 如果采用穷举法,把 ...

  3. 原生searchView 自定义样式

    https://www.jianshu.com/p/f1fe616d630d 去除搜索框中的图标 <style name="SeachViewActivityTheme" p ...

  4. CSS - 解决placeholder不起作用的方法

    input::placeholder {     font-size: 12px;     letter-spacing: 1px;     color: #A8C9FF !important; } ...

  5. Python序列内单双引的问题——未解决

    在学习python基础的时候,遇到这样一个问题: tuple=(2,2.3,"yeah",5.6,False)list=[True,5,"smile"] 这样输 ...

  6. SpringBoot#自定义配置的封装

    _震惊,开局 不可避免的需要弄一些自定义的配置. 要点: 1. 把配置项都写出来,分析层次关系:2. 抽象成bean与bean之间的关系,写出bean对应的类,这时候配置项对应了bean的属性,属性可 ...

  7. swoole在线聊天学习笔记

    <?php $http=); $http->on('request',function(swoole_http_request $request,swoole_http_response ...

  8. Python 35个内置函数，你都ok吗？

    Python一共有60多个内置函数,今天先梳理其中35 个 1 abs() 绝对值或复数的模 . In [1]: abs(-6)Out[1]: 6 2 all() 接受一个迭代器,如果迭代器的所有元素 ...

  9. javaweb 最简单的分页技术

    原文来自于https://www.cnblogs.com/xwlych/p/6017833.html 个人由加了一点注释,他的代码我运行不起来,弄了好一会 bean包  User.java packa ...

  10. 逆向-PE头解析

    目录 PE头解析 数据结构 IMAGE_DOS_HEADER IMAGE_NT_HEADERS 区块 PE头解析 PE 格式是Windows系统下组织可执行文件的格式.PE文件由文件头和对应的数据组成 ...