當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

086_访问html元素

發布時間：2025/4/17 编程问答 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 086_访问html元素小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 訪問html元素有一下幾種方法:

1.1. 通過id查找html元素。

1.2. 通過標簽名查找html元素。

1.3. 通過類名查找html元素。

1.4. 通過CSS選擇器查找html元素。

1.5. 通過html對象集合查找html元素。

2. 通過id查找html元素

2.1. 通過id查找html元素, 是最簡單也是最常用的一種方式。

var myElement = document.getElementById("intro");

2.2. 如果元素被找到, 此方法會以對象返回該元素(在myElement中)。

2.3. 如果未找到元素, myElement將包含null。

3. 通過標簽名查找html元素

3.1. 通過標簽名可以查找文檔中的所有該標簽:

var ps = document.getElementsByTagName("p");

3.2. 該方法不管找沒找到html元素, 都會返回HTMLCollection對象。

4. 通過類名查找html元素

4.1. 如果您需要找到擁有相同類名的所有html元素, 請使用getElementsByClassName()。

4.2. 本例返回包含class="p"的所有元素的集合:

var classps = document.getElementsByClassName('p');

4.3. 該方法不管找沒找到html元素, 都會返回HTMLCollection對象。

5. 通過CSS選擇器查找html元素

5.1. 如果您需要查找匹配指定CSS選擇器(id、類名、類型、屬性、屬性值等等)的所有html元素, 請使用querySelector()和querySelectorAll()方法。

5.2. querySelector(selectors)方法返回匹配指定CSS選擇器元素的第一個元素對象。如果沒有匹配元素, 返回null。

5.3. querySelectorAll(selectors)方法返回文檔中匹配指定CSS選擇器的所有元素, 返回NodeList對象。該方法不管找沒找到html元素, 都會返回NodeList對象。

6. 通過html對象選擇器查找html對象

6.1. 通過html對象選擇器訪問元素、屬性、元素集合等等。

var body = document.body; var forms = document.forms; var title = document.title;

7. 例子

7.1. 新建FindHtml動態Web工程

?7.2. 編寫index.html

<!DOCTYPE html>  <html><head><meta charset="utf-8" /><title>訪問html元素</title><base href="http://www.rjbd.com" /></head><body onload="domReadyState()"><div id="div1"></div><span id="span1"></span><p class="p"></p><p class="p"></p><p class="p"></p><a href="http://www.baidu.com" name="baidu"></a><a href="#" name="lyw"></a><embed width="100%" height="0" src="" /><img src="" usemap="#planetmap" /><map name="planetmap" id="planetmap"><area shape="circle" coords="180,139,14" href ="#" target ="_blank" alt="Venus" /><area shape="circle" coords="129,161,10" href ="#" target ="_blank" alt="Mercury" /><area shape="rect" coords="0,0,110,260" href ="#" target ="_blank" alt="Sun" /></map><form name="form1"><input type="text" name="id" hidden="hidden" /></form><script type="text/javascript">var div1Element = document.getElementById('div1');document.write(div1Element + '<br />');var span1Element = document.getElementById('span1');document.write(span1Element + '<br />');var span100Element = document.getElementById('span100');document.write(span100Element + '<br /><hr />');var ps = document.getElementsByTagName('p');document.write(ps + '<br />');var bs = document.getElementsByTagName('b');document.write(bs + '<br /><hr />');var classps = document.getElementsByClassName('p');document.write(classps + '<br />');var classpps = document.getElementsByClassName('pp');document.write(classpps + '<br /><hr />');var qsP = document.querySelector(".p");document.write(qsP + '<br />');var qsPP = document.querySelector(".pp");document.write(qsPP + '<br /><hr />');var qsaP = document.querySelectorAll(".p");document.write(qsaP + '<br />');var qsaPP = document.querySelectorAll(".pp");document.write(qsaPP + '<br /><hr />');var as = document.anchors;document.write('擁有name屬性的所有a元素: ' + as + '<br />');var baseURI = document.baseURI;document.write('文檔的絕對基準URI: ' + baseURI + '<br />');var body = document.body;document.write('body元素: ' + body + '<br />');var d = new Date();d.setTime(d.getTime() + (7*24*60*60*1000));var expires = "expires=" + d.toGMTString();document.cookie = encodeURIComponent('userName=zs;pwd=123456;'+expires);var cookie = decodeURIComponent(document.cookie);document.write('文檔的cookie: ' + cookie + '<br />');var doctype = document.doctype;document.write('文檔的聲明: ' + doctype + '<br />');var documentElement = document.documentElement;document.write('html元素: ' + documentElement + '<br />');var domain = document.domain;document.write('文檔的服務器域名: ' + domain + '<br />');var embeds = document.embeds;document.write('所有的embed元素: ' + embeds + '<br />');var forms = document.forms;document.write('所有的form元素: ' + forms + '<br />');document.write('form1: ' + forms['form1'] + '<br />');var head = document.head;document.write('head元素: ' + head + '<br />');var images = document.images;document.write('所有的img元素: ' + images + '<br />');var implementation = document.implementation;document.write('DOM實現: ' + implementation + '<br />');var inputEncoding = document.inputEncoding;document.write('文檔的編碼: ' + inputEncoding + '<br />');var lastModified = document.lastModified;document.write('文檔更新的日期和時間: ' + lastModified + '<br />');var links = document.links;document.write('擁有href屬性的a和area元素: ' + links + '<br />');var readyState = document.readyState;document.write('文檔的加載狀態: ' + readyState + '<br />');var scripts = document.scripts;document.write('所有的scripts元素: ' + scripts + '<br />');var title = document.title;document.write('文檔的title: ' + title + '<br />');var url = document.URL;document.write('文檔的完整URL: ' + url + '<br />');</script><script type="text/javascript">function domReadyState(){var readyState = document.readyState;alert('文檔的加載狀態: ' + readyState);}</script></body> </html>

7.3. 效果圖

總結

以上是生活随笔為你收集整理的086_访问html元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

元素
html