086_访问html元素

HTML元素访问方法详解

最新推荐文章于 2024-10-30 16:08:16 发布

原创最新推荐文章于 2024-10-30 16:08:16 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css

JavaScript学习专栏收录该内容

105 篇文章

订阅专栏

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