JavaScript駕馭網(wǎng)頁(yè)－獲取網(wǎng)頁(yè)元素

更新時(shí)間：2016年03月24日 11:44:55 作者：WeAreZero

這篇文章主要介紹了JavaScript駕馭網(wǎng)頁(yè)－獲取網(wǎng)頁(yè)元素的相關(guān)資料,需要的朋友可以參考下

推薦閱讀：JavaScript駕馭網(wǎng)頁(yè)－DOM

JavaScript駕馭網(wǎng)頁(yè)-CSS與DOM

利用DOM分割HTML

利用JavaScript控制網(wǎng)頁(yè)內(nèi)容其實(shí)很像烹飪。只是不用收拾列羹剩肴，但也沒(méi)有辦法享受美味的成果。

不過(guò)，你將能完整網(wǎng)頁(yè)內(nèi)容的HTML構(gòu)成要素：更重要的是，你將擁有替換網(wǎng)頁(yè)成分的能力。

JavaScript讓你可以隨心所欲地操控網(wǎng)頁(yè)的HTML代碼，從而打開(kāi)各種有趣的機(jī)會(huì)之門(mén)，一切都是因?yàn)闃?biāo)準(zhǔn)對(duì)象：DOM的存在

getElementById

HTML標(biāo)簽都有一個(gè)"id"屬性,第個(gè)標(biāo)簽的該屬性都是獨(dú)一無(wú)二的
可以通過(guò)id屬性來(lái)獲取元素
<body>
<div id="div1">
<div id="div2">
內(nèi)容
</div>
</div>
</body>
var sceneDesc=document.getElementById("div2");
getElementById可以通過(guò)元素的id屬性去訪(fǎng)問(wèn)標(biāo)簽
括號(hào)里是id的值

getElementsByTagName

也可以通過(guò)標(biāo)簽名來(lái)獲取元素
<body>
<div id="div1">
<div id="div2">
<div id="div3">
內(nèi)容
</div>
</div>
</div>
</body>
var divs=document.getElementsByTagName("div");
getElementsByTagName返回所有div標(biāo)簽,結(jié)果是一個(gè)數(shù)組,結(jié)果按照標(biāo)簽在HTML中的順序排列
括號(hào)里是標(biāo)簽名
var divs=document.getElementsByTagName("div")[2];
用索引獲取第三個(gè)div標(biāo)簽

innerHTML

innerHTML特性對(duì)所有存儲(chǔ)在元素里的內(nèi)容提供了訪(fǎng)問(wèn)管道
通過(guò)innerHTML訪(fǎng)問(wèn)元素內(nèi)存儲(chǔ)的內(nèi)容：
<div id="div1">
<p id="story"> you are standing</p>
<strong>alone</strong> in the woods.
</div>
</body>
document.getElementById("story").innerHTML;
返回的內(nèi)容是： you are standing alone in the woods.
innerHTML獲取的是指定元素下的所有內(nèi)容與標(biāo)簽
innerHTML也能用于設(shè)置網(wǎng)頁(yè)內(nèi)容
document.getElementById("story").innerHTML="You are <strong>not</strong> alone!";
innerHTML只用來(lái)設(shè)置可以包含文本的標(biāo)簽

有關(guān)JavaScript駕馭網(wǎng)頁(yè)－獲取網(wǎng)頁(yè)元素的知識(shí)就給大家介紹這么多，希望對(duì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)動(dòng)態(tài)改變r(jià)adio狀態(tài)的方法
下面小編就為大家分享一篇js實(shí)現(xiàn)動(dòng)態(tài)改變r(jià)adio狀態(tài)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
js實(shí)現(xiàn)跨域的4種實(shí)用方法原理分析
這篇文章主要分析了js實(shí)現(xiàn)跨域的4種實(shí)用方法原理，主要是使用jsonp跨域，使用window.name來(lái)進(jìn)行跨域，對(duì)這方面感興趣的朋友可以參考一下
2015-10-10
JavaScript中防抖和節(jié)流的實(shí)戰(zhàn)應(yīng)用記錄
防抖與節(jié)流都是用來(lái)限制用戶(hù)頻發(fā)觸發(fā)事件的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JavaScript中防抖和節(jié)流的實(shí)戰(zhàn)應(yīng)用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
js的壓縮及jquery壓縮探討(提高頁(yè)面加載性能/保護(hù)勞動(dòng)成果)
搞定js的加密和壓縮，一方面可以提高頁(yè)面加載性能，另外一方面也希望辛苦研發(fā)出來(lái)的成果得到一定的保護(hù),感興趣的朋友可以了解下，或許對(duì)你有所幫助
2013-01-01
uniapp如何實(shí)現(xiàn)tabBar之間傳參
這篇文章主要給大家介紹了關(guān)于uniapp如何實(shí)現(xiàn)tabBar之間傳參的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-08-08
JS中toFixed()方法引起的問(wèn)題如何解決
最近發(fā)現(xiàn)JS當(dāng)中toFixed()方法存在一些問(wèn)題，采用原生的Number對(duì)象的原型對(duì)象上的toFixed()方法時(shí)，規(guī)則并不是所謂的“四舍五入”或者是四舍六入五成雙
2012-11-11
15個(gè)用于開(kāi)發(fā)的TypeScript高級(jí)技巧分享
這篇文章主要來(lái)和大家分享一下15個(gè)用于開(kāi)發(fā)的TypeScript高級(jí)技巧，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下
2023-07-07
jQuery ajax(復(fù)習(xí))—Baidu ajax request分離版
你沒(méi)有看錯(cuò)標(biāo)題，本文的確是在講Baidu ajax，不過(guò)是很久很久以前的版本了,我們先分析一段簡(jiǎn)單的ajax代碼，來(lái)自早期的百度七巧板項(xiàng)目通過(guò)這個(gè)來(lái)先復(fù)習(xí)一遍ajax的知識(shí)
2013-01-01
幾個(gè)有趣的Javascript Hack
在網(wǎng)上看到幾個(gè)有意思的Javascript代碼，和大家分享一下。直接將代碼拷貝到IE中即可，注意代碼為一樣。不可分行
2010-07-07
使用ethers.js部署Solidity智能合約的方法
Ethers.js則是一個(gè)輕量級(jí)的web3.js替代品，在本文中，我們將學(xué)習(xí)使用ethers.js部署Solidity智能合約的方法，感興趣的朋友一起看看吧
2021-10-10