JavaScript简介之它能做什么
2、JavaScript能做些什么？
2.1 直接写入 HTML 输出流
.html代码
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>js直接写入练习</title> </head> <body> <p> JavaScript 能够直接写入 HTML 输出流中： </p> <script> document.write(<h1>这是一个标题</h1>); document.write(<p>这是一个段落。</p>); </script> <p> 只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果在文档已加载后使用它（比如在函数中），会覆盖整个文档。 </p> </body> </html> 生成页面效果
需要注意的是：只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档。
2.2 对事件的反应(以alert为例)
.html代码
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>alert练习</title> </head> <body> <h1>我的第一个 JavaScript</h1> <p> JavaScript 能够对事件作出反应。比如对按钮的点击： </p> <button type=button onclick=alert('欢迎学习JavaScript!')>点我获取网页提示</button> </body> </html> 生成页面效果
2.3 改变HTML内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
我们会经常看到 document.getElementById(id)。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
.html代码
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>改变HTML内容练习</title> <script> function myFunction() { x=document.getElementById(demo); /*找到元素*/ x.innerHTML=Hello JavaScript!; /*改变内容*/ } </script> </head> <body> <h1>我的第一段 JavaScript</h1> <p id=demo> JavaScript 能改变 HTML 元素的内容。 </p> <button type=button onclick=myFunction()>点击这里改变HTML元素内容</button> </body> </html> 生成页面效果
1.原本的html元素内容如下图
2.点击按钮后元素内容被改变
2.4 改变HTML图像
JavaScript通过动态地改变 HTML 图像的来源（src：）来改变HTML图像
.html代码
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>改变HTML图像练习</title> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') /*找到img元素*/ if (element.src.match(bulbon)) /**/ { element.src=images/bulboff.png; } else { element.src=images/bulbon.png; } } </script> <img id=myimage onclick=changeImage() src=images/bulboff.png width=200 height=180> <p>点击灯泡就可以打开或关闭这盏灯</p> </body> </html> 生成页面效果
1.未点击之前
2.点击后
知识点总结
JavaScript通过动态地改变 HTML 图像的来源（src：）来改变HTML图像
以上实例中代码 element.src.match(bulbon) 的作用是：
检索img标签src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 路径替换为为 bulboff.png，若匹配不到 bulbon 字符串，src路径替换为 bulbon.png
其实所谓的改变HTML图像就是通过
if else来判断什么时候通过更新img路径src来改变图像
2.5 改变HTML样式
.html代码
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>改变HTML元素样式练习</title> <script> function myFunction() { x=document.getElementById(demo) // 找到元素 x.style.color=#ff0000; // 改变样式 } </script> </head> <body> <h1>JavaScript改变HTML元素样式练习</h1> <p id=demo> JavaScript 能改变 HTML 元素的样式。 </p> <button type=button onclick=myFunction()>点击这里</button> </body> </html> 生成页面效果
1.点击前
2.点击后
