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对象的这个方法用来选择指定类型(标签名)的所有HTMLXML元素。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.onload=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.imagedocument.forms的属性为HTMLCollection对象。这两个对象不是历史文档的一个静态快照,而通常是实时的,并且当文档变化时他们所包含的元素列表能随之改变,这是其中一个最重要和令人惊讶的特性。假设在一个没有<div>元素的文档中调用getElementsByTagName(‘div’),此时返回值是一个length0NodeList对象。如果再在文档中插入一个新的<div>元素,此元素将自动成为NodeList的一员,并且它的length属性变成1。通常,NodeListHTMLCollection的实时性非常有用。但是,如果在迭代一个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="" onclick="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:元素的标签名,以大写的形式表示。



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: