JavaScript獲取頁面元素的常用方法詳解
更新時間：2019年09月28日 16:05:32 作者：Mr小zhou
這篇文章主要介紹了JavaScript獲取頁面元素的常用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
1、通過標(biāo)簽獲取元素，返回一個數(shù)組
var li = document.getElementsByTagName('li');//標(biāo)簽獲取元素
li[0].innerHTML;// 查看獲取元素的內(nèi)容
li[0].innerHTML = "content";//修改獲取到標(biāo)簽中的內(nèi)容
2、通過id獲取頁面元素
var header = document.getElementById("header");//id獲取元素
3、通過class名字獲取頁面元素
var list = document.getElementsByClassName('list');//返回一個數(shù)組，通過下標(biāo)訪問文本
4、通過CSS選擇符方式獲取頁面元素
//querySelector：返回符合條件的第一個
var str = document.querySelector('li');
var str1 = document.querySelectorAll('li');//全部返回，每個li都是一個對象
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript獲取頁面的常用方法</title>
<script>
// 1、通過標(biāo)簽獲取元素，返回一個數(shù)組
var li = document.getElementsByTagName('li');
//2、通過id獲取頁面元素
var header = document.getElementById("header");
// 3、通過class名字獲取頁面元素
var list = document.getElementsByClassName('list');//返回一個數(shù)組，通過下標(biāo)訪問文本
// 4、通過CSS選擇符方式獲取頁面元素
//querySelector：返回符合條件的第一個
var str = document.querySelector('li');
// querySelectorAll：返回符合條件的每一個
var str1 = document.querySelectorAll('li');
</script>
</head>
<body>
<p id="header">JavaScript學(xué)習(xí)</p>
<ul class="list">
<li>HTML</li>
<li>jQuery</li>
<li>JavaScript</li>
</ul>
<ul class="list">
<li>HTML</li>
<li>jQuery</li>
<li>JavaScript</li>
</ul>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄钊肜斫釰S addLoadEvent函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript 報表展示實(shí)現(xiàn)代碼
以下是從網(wǎng)上找到的一段JavaScript實(shí)現(xiàn)圖形報表的代碼，對于想客戶端顯示報表的朋友可以參考下。2009-12-12
這篇文章主要介紹了微信小程序iOS下拉白屏晃動問題解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
JavaScript實(shí)現(xiàn)九宮格移動拼圖游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格移動拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié)
在本篇文章里小編給大家整理的是關(guān)于不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié)，需要的朋友們參考下。2020-03-03
在javascript開發(fā)中，js面試題是必問的一項(xiàng)，今天小編抽時間給大家整理些js常見的面試題，對js面試題相關(guān)知識感興趣的朋友一起看看吧2016-09-09
這篇文章介紹了判斷計算字符串長度/判斷空的簡單方法，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了javascript 模塊依賴管理,結(jié)合實(shí)例形式深入分析了javascript 模塊依賴管理具體定義、實(shí)現(xiàn)方法及注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript實(shí)現(xiàn)繼承的4種方法總結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)繼承的4種方法總結(jié),本文給出了原型鏈繼承、構(gòu)造繼承、實(shí)例繼承、拷貝繼承等實(shí)現(xiàn)JS繼承的方法,需要的朋友可以參考下2014-10-10
有關(guān)div頁面拖動、縮放、關(guān)閉、遮罩效果代碼
有關(guān)div頁面拖動、縮放、關(guān)閉、遮罩效果代碼,比較不錯，適合學(xué)習(xí)用。2009-08-08