JavaScript渲染页面的方法

小猫娃来啦

已于 2023-03-03 09:01:35 修改

阅读量6.7k

点赞数 4

分类专栏： JS 文章标签： javascript css html 开发语言前端

于 2022-10-20 16:39:40 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/127429211

版权

JS 专栏收录该内容

29 篇文章

订阅专栏

首先，我们需要先获取html中的元素，然后才能考虑给元素添加内容或者动态效果

这是获取元素比较常见的选择器:

<script>
			document.getElementById('id')              //通过元素 id 来查找元素
			document.getElementsByTagName('name')      //通过标签名来查找元素
			document.getElementsByClassName('class')   //通过类名来查找元素
			document.getElementsByName('name')         //通过表单元素中 name 名查找元素
			document.querySelector('CSS 选择器')        //通过CSS 选择器获取匹配上的第一个元素
			document.querySelectorAll('CSS 选择器')     //通过 CSS 选择器获取匹配上的所有元素
</script>

其次，我们需要将我们想表达的内容通过JavaScript渲染到页面中

这是写入比较常见的办法：

1.document.write()
JS 中的输出语句，该语句会将内容输出到页面上，并且能够解析标签元素。

<script type="text/javascript">
document.write('<h1>哈喽！！！</h1>');
</script>

2.alert()
JS 中的警告弹框，该语句会将内容以弹窗的形式提示用户。

<script type="text/javascript">
alert('哈喽！！！');
</script>

3.元素.innerHTML = 内容

改变元素的内容（包含内部标签）可识别标签。

<div id="content"> 我是 DIV 标签 <p>我是 P 标签</p> </div>
<input type="text" id="inp" value="123" />
<div id="col"> 我是黑色 </div>
<script>
let content = document.getElementById('content');
content.innerHTML = "<h1>我是 H1 标签</h1>";
let inp = document.getElementById('inp');
inp.value = 456;
let col = document.getElementById('col');
col.style.backgroundColor = 'blue';
</script>

比方说，我们现在写一句 “学js真是一件开心的事” 渲染到页面，可以复制代码，自己运行一下。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>学习</title>
</head>
<body>
	<div id="js">
		
	</div>
</body>
</html>
<script>
	let js = document.querySelector('#js');
	js.innerHTML='学习js真是一件开心的事'
</script>

作用，我们做一个简单的总结。JavaScript渲染页面的方法就是我们要懂得如何去获取一个元素，要明白如何将js里将我们想要的内容渲染到元素里，这样才是一个基本完整的渲染页面的办法。