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

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

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

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

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

利用DOM分割HTML

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

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

JavaScript讓你可以隨心所欲地操控網(wǎng)頁的HTML代碼，從而打開各種有趣的機會之門，一切都是因為標(biāo)準(zhǔn)對象：DOM的存在

getElementById

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

getElementsByTagName

也可以通過標(biāo)簽名來獲取元素
<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é)果是一個數(shù)組,結(jié)果按照標(biāo)簽在HTML中的順序排列
括號里是標(biāo)簽名
var divs=document.getElementsByTagName("div")[2];
用索引獲取第三個div標(biāo)簽

innerHTML

innerHTML特性對所有存儲在元素里的內(nèi)容提供了訪問管道
通過innerHTML訪問元素內(nèi)存儲的內(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)頁內(nèi)容
document.getElementById("story").innerHTML="You are <strong>not</strong> alone!";
innerHTML只用來設(shè)置可以包含文本的標(biāo)簽

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

您可能感興趣的文章:

相關(guān)文章

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