086_访问html元素
生活随笔
收集整理的這篇文章主要介紹了
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> <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> --> <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元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 085_Document对象
- 下一篇： 087_改变html