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. 效果图