使用JavaScript渲染页面的方法详解
更新时间：2023年12月17日 15:24:28 作者：小猫娃来啦
本文主要介绍了使用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渲染页面的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了如何利用js实现一个可进行时间和工作调度的任务管理器,文中的示例代码简洁易懂,有需要的小伙伴可以参考一下2023-10-10
这篇文章主要为大家详细介绍了js实现点击获取验证码倒计时效果，这种效果大家经常遇到，示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
这篇文章主要介绍了ES6中Array.includes()函数的用法,需要的朋友可以参考下2017-09-09
今天小编就为大家分享一篇通过layer实现可输入的模态框的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
setTimeout与setInterval在不同浏览器下的差异
setTimeout与setInterval是window对象的两个非常神奇方法，用于实现定时或延时调用一个函数或一段代码2010-01-01
这篇文章主要介绍了JavaScript中的CSS属性及命名规范。需要的朋友可以过来参考一下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了JavaScript实现动态的轮播图效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了原生JS贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握微信小程序如何进行传递参数，感兴趣的朋友可以了解一下2022-08-08
最新评论