您的位置：首页 > Web前端 > JavaScript

【js学习笔记-081】-----选取文档元素

2014-01-09 16:46 323 查看

选取文档元素

用指定的id属性

document.getElementById(“section1”);

//任何html元素可以有一个id属性，在文档中该值唯一，即同一个文档中的两个元素不能有相同的ID。

注意：低于IE8版本的浏览器中，getElementById()对匹配元素的ID不区分大小写，而且也返回匹配name属性的元素

用指定的name属性

name属性的最初打算是为表单元素分配名字，在表单数据提交到服务器时使用该属性值。类似id属性，name是给元素分配名字，但区别于id,它不必唯一：如表单中单选或复选按钮通常是这样的。且和id不一样的是name属性只在少数html元素中有效，包括表单、表单元素，<iframe>和<img>元素。

document.getElementsByName();

该方法义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML中不可用。它返回一个NodeList对象（包含若干Element对象的只读数组）。IE中，getElementsByName()也返回id属性匹配指定值的元素，为了兼容，应小心！！！不要将同样的字符串同时用做名字和ID。

对Document对象：<form> <img> <iframe> <applet> <embed><object>元素设置name属性值，即在Document对象中创建以此name属性值为名字的属性。如果给定的名字只有一个元素，自动创建的文档属性对应的该值是元素本身，如果有多个元素，该文档属性的值是一个nodelist对象，它表现为一个包含这些元素的数组。为若干命名<iframe>元素所创建的文档属性比较特殊：它们指代这些框架的window对象而不是Element对象。

这意味着有些元素可以作为Document属性仅通过名字来选取：

//针对<form name=”shipping_address” >元素，得到Element对象

var form = document. shipping_address;

用指定的标签名字

Document对象getElementsByTagName()方法可用来选取指定类型(标签名)的所有HTML或XML元素。它返回一个NodeList对象。NodeList中返回元素按照在文档中的顺序排序的，所以可用能过数组索引下标来选取指定位置的元素。

如果getElementsByTagName()传递通配符参数“*”将获得一个代表文档中所有元素的NodeList对象。

Element 类也定义getElementsByTagName()方法，其原理和Document版本一样，但是它只选取调用方法的元素的后代元素。因此，在查找文档中的第一个<p>元素里的成有<span>元素：

var
firstpara=document.getEelementsByTagName(“p”)[0];

var firstParaSpans = firstpara.getElementsByTagName(“span”);

HTMLDcoument对象还会定义两个属性:body,head。这些属性总是会定义：如果文档源码未显式地包含<head>和<body>元素，浏览器会隐匿地创建它们。

Document类中documentElement属性指代文档的根元素。

指定的CSS类

javascrip中 class是保留字，所有客户端js使用className属性来保存HTML的 class属性。

html定义了getElementsByClassName()方法，它基于class属性值中的标识符来选取成组的文档元素。

类似getElementsByTagName()，在HTML文档和HTML元素上可能调用getElementsByClassName()，它会返回一个实时的 NodeList对象，包含文档或元素所有匹配的后代节点。它只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识组成。只有当元素的class属性值包含所有指定的标识符时才匹配。但是标识符的顺序是无关紧要的。

<!DOCTYPE>声明的严格程序来选择“怪异模式”或“标准模式”方式显示HTML文档。怪异模式是为了向后兼容性而存在的，其中一个怪异行为就是：在class属性和CSS样式表中的类标识符不区分大小写。

除IE8(妈的又是IE……！！？？？)及其较低版本，都实现了getElementsByClassName()。但IE8支持一个querySelectorAll()方法。

匹配指定的CSS选择器

W3C标准定义了获取匹配一个给定选择器的元素的javascript方法。该API的关键是Document方法querySelectorAll()。它接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。它返回的NodeList对象并不是实时的：它包含在调用时刻选择器所匹配的元素，但它并不更新后续文档的变化。没有找到元素，会返回一个空的NodeList对象。如果选择器字符串非法，querySelectorAll()将抛出一个异常。

这个方法在Element节点中也有定义：调用时指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集以便它只包含指定元素的后代元素。

querySelector()类似querySelectorAll(),但它只是返回第一个匹配的元素。

当前的浏览器创造IE都支持CSS3, IE7 8 支持css2

使用jquery可以在不支持的浏览器上使用css3选择器它实现了一个轻便的，跨浏览器的和querySelectorAll()等效的方法，命名为$()。

jQuery的CSS选择器匹配的代码已经作为一个独立的标准库提出并发布了，命名：Sizzle。

document.all[]

IE4引入的集合表示所有文档中的元素，目前已经废弃，不应该再使用！！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航