<!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. DOM基础1

    Document Object Model 文档对象模型 1.改内容: innerHTML 例:div1.innerHTML = "我能干<br />什么";      ...

  2. Java 类加载器(ClassLoader)

    类加载器 ClassLoader 什么是类加载器? 通过一个类的全限定名来获取描述此类的二进制字节流这个动作放到Java虚拟机外部去实现, 以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代 ...

  3. HihoCoder第六周:01背包问题

    01背包问题大二的时候就接触过了,几行关键代码自己也都看过很多遍了,但是很多代码一直都没能理解.所以今天拿表来好好地画一画,弄懂其中的动态规划究竟什么含义. 1038 : 01背包 时间限制:2000 ...

  4. POJ 1256:Anagram

    Anagram Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18393 Accepted: 7484 Description ...

  5. 聊一聊Java中的各种运算符(转载)

    计算机之所以叫"计算机",其最基本用途之一就是运算,对应刚刚接触Java的小伙伴而言,熟悉并掌握Java中的各种运算符及其在表达式中的运算优先级是十分必要的. 算术运算 算术运算主 ...

  6. 小程序填坑:2018最新getPhoneNumber功能详解

    本篇博客主要详解getPhoneNumber组件的功能,填补网上那些到处是漏洞的博客.加上小程序官方本身也是满满的漏洞. 惯例先上总纲: ##主要内容 1.前端页面组件书写 2.JS内组件用法 3.接 ...

  7. Tomcat添加SSL安全认证

    环境 Tomcat7.阿里SSL证书 server.xml <Connector port="443" protocol="org.apache.coyote.ht ...

  8. 三十四、在SAP的屏幕选择中,将英文替换成我们想要的文本内容

    一.我们在代码中定义了一个选择屏幕,但是对应的显示界面为英文 界面如下 二.我们选择[转到]-[文本元素] 三.默认的文本内容是问号和三个点 四.我们修改成我们需要的,并激活这个文本,如果不激活会丢失 ...

  9. 干货分享:学术Essay写作流程及写作技巧详解

    Academic essay是指留学生作业中的一种,其范围非常广泛,可以是任何一种话题.而学术essay主要是指其中比较正式的.客观的话题,有明确的研究目的与研究对象.例如“Research on t ...

  10. Sklearn K均值聚类

    ## 版权所有,转帖注明出处 章节 SciKit-Learn 加载数据集 SciKit-Learn 数据集基本信息 SciKit-Learn 使用matplotlib可视化数据 SciKit-Lear ...