快捷導(dǎo)航

JavaScript獲取頁面上某個(gè)元素的代碼

更新時(shí)間：2011年03月13日 21:46:45 作者：

大多數(shù)的javascript操作都需要獲取先獲取頁面上的某個(gè)元素，引用其為當(dāng)前腳本中的一個(gè)對(duì)象，然后加以操作或獲取節(jié)點(diǎn)樹形。

W3C標(biāo)準(zhǔn)推薦的語法是通過document文檔對(duì)象獲取DOM樹內(nèi)的內(nèi)的某個(gè)元素，常見的方法有g(shù)etElementById（）、getElementsByName（）、getElementsByTagName（），他們的作用分別通過id屬性、name屬性/標(biāo)簽名稱返回單個(gè)節(jié)點(diǎn)或節(jié)點(diǎn)集合。

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript獲取頁面上某個(gè)元素的方法 </title> 
<script type="text/javascript"> 
function doGetElementsByTagName(){ 
var x=document.getElementsByTagName("input"); 
alert(x.length); 
} 
function doGetElementsByName(){ 
var x=document.getElementsByName("myInput"); 
alert(x.length); 
} 
function getValue(){ 
var x=document.getElementById("myHeader"); 
alert(x.innerHTML); 
} 
</script> 
</head> 
<body> 
<h1 id="myHeader" onclick="getValue();">這里是頭部</h1> 
<p>點(diǎn)擊頭部彈出myHeader的內(nèi)容</p> 
<input type="text" name="myInput" size="20" /> 
<br /> 
<br /> 
<input type="text" name="myInput" size="20" /> 
<br /> 
<br /> 
<input type="text" name="myInput" size="20" /> 
<br /> 
<br /> 
<input type="button" onclick="doGetElementsByTagName();" value="有多少個(gè)input元素？"/> 
<br /> 
<input type="button" onclick="doGetElementsByName();" value="有多少個(gè)name的值為myInput？"/> 
</body> 
</html> 

當(dāng)點(diǎn)擊：時(shí)，彈出：

特別是在以下代碼中，

復(fù)制代碼代碼如下:

 
function getValue(){ 
var x=document.getElementById("myHeader"); 
alert(x.innerHTML); 
} 

涉及到了一個(gè)知識(shí)點(diǎn)：HTML DOM innerHTML ，作用是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽

您可能感興趣的文章:

相關(guān)文章

JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域
正常使用AJAX會(huì)需要正?？紤]跨域問題，所以偉大的程序員們又折騰出了一系列跨域問題的解決方案，如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域，感興趣的朋友參考下吧
2016-04-04
js Math數(shù)學(xué)簡(jiǎn)單使用操作示例
這篇文章主要介紹了js Math數(shù)學(xué)簡(jiǎn)單使用,結(jié)合實(shí)例形式分析了js Math數(shù)學(xué)相關(guān)函數(shù)的基本用法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法,涉及javascript針對(duì)radio表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
如何判斷Javascript對(duì)象是否存在的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄绾闻袛郕avascript對(duì)象是否存在的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
js下將阿拉伯?dāng)?shù)字每三位一逗號(hào)分隔(如：15000000轉(zhuǎn)化為15,000,000)
這篇文章主要介紹了js下將阿拉伯?dāng)?shù)字每三位一逗號(hào)分隔(如：15000000轉(zhuǎn)化為15,000,000),需要的朋友可以參考下
2014-06-06
使用layui+ajax實(shí)現(xiàn)簡(jiǎn)單的菜單權(quán)限管理及排序的方法
今天小編就為大家分享一篇使用layui+ajax實(shí)現(xiàn)簡(jiǎn)單的菜單權(quán)限管理及排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
如何動(dòng)態(tài)的導(dǎo)入js文件具體該怎么實(shí)現(xiàn)
如何需要進(jìn)行動(dòng)態(tài)的導(dǎo)入js文件，那么下面的方法或許可以幫助到大家
2014-01-01
封裝屬于自己的JS組件
這篇文章主要介紹了如何封裝屬于自己的JS組件，對(duì)js組件擴(kuò)展以及封裝用法的認(rèn)識(shí)和總結(jié)，感興趣的小伙伴們可以參考一下
2016-01-01
js實(shí)現(xiàn)圖片輪播切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片輪播切換效果，圖片自動(dòng)輪播切換、點(diǎn)擊上下鍵圖片切換上下圖片等，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
還不懂遞歸？讀完這篇文章保證你會(huì)懂
你還不懂遞歸？讀完這篇文章保證你會(huì)懂，下面這篇文章主要給大家介紹了關(guān)于遞歸的相關(guān)內(nèi)容，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07