JavaScript——用法、输出

最新推荐文章于 2023-08-02 16:31:23 发布

云祁

最新推荐文章于 2023-08-02 16:31:23 发布

阅读量1.4k

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/BeiisBei/article/details/102463699

版权

---- JavaScript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

文章目录

1.< script >放置

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

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

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

2.JavaScript 显示数据

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

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

window.alert()

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

document.write

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

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

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

操作 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>

以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：

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

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

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

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

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

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

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

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

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

后者：

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

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

云祁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——用法、输出

文章目录< script >放置JavaScript 显示数据window.alert()document.write操作 HTML 元素document.getElementByle() 和 document.write() 的区别< script >放置script可被放置在 HTML 页面的 <body> 和 <head> 部分中。也可以...
复制链接

扫一扫