快捷導(dǎo)航

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

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

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

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

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

<script>
			document.getElementById('id')              //通過元素 id 來查找元素
			document.getElementsByTagName('name')      //通過標(biāo)簽名來查找元素
			document.getElementsByClassName('class')   //通過類名來查找元素
			document.getElementsByName('name')         //通過表單元素中 name 名查找元素
			document.querySelector('CSS 選擇器')        //通過CSS 選擇器獲取匹配上的第一個(gè)元素
			document.querySelectorAll('CSS 選擇器')     //通過 CSS 選擇器獲取匹配上的所有元素
</script>

其次，我們需要將我們想表達(dá)的內(nèi)容通過JavaScript渲染到頁面中

這是寫入比較常見的辦法：

1.document.write()

JS 中的輸出語句，該語句會(huì)將內(nèi)容輸出到頁面上，并且能夠解析標(biāo)簽元素。

<script type="text/javascript">
document.write('<h1>哈嘍！?。?lt;/h1>');
</script>

2.alert()

JS 中的警告彈框，該語句會(huì)將內(nèi)容以彈窗的形式提示用戶。

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

3.元素.innerHTML = 內(nèi)容

改變?cè)氐膬?nèi)容（包含內(nèi)部標(biāo)簽）可識(shí)別標(biāo)簽。

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

比方說，我們現(xiàn)在寫一句 “學(xué)js真是一件開心的事” 渲染到頁面，可以復(fù)制代碼，自己運(yùn)行一下。

<!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>學(xué)習(xí)</title>
</head>
<body>
	<div id="js">
		
	</div>
</body>
</html>
<script>
	let js = document.querySelector('#js');
	js.innerHTML='學(xué)習(xí)js真是一件開心的事'
</script>

作用，我們做一個(gè)簡(jiǎn)單的總結(jié)。JavaScript渲染頁面的方法就是我們要懂得如何去獲取一個(gè)元素，要明白如何將js里將我們想要的內(nèi)容渲染到元素里，這樣才是一個(gè)基本完整的渲染頁面的辦法。

以上就是使用JavaScript渲染頁面的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript渲染頁面的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: