javascript属性选择器 js 属性选择器

转载

技术博客达人 2023-08-20 14:40:46

文章标签 javascript属性选择器 html HTML 标识符 文章分类 JavaScript 前端开发

一、获取html元素，选择器

1、document.getElementById("id")

Document对象的该方法通过id获取元素，在低于IE8版本的浏览器中，getElementById（）对匹配元素的ID不区分大小写，而且也返回匹配name属性的元素。

2、document.getElementsByName("name")

Document对象的该方法通过name属性获取html元素，该函数定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用。，在IE中，getElementsByName（）也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时用做名字和id。为某些html元素设置name属性将自动在Window对象中创建匹配指定值的元素。如果给定的名字只有一个元素，自动创建的文档属性对应的该值是元素本身。如果有多个元素，该文档属性的值是一个NodeList对象，它表现为一个包含这些元素的数组。

3、document.getELementsByTagName("div")

Document对象的这个方法用来选择指定类型（标签名）的所有HTML或XML元素。Element类也定义了这个方法，它只选取调用该方法的元素的后代元素。

4、document.getElementsClassName("class")

通过类名来选取元素。在HTML文档和HTML元素上都可以调用getElementsByClassName(),它的返回值是一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。该方法只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才匹配，但是标识符的顺序是无关紧要的。注意，class属性和geElementsByClassName（）方法的类似标识符之间都是用空格隔开的，而不是逗号。

如今的Web浏览器依赖于文档开头处对<!DOCTYPE>声明的严格程度来选择“怪异模式”或“标准模式”方式显式HTML文档。怪异模式是为了向后兼容而存在的，其中一个怪异行为就是class属性中和css样式表中的类标识符不区分大小写。geElementsByClassName（）方法使用同样的样式匹配算法。如果文档以怪异模式渲染，该方法将执行不区分大小写的字符串比较；否则，该比较区分大小写。该方法在IE8及以下未实现。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script type="text/javascript">
		window.οnlοad=function(){
			var myid=document.getElementById("myid");
			var myclass = document.getElementsByClassName("myclass");
			var div = document.getElementsByTagName("div");
			console.log(myid);
			console.log(myclass);
			console.log(div);
		}
	</script>
</head>
<body>
	<div id="myid"></div>
	<div class="myclass"></div>
	<div class="myclass"></div>
</body>
</html>

javascript属性选择器 js 属性选择器_javascript属性选择器

5、document.body和document.head

分别用来获取HTML文档中<body>和<head>元素。Document类的documentElement属性指代文档的根元素。

javascript属性选择器 js 属性选择器_HTML_02

二、节点列表

getElementsByName()和getElementsByTagName()、getElementsClassName()都返回NodeList对象，而类似的

三、HTML集合

document.image和document.forms的属性为HTMLCollection对象。这两个对象不是历史文档的一个静态快照，而通常是实时的，并且当文档变化时他们所包含的元素列表能随之改变，这是其中一个最重要和令人惊讶的特性。假设在一个没有<div>元素的文档中调用getElementsByTagName(‘div’)，此时返回值是一个length为0的NodeList对象。如果再在文档中插入一个新的<div>元素，此元素将自动成为NodeList的一员，并且它的length属性变成1。通常，NodeList和HTMLCollection的实时性非常有用。但是，如果在迭代一个NodeList对象时在文档中添加或删除元素，首先会需要对NodeList对象生成一个静态的副本。

var tmp=Array.prototype.slice.call(nodelist,0);

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清空表单里所有的输入框</title>
</head>
<body>
<form name="myform" id="myform">
	我是第一排：<input type="text" name="myname" value="lili"/>
	<input type="text" name="name1" class="n1"/>
	<input type="text" name="name2" class="n2 n1"/>
	<button type="button" value="" οnclick="tijiao()">按钮</button>
</form>
<form name="myform2">
	我是第二排：<input type="text" name="name3" class="n1"/>
</form>
</body>
</html>

javascript属性选择器 js 属性选择器_标识符_03