javascript的选择器、节点属性

最新推荐文章于 2024-05-24 00:34:26 发布

qq小小布丁

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量7.8k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u012841667/article/details/52876079

版权

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

一、获取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>

5、document.body和document.head

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

二、节点列表

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>

四、节点属性

1、parentNode:该节点的父节点，或者针对类似Document对象应该是null，因为他没有父节点。

2、childNodes:只读的类数组对象（NodeList对象），它是该节点的子节点的实时表示。

3、firstChild、lastChild：该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null。

4、nextSibling和previousSibling：该结点的兄弟结点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点。节点的顺序反映了它们在文档中出现的顺序。这两个属性将节点之间以双向链表的形式连接起来。

5、nodeType：该节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点。

6、nodeValue：Text节点或Comment节点的内容。

7、nodeName:元素的标签名，以大写的形式表示。

qq小小布丁

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript的选择器、节点属性

一、获取html元素，选择器1、document.getElementById("id")Document对象的该方法通过id获取元素，在低于IE8版本的浏览器中，getElementById（）对匹配元素的ID不区分大小写，而且也返回匹配name属性的元素。2、document.getElementsByName("name")Document对象的该方法通过name属性获取
复制链接

扫一扫

专栏目录