关闭

一、JavaScript的输出

标签: javascripthtml学习笔记web前端
82人阅读 评论(0) 收藏 举报
分类:
一、JavaScript的输出
1、操作html元素
如需从JavaScript访问某个HTML元素,可以使用document.getElementById(id)方法。
使用 "id" 属性来标识HTML元素,并innerHTML来获取或插入元素内容,例如:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>

2、写入到html文档
2.1、JavaScript直接写入html文档
使用document.write()直接向文档输出内容,例如:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write("这是JavaScript写入的语句");
</script>
</body>
</html>

2.2、如果html文档已完成加载后(有文本内容)执行document.write,整个html页面将被覆盖。例如:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.write("这是JavaScript写入html的语句,覆盖已有的文本");
}
</script>
</body>
</html>

3、写入控制台(测试,查找减少bug的过程)
可以使用console.log()方法在浏览器中显示JavaScript值,只用F12来打开调试模式,在窗口中打开Console菜单查看。例如:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 6;
b = 6;
c = a + b;
console.log(c);
</script>
</body>

</html>

本文整理于W3cschool网站,请参考网站:http://www.runoob.com/js/js-tutorial.html

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:767次
    • 积分:82
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档