<!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. IDEA快速定位一个文件到项目目录

    第一步:快捷键搜索java文件关键字 快捷键Ctrl+N,如果设置为Eclipse版本快捷键为Ctrl+Shift+R 第二步:定位文件到项目目录中 1.在当前文件下 2.点击定位按钮 3.定位到项目 ...

  2. 原生searchView 自定义样式

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

  3. Spring容器的创建原理

    1.new ioc容器(AnnotationConfigApplicationContext 注解ioc) 2.refresh()方法调用 2.1 prepareRefresh()刷新前的预处理 a: ...

  4. 039-PHP使用闭包函数来进行父实例的变量自增,错误示例

    <?php // 如何使用闭包函数来进行父实例的变量自增,错误示例 function demo(){ $num = 1; $func = function() use($num){ echo $ ...

  5. 161-PHP 文本替换函数str_replace（二）

    <?php $str='Hello world!'; //定义源字符串 $search='o'; //定义将被替换的字符 $replace='O'; //定义替换的字符串 $res=str_re ...

  6. JAVA中添加jar包

    右键点击工程文件,选择构建路径>添加外部归档.选择包的路径即可

  7. springboot - 映射 HTTP Response Status Codes 到自定义 JSP Error 页面

    1.总览 2.代码 1).pom.xml <dependencies> <dependency> <groupId>org.springframework.boot ...

  8. java课程之团队开发冲刺阶段2.6

    总结昨天进度: 1.总体的思路已经完成,代码也差不多了,只剩下对闹钟activity的设置 遇到的困难: 1.在设置震动的时候,对方法有点不太理解,所以使用的时候产生了错误,没有达到预期的效果 今天的 ...

  9. 剑指offer_12.31_Day_1

    不用加减乘除做加法 题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号.   不用四则运算,必然是依靠位运算. 位运算包括,与,或,异或,取反,左移,右移. 分别为 ...

  10. IIS7实现访问HTTP定向至HTTPS访问

    工具及软件: 系统:windows2008R2 软件:IIS7.0,IIS的Microsoft URL重写模块2.0 下载 操作步骤: 1.下载并在IIS中安装Microsoft URL重写模块2.0 ...