使用JavaScript渲染页面的方法详解
作者：小猫娃来啦
本文主要介绍了使用JavaScript渲染页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴下面随着小编来一起来学习吧
首先，我们需要先获取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里将我们想要的内容渲染到元素里，这样才是一个基本完整的渲染页面的办法。
以上就是使用JavaScript渲染页面的方法详解的详细内容，更多关于JavaScript渲染页面的资料请关注脚本之家其它相关文章！