（从头学JavaScript）2.用法，输出

最新推荐文章于 2021-07-14 19:42:26 发布

7TribeZ

最新推荐文章于 2021-07-14 19:42:26 发布

阅读量182

点赞数 1

分类专栏： JavaScript

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文深入讲解JavaScript中的关键操作，包括<script>标签的放置、document.write的使用及其与document.getElementByle的区别，探讨了如何显示数据及操作HTML元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.<script>放置

script可被放置在 HTML 页面的 <body> 和 <head> 部分中。

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。<script src="myScript.js"></script>

外部脚本不能包含 <script> 标签

2.document.write

HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

使用函数来执行document.write代码如下：

<script>
function myfunction(){
    document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
}
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p >
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

3.JavaScript 显示数据

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。（window可省略）
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。（例如：x.innerHTML="Hello JavaScript!";）
使用 console.log() 写入到浏览器的控制台。主要是方便你调式javascript用的

4.操作 HTML 元素

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

类似的还有

原生JS常用的4种获取元素方法分别是：getElementById( )返回的是一个dom对象而getElementsByClassName( )、getElementsByTagName( )、getElementsByName( )返回的是元素集合,元素集合加上索引即是对象.

可参考https://blog.youkuaiyun.com/Park_Geun_hye/article/details/79335887

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<body>
		<h1>我的第一个 Web 页面</h1>
		<p class="demo">我的第一个段落</p>
		<script>
		document.getElementsByClassName(0).innerHTML = "段落已修改。";
		</script>
	</body>
</html>

5.document.getElementByle() 和 document.write() 的区别

document.write() 方法可以用在两个方面：

1、页面载入过程中用实时脚本创建页面内容，用来追加一些标签。
2、清除当前页面内容(包括源文档的任何变量或值)。重新生成内容。

它的第 2 点和 document.getElementByle() 相区别。前者在清除全部页面内容，然后生成新的内容，即“覆盖文档"。

<script>
function myFunction()
{  
    document.write("糟糕，文档丢失了")
}
</script>
<button type="bulbon" onclick="myFunction()">覆盖文档</button>

点击按钮，括号里的内容则会全部覆盖文档。

后者：

<script>
document.getElementById("three").innerHTML="段落已修改。";
</script>

这个仅仅只是替换了 id 为 three 里的内容，没有覆盖页面。