<!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. Webstorm常用快捷键备忘

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE ...

  2. 吴裕雄--天生自然java开发常用类库学习笔记:Stack类

    import java.util.Stack ; public class StackDemo{ public static void main(String args[]){ Stack<St ...

  3. 完整版excel上传导入读写批量数据并将反馈结果写入远程exel中

    思路:excel的读写借助于poi框架,在写入远程的时候,是不能直接写入的,本博主将传入的文件再次拉下来写到项目临时文件中,然后,在临时文件中写入,然后,以同样的名称路径覆盖掉远程的就可以了,稍微有点 ...

  4. nodejs 杂七杂八

    nodejs => 提供核心模块语法 node中的回调函数 都是异步

  5. MongoDB 常用查询语法

    一.查询 find方法 db.collection_name.find(); 查询所有的结果: select * from users; db.users.find(); 指定返回那些列(键): se ...

  6. windows炸鸡啤酒

    20170831 今天郁闷,一台windwos远处不上去,被怼了,只能说我活该,事先不弄清楚自己负责的服务运行机器的管理员. 今天尤其特别想知道这台windows跑了多久(linux:uptime), ...

  7. 最小生成树(Kruskal+Prim)--模板

    最小生成树-----在连通网的所有生成树中,所有边的代价和最小的生成树,称为最小生成树. 应用场景 1.假设以下情景,有一块木板,板上钉上了一些钉子,这些钉子可以由一些细绳连接起来.假设每个钉子可以通 ...

  8. 第二篇MTV模型、基本命令、简单配置

    MTV模型.基本命令.简单配置 阅读目录(Content) MTV模型 基本命令 简单配置 MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Tem ...

  9. 个人vim简单配置

    精简.vimrc配置,简约不简单 该配置没有花里胡哨的插件,只是用ctags和cscope然后配合vim提供的基础功能就可以完成常见的代码编辑,浏览,查找等工作. "************ ...

  10. 使用模拟器调试react-native步骤(安卓机)

    1.在cmd界面搭建react-native 环境: 可参考https://reactnative.cn/docs/0.51/getting-started.html#content (1)npm i ...