使用JavaScript渲染頁面的方法詳解

更新時間：2023年12月17日 15:24:28 作者：小貓娃來啦

本文主要介紹了使用JavaScript渲染頁面的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,感興趣的小伙伴下面隨著小編來一起來學習吧

首先，我們需要先獲取html中的元素，然后才能考慮給元素添加內容或者動態(tài)效果

這是獲取元素比較常見的選擇器:

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

比方說，我們現(xiàn)在寫一句 “學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渲染頁面的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: