CSS定位:几种类型的position定位的元素
作者：用户
本文讲的是CSS定位:几种类型的position定位的元素，
文章简介：定位属性看起来好像很好理解，但它的运作与它在表面所看到的有点儿不一样。你可能会觉得的是相对定位更加类似绝对定位。当在做布局设计的时候你通
简介：定位属性看起来好像很好理解，但它的运作与它在表面所看到的有点儿不一样。你可能会觉得的是相对定位更加类似绝对定位。当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局。
当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说，有一些东西会绊倒新手，所以在它成为你的惯用技巧前你需要掌握它们。
一旦你更深入地了解了它是怎么运作的，你就能够做出一些更棒的事情来。
CSS盒模型和定位的类型
为了搞清楚定位首先你得了解CSS盒模型。在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章。我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结。
在CSS中，每一个元素都由一个矩形盒子所包含。每一个盒子都会具有一个内容区，内容区被一个内边距所包裹，内边距外是盒子的边框，并且在边框之外会有一个外边距用于与其他盒子分隔开来。这些你可以从下面这张图片看到。
定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。定位模式包括了常规流，浮动，和几种类型的 position 定位的元素。
CSS position 属性可以取5种值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
我会在下面对前三个值进行详细的阐述并简单地讲解一下最后两个值。
static 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒模型所决定的。
一个 static 定位的元素会忽略所有 top，right，bottom，left 以及 z-index 属性所声明的值。为了让你的元素能使用任何的这些属性，你需要先为它的 position 属性应用这三个值的其中之一： absolute，relative，fixed
position 值为 inherit 的元素和其他所有属性的继承值一样，元素只是简单地应用了与父元素一样的 position 值。
绝对定位（Absolute Positioning）
绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言，它会将该绝对定位元素视为不存在。就好像 display 属性被设为 none 一样。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。
你可以通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。但你通常只会设置它们其中的两个，top 或者 bottom，以及 left 或者 right。默认地它们的值都为 auto。
弄明白绝对定位的关键是知道它的起点在哪里。如果 top 被设置为20px那么你要知道这20px是从哪里开始的。
一个绝对定位的元素的起点位置是相对于它的第一个 position 值不为 static 的父元素而言的。如果在它的父元素链上没有满足条件的父元素，那么绝对定位元素则会相对于文档窗口来进行定位。哈！
关于“相对”这个概念你或许有点迷惑，尤其是还有一个叫相对定位的东西，这是我们还没有讲到的。
当你在一个元素的样式上设置 position:absolute 意味着需要考虑父元素，并且如果父元素的 position 值不为 static ，那么绝对定位元素的起点为父元素的左上角位置。
如果父元素没有应用除了 static 以外的 position 定位，那么它会检查父元素的父元素是否有应用非 static 定位。如果该元素应用了定位，那么它的左上角便会成为绝对元素的起点位置。如果没有则会继续向上遍历DOM直到找到一个定位元素或者寻找失败以到达最外层的浏览器窗口。
相对定位（Relative Positioning）
相对定位的元素也是根据 top, right, bottom, 和 left 四个属性来决定自己的位置的。但只是相对于它们原来所处于的位置进行移动。在某种意义上来说，为元素设置相对定位和为元素添加 margin 有点相似，但也有一个重要的区别。区别就是在围绕在相对定位元素附近的元素会忽略相对定位元素的移动。
我们可以把它看做是一张图片的重像从真实的图片的位置开始进行了一点移动。它原始图片所占据的位置仍然保留，但我们已经没法再看到它，只能看到它的重像。这样就让元素之间可以进行位置的重叠，因为相对定位元素能够移动到其他元素所占据的空间中。
相对定位元素离开了正常文档流，但仍然影响着围绕着它的元素。那些元素表现地就好像这个相对定位元素仍然在正常文档流当中。
我们无需再追问这个相对的位置是在哪里。因为这个相对位置很显然是正常的文档流。相对定位有点儿像为元素添加了 margin ，对相邻元素来说却像是什么都没发生过。但实际上并没有增加任何的 margin 。
固定定位（Fixed Positioning）
固定定位的行为类似于绝对定位，但也有一些不同的地方。
首先，固定定位总是相对于浏览器窗口来进行定位的，并且通过哪些属性的 top, right, bottom, 和 left 属性来决定其位置。它抛弃了它的父元素，它就是定位中表现地有点儿反叛。。
第二个不同点是其在名字上是继承的。固定定位的元素是固定的。它们并不随着页面的滚动而移动。你可以告诉元素它所处的位置并永远不再移动。噢~好像还挺乖巧的。
在某种意义上说固定定位元素有点儿类似固定的背景图片，只不过它的外层容器块总是浏览器窗口罢了。如果你在 body 中设置一个背景图片那么它与一个固定定位的元素的行为时非常像的，只不过在位置上的精度会略少一些。
背景图片也不能改变其在第三个维度的大小，也因而带来了 z-index 属性。
打破了平面的 Z-Index
这个页面是一个二维平面。它具有宽度和高度。我们活在一个用 z-index 作为其深度的三维的世界当中。这个额外的维度能够穿越一个平面。
由上图可知，高的 z-index 位于低的 z-index 的上面并朝页面的上方运动。相反地，一个低的 z-index 在高的 z-index 的下面并朝页面下方运动。
没有的 z-index 的话，定位元素会有点儿麻烦。因为 z-index 能让一个定位元素位于另一个元素的上方或者下方，这或许能让你做出点创造性的东西。所有的元素的默认的 z-index 值都为0，并且我们可以对 z-index 使用负值。
z-index 实际上比我在这里描述的要更加地复杂，但细节写在了另一篇文章里。现在只需要记住这个额外维度的基本概念以及它的堆叠顺序，另外还要记住只有定位元素才能应用 z-index属性。
定位的问题
对于定位元素来说由几个比较常见的问题，都值得我们好好了解。
1.你不能在同一个属性当中应用定位属性和浮动。因为对使用什么样的定位方案来说两者的指令时相冲突的。如果你把两个属性都添加到一个相同的元素上，那么就期望在CSS中较后的那个属性时你想要使用的吧。
2.Margin 不会在绝对元素上折叠。假设你具有一个 margin-bottom 为20px的段落。在段落后面是一个具有30px的 margin-top 的图片。那么段落和图片之间的空间不会是50px（20px+30px）而是30px（30px & 20px）。这就是所谓的 margin-collapse，两个 margin 会合并（折叠）成一个 margin。
绝对定位元素不会像那样进行 margin 的折叠。这会使它们跟预期的不一样。
3.IE在 Z-index 上有一些BUG。在IE 6中 select 元素总是处于堆叠层级的最上方而不管它的 z-index 和其他元素的 z-index 是多少。
IE 6和IE 7在堆叠层级上又有另外一个问题。IE 6由最外层的定位元素的层级来决定哪一组的元素处于层级的最上面，而不是每一个单独的元素自身的层级决定。
style="z-index: "&
style="z-index: 1"&&/p&
style="z-index: " /&
对上面这段结构，你会预料段落元素处于堆叠层级的最上方。因为它具有最大的 z-index 值。但在IE 6和IE 7中，图片为处于段落的上方。因为 img 具有比 div 更加高的 z-index 层级。因此它会位于所有 div 的子元素的上方。
一个元素上所设置的位置属性会根据其中的一种CSS定位模式来运作。你可以为定位元素设置 absolute, relative, fixed, static (默认), 和 inherit 中的其中一个值。
定位模式和CSS定位元素，定义了一个盒子在布局中应该处于什么位置以及围绕它的元素会受到定位元素带来的影响。
z-index 属性只能被应用与定位元素上。它为页面增加了第三个维度并设置了元素的层级上的顺序。
定位属性看起来好像很好理解，但它的运作与它在表面所看到的有点儿不一样。你可能会觉得的是相对定位更加类似绝对定位。当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文原文：http://www.vanseodesign.com//css-positioning/
中文译文：http://www.w3cplus.com/css/position-and-z-index.
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有
的相关内容，欢迎继续使用右上角搜索按钮进行搜索属性
，以便于您获取更多的相关知识。
... position的值， relative和absolute分别是相对于谁进行定位的？ https://www.nowcoder.com/ta/front-end-interview/review?page=9 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。 ...
...有助于理解在屏幕上看到的所有东西都形成某种框。CSS 定位机制 　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 　　除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 X(HT...
css有3种定位机制:普通流,浮动和绝对定位.
除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定.
通过使用position属性,可以选择4种不同类型的定位: static 元素框正常生成 ...
...因为php和python都是脚本语言，不用编译，然后vim用于代码定位以及增删查改等效率上的优势还是比较明显的。以及小型web开发，也不像编什么算法题一样需要经常看某个变量的值，实在需要的适合加个输出语句编辑完一跑就知道...
...觉得有必要把大家的回答总结一下。 方法总结一、绝对定位之automargin先来看一下绝对定位的概念： position : 将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设...
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
40+云计算产品，6个月免费体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
云服务器9.9元/月，大学必备
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！如何使用firebug网页定位元素，firepath的使用_百度经验
该经验图片、文字中可能存在外站链接或电话号码等，请注意识别，谨防上当受骗！&&&&&&&&&电脑软件如何使用firebug网页定位元素，firepath的使用听语音1234567
百度经验:jingyan.baidu.com在软件的开发中，或者软件的测试的过程中都有可能对开发完成的web网页，进行对网页元素上定位，而现在很多的浏览器是可以看到网页上相关的元素信息，可以查看某一个网页的元素信息，通过定位的方式查找元素。百度经验:jingyan.baidu.comMozilla Firefox百度经验:jingyan.baidu.com1要使用Mozilla Firefox的火狐浏览器，需要电脑上安装，然后打开Mozilla Firefox浏览器，选中菜单中的“工具”的选项。2选中完菜单中工具后，弹出了一个下拉的菜单中进行选中web开发者。3进入到下一级的菜单中，可以看到firebug的选项，点击进入。4这样就直接打开firebug工具，定位元素使用firepath的精确定位到路径元素，可点击firepath的选项。5这样开始定位元素，选中firebug的左上角位置中箭头后。6把鼠标移动到百度一下的输入框中，会提示已捕捉到输入框中，然后进行点击下输入框。7选中完输入框之后，在网页的源代码中会精确定位元素的信息，根据查看具体信息内容来对元素上的操作。END百度经验:jingyan.baidu.com希望对你有帮助，相互对经验学习。喜欢的点个赞，已对小编的支持一下。经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。投票(21)已投票(21)有得(0)我有疑问(0)◆◆说说为什么给这篇经验投票吧！我为什么投票...你还可以输入500字◆◆只有签约作者及以上等级才可发有得&你还可以输入1000字◆◆如对这篇经验有疑问，可反馈给作者，经验作者会尽力为您解决！你还可以输入500字相关经验22502热门杂志第1期你不知道的iPad技巧3728次分享第1期win7电脑那些事6583次分享第2期新人玩转百度经验1387次分享第1期Win8.1实用小技巧2640次分享第1期小白装大神1894次分享◆请扫描分享到朋友圈该经验图片、文字中可能存在外站链接或电话号码等，请注意识别，谨防上当受骗！Selenium Webdriver定位页面元素的几种方式
我的图书馆
Selenium Webdriver定位页面元素的几种方式
& & & &对于有点开发经验的人来说学习这个定位其实相对容易很多，只要你写过前端js方面的代码，基本上selenium webdriver的元素定位方式一看就懂，当然也有几个需要特别注意(如By.xpath/)，需要深入的去了解一些，毕竟在实际使用中还是挺频繁的，下面依照常用-&不常用的顺序介绍selenium webdriver定位元素的几种方式：
下图是通过firebug调试定位到的百度搜索框：
同样，将控件所对应的name属性找到即可
3.By.xpath
这个方法非常重要，会经常使用到，使用这种方式几乎可以定位到任意页面上的元素。如图所示，将用xpath(页面中元素的路径)来定位我们需要用到的元素
&该图所对应的页面上的标签：&
通过路径来定位控件，分为：绝对路径、相对路径(这个概念对应做过开发的人来说非常熟悉，不错与我们开发中的绝对路径相对路径非常相似)，那么通过selenium webdriver的xpath方式定位元素需要注意：
a.绝对路径以 "/" 表示，相对路径以 "//" 表示
-- 当xpath路径以 "/" 开头时，表示从页面的根节点开始解析；当"/"出现在xpath路径中时，表示 & & 寻找父节点的直接子节点。
-- 当xpath路径以 "//" 开头时，表示从页面上任意符合的元素节点开始解析；当"//"出现在xpath路径中时，表示寻找父节点下任意符合条件的子节点。
弄清楚它们各表示什么意思以后，就可以在实际应用中绝对路径相对路径混合使用。
下面是相对路径引用写法：
查找页面根元素：//
查找页面上所有的input元素：//input
查找页面上第一个form元素：//form[1]
查找页面上第一个form元素内的直接input(即第一个input控件)元素：//form[1]/input
查找页面上第一个form元素内所有的input元素(只要在form元素内的input都算，不管嵌套了多少个其它标签，此时可使用相对路径"//")：//form[1]//input
查找页面上id为loginForm的form元素：//form[@id='loginForm']
查找页面上id为loginForm的form元素下第一个input元素：//form[@id='loginForm']/input
查找页面上id为loginForm的form元素下第4个input元素：//form[@id='loginForm']/input[4]
查找页面上name属性为username的input元素：//input[@name='username']
查找页面上name属性为contiune且type属性为button的input元素：//input[@name='contiune'][@type='button']
4.By.tagName
通过元素的标签名称来查找元素.该方法与By.id、By.name不同，通常By.tagName查询出来的元素不止一个，可能会有多个，所以，使用该方法时会结合findElements来用，如下：
List&WebElement& inputElements = driver.findElements(By.tagName("input"));
for (WebElement input : inputElements) {
if(input.getAttribute("type").equals("text")){
System.out.println(input.getText());
在页面中，使用input标签的有：文本框/单选框/复选框/下拉框/密码框...，只有type属性不同
5.By.className
利用元素的css样式来查找元素.如下页面代码，通过className来查找对应的&p&标签
&WebElement element =&driver.findElement(By.className("bmi_info"));
在我学习的过程中，结合tagName,className来获取BMI的值，如下：
先获得className为"bmi_info"的&p&元素,该元素内仅有一个span,这时就可以通过tagName获得该span,代码如下：
WebElement bmiElement = driver.findElement(By.className("bmi_info")).findElement(By.tagName("span"));
String actualBMI = bmiElement.getText();
6.By.cssSelector
cssSelector这种元素定位方式跟xpath比较类似，但执行速度较快，而且各种浏览器对它的支持都相当到位，所以功能也是蛮强大的。
下面是一些常见的cssSelector的定位方式：
定位id为flrs的div元素，可以写成：#flrs&&&& 注：相当于xpath语法的//div[@id=’flrs’]
定位id为flrs下的a元素，可以写成 #flrs & a& 注：相当于xpath语法的//div[@id=’flrs’]/a
定位id为flrs下的href属性值为/forexample/about.html的元素，可以写成： #flrs & a[href=”/forexample/about.html”]
如果需要指定多个属性值时，可以逐一加在后面，如#flrs & input[name=”username”][type=”text”]。
7.&By.linkText()
通过超文本链接上的文字信息来定位元素，这种方式一般专门用于定位页面上的超文本链接
WebElement linkElement = driver.findElement(By.linkText("新闻"));
8.By.partialLinkText()
该方法时By.linkText的扩展,当你不能准确知道超链接上的文本信息或者只想通过一些关键字进行匹配时，可以使用这个方法来通过部分链接文字进行匹配
WebElement linkElement = driver.findElement(By.partialLinkText("新"));
1. 当页面元素有id属性时，最好尽量用id来定位。但由于现实项目中很多程序员其实写的代码并不规范，会缺少很多标准属性，这时就只有选择其他定位方法。
2. xpath很强悍，但定位性能不是很好，所以还是尽量少用。如果确实少数元素不好定位，可以选择xpath或cssSelector。
3. 当要定位一组元素相同元素时，可以考虑用tagName或name。
4. 当有链接需要定位时，可以考虑linkText或partialLinkText方式。
TA的推荐TA的最新馆藏[转]&
喜欢该文的人也喜欢在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
Document 对象提供了属性和方法实现定位页面元素功能，这也是 DOM 的标准规范中 Document 对象的主要应用之一。
定位页面元素方法
目前 Document 对象提供实现定位页面元素的方法具有如下几种:
getElementById()方法：通过页面元素的 id 属性值定位元素。
getElementsByName()方法：通过页面元素的 name 属性值定位元素。
getElementsByTagName()方法：通过页面元素的元素名定位元素。
getElementsByClassName()方法：通过页面元素的 class 属性值定位元素。
querySelector()方法：通过 CSS 选择器定位第一个匹配的元素。
querySelectorAll()方法：通过 CSS 选择器定位所有匹配的元素。
接下来，我们就一一进行学习。
通过元素的 ID 属性值定位元素
HTML 页面元素的 id 属性的特点是唯一、不可重复的，所以通过这种方式定位的 HTML 页面元素也是唯一的。
其语法格式如下:
element = document.getElementById(id);
在上述语法中，id 是参数，表示所要定位元素的 id 属性值，是一个大小写敏感的字符串。element 是返回值，表示定位的元素，是一个 Element 对象。
值得注意的是: 如果 HTML 页面中不存在具有该 id 属性值的元素，则返回 null。
下面是使用 getElementById() 方法的示例代码:
var btn = document.getElementById('btn');
// 获取定位元素的 class 属性值
var className = btn.classN
// 添加 animate 动画样式
className += ' animate';
// 将新的 class 属性值设置
btn.className = classN
上述代码通过 getElementById() 方法定位 HTML 页面中 id 属性值为 btn 的元素，并为其元素的 class 属性添加 animate 样式。
完整示例代码请点击右边的链接:
通过元素的 name 属性值定位元素
其语法格式如下:
elements = document.getElementsByName(name);
在上述语法中，name 是参数，表示所要定位元素的 name 属性值，是一个大小写敏感的字符串。elements 是返回值，表示定位元素的集合，是一个 NodeList 集合。
下面是使用 getElementsByName() 方法的示例代码:
var elems = document.getElementsByName('btn');
// 循环遍历所有元素
for (var i=0; i&elems. i++) {
var elem = elems[i];
var className = elem.classN
className += ' animate';
elem.className = classN
上述代码通过 getElementsByName() 方法定位 HTML 页面中 name 属性值为 btn 的元素，并遍历所有得到的元素，为其元素的 class 属性添加 animate 样式。
完整示例代码请点击右边的链接:
通过元素的元素名定位元素
其语法格式如下:
elements = document.getElementsByTagName(name);
在上述语法中，name 是参数，表示所要定位元素的元素名，符号”*”表示所有元素。elements 是返回值，表示定位元素的集合，是一个 NodeList 集合。
下面是使用 getElementsByTagName() 方法的示例代码:
var elems = document.getElementsByTagName('button');
// 循环遍历所有元素
for (var i=0; i&elems. i++) {
var elem = elems[i];
var className = elem.classN
className += ' animate';
elem.className = classN
上述代码通过 getElementsByTagName() 方法定位 HTML 页面中元素名为 button 的元素，并遍历所有得到的元素，为其元素的 class 属性添加 animate 样式。
完整示例代码请点击右边的链接:
通过元素的 class 属性值定位元素
其语法格式如下:
elements = document.getElementsByClassName(names);
在上述语法中，names 是参数，表示所要定位元素的 class 属性值列表，class 名称通过空格分隔。
值得注意的是: names 参数可以是一个样式属性名称，也可以是多个样式属性名称。
elements 是返回值，表示定位元素的集合，是一个 NodeList 集合。
下面是使用 getElementsByClassName() 方法的示例代码:
var elems = document.getElementsByClassName('btn');
// 循环遍历所有元素
for (var i=0; i&elems. i++) {
var elem = elems[i];
var className = elem.classN
className += ' animate';
elem.className = classN
上述代码通过 getElementsByClassName() 方法定位 HTML 页面中 class 属性值为 btn 的元素，并遍历所有得到的元素，为其元素的 class 属性添加 animate 样式。
完整示例代码请点击右边的链接:
兼容 IE 8 及之前版本的浏览器
getElementsByClassName() 方法只支持 IE 9 版本及之后版本的浏览器。也就是说，该方法并不支持 IE 8 及之前版本的浏览器。
下图是不同浏览器的不同版本对 getElementsByClassName() 方法的支持情况:
由于国内的生产环境中，依旧存在使用 IE 8 及之前版本浏览器的情况。所以，我们需要自定义 getElementsByClassName() 方法解决浏览器的兼容问题。
function getElementsByClassName(element, names) {
上述自定义兼容方法接受两个参数，element 参数表示调用 getElementsByClassName() 方法的对象（目前为 Document 对象），names 参数表示所要定位元素的 class 属性值列表。
function getElementsByClassName(element, names) {
// 检测 getElementsByClassName() 是否可用
if (element.getElementsByClassName) {
// 优先使用 W3C 规范
return element.getElementsByClassName(names);
// 人为解决 IE 8 之前版本不兼容问题
这里我们要优先使用 W3C 规范的方法。所以，需要先判断当前浏览器环境是否存在 getElementsByClassName() 方法。
如果存在，就使用原本的 getElementsByClassName() 方法。如果不存在，就使用自定义代码来实现。
function getElementsByClassName(element, names) {
// 检测 getElementsByClassName() 是否可用
if (element.getElementsByClassName) {
// 优先使用 W3C 规范
return element.getElementsByClassName(names);
// 人为解决 IE 8 之前版本不兼容问题
// 获取所有后代元素节点
var elements = element.getElementsByTagName('*');
// 定义空数组
var result = [];
var element, classNameStr,
// 将样式名称改为数组类型
names = names.split(' ');
// 循环遍历所有元素节点
for (var i=0; element = elements[i]; i++) {
// 获取每个元素节点的样式名称
classNameStr = ' ' + element.className + ' ';
// 开启开关
// 循环遍历所有的样式名称
for (var j=0, name = names[j]; j++) {
// 判断当前元素节点的样式名称中是否包含指定的样式名称
if (classNameStr.indexOf(' ' + name + ' ') == -1){
// 如果不包含，则关闭开关，并且结束循环
// 判断当前元素节点是否包含指定样式名称
if (flag) {
// 如果包含，则将当前元素节点添加到数组中
result.push(element);
// 返回数组(所有包含指定样式名称的元素节点)
通过 CSS 选择器定位元素
CSS 中的选择器可以很便利地定位 HTML 页面元素，DOM 的标准规范中也提供类似的方法。
querySelector(): 定位匹配选择器的第一个元素。
querySelectorAll(): 定位匹配选择器的所有元素。
querySelector() 方法
其语法格式如下:
element = document.querySelector(selectors);
在上述语法中，selectors 是参数，表示选择器，可以包含一个或多个 CSS 选择器，多个则以逗号分隔。element 是返回值，表示定位元素的集合，匹配的第一个元素。
下面是使用 querySelector() 方法的示例代码:
var btn = document.querySelector(’#btn');
// 获取定位元素的 class 属性值
var className = btn.classN
// 添加 animate 动画样式
className += ' animate';
// 将新的 class 属性值设置
btn.className = classN
上述代码通过 querySelector() 方法定位 HTML 页面中 id 属性值为 btn 的元素，并为其元素的 class 属性添加 animate 样式。
完整示例代码请点击右边的链接:
querySelectorAll() 方法
其语法格式如下:
elements = document.querySelectorAll(selectors);
在上述语法中，selectors 是参数，表示选择器，可以包含一个或多个 CSS 选择器，多个则以逗号分隔。elements 是返回值，表示定位元素的集合，是一个 NodeList 集合。
下面是使用 querySelectorAll() 方法的示例代码:
var elems = document.querySelectorAll('button');
// 循环遍历所有元素
for (var i=0; i&elems. i++) {
var elem = elems[i];
var className = elem.classN
className += ' animate';
elem.className = classN
上述代码通过 querySelectorAll() 方法定位 HTML 页面中元素名为 button 的元素，并遍历所有得到的元素，为其元素的 class 属性添加 animate 样式。
完整示例代码请点击右边的链接:
节点集合 NodeList
NodeList 是一组元素节点的集合，每个节点具有相应的索引值（从 0 开始的数字，类似于数组）。
元素节点在 NodeList 集合中存储的顺序与它们在 HTML 页面中的顺序保持一致。
NodeList 的属性 length 表示 NodeList 对象中包含的节点个数。方法 item(index) 表示返回 NodeList 对象中指定索引的节点。如果索引值越界,则返回 null。
NodeList 集合分为两种: 动态 NodeList 和静态 NodeList。
动态的 NodeList 集合
所谓动态的 NodeList 集合，就是如果文档中的节点树发生变化，则已经存在的 NodeList 对象也可能会变化。
以下几种定位 HTML 页面元素的方法返回的都是动态的 NodeList 集合。
getElementsByName()方法：通过页面元素的 name 属性值定位元素。
getElementsByTagName()方法：通过页面元素的元素名定位元素。
getElementsByClassName()方法：通过页面元素的 class 属性值定位元素。
我们可以通过以下示例代码，体验动态 NodeList 集合的特点:
var elems = document.getElementsByTagName('button');
console.log(elems.length);// 输出 3
// 添加一个新的button按钮
var btn = document.createElement('button');
btn.setAttribute('class','button');
var text = document.createTextNode('New Button');
btn.appendChild(text);
var div = document.getElementsByClassName('button-group')[0];
div.appendChild(btn);
console.log(elems.length);// 输出 4
上述代码通过 getElementsByTagName() 方法定位 HTML 页面中所有的 button 元素，测试打印 button 元素的个数是 3 个。
然后，我们创建一个新的 button 元素，并且将其添加到 HTML 页面中，再测试打印 button 元素的个数是 4 个。
值得注意的是: 我们在第二次测试打印 button 元素的个数时，并没有重新定位 HTML 页面中的 button 元素。
完整示例代码请点击右边的链接:
静态 NodeList 集合
所谓静态 NodeList 集合，就是对文档对象模型的任何改动都不会影响集合的内容。
querySelectorAll() 方法定位 HTML 页面元素所返回的 NodeList 集合就是静态 NodeList 集合。
我们可以通过以下示例代码，体验静态 NodeList 集合的特点:
var elems = document.querySelectorAll('button');
console.log(elems.length);// 输出 3
// 添加一个新的button按钮
var btn = document.createElement('button');
btn.setAttribute('class','button');
var text = document.createTextNode('New Button');
btn.appendChild(text);
var div = document.getElementsByClassName('button-group')[0];
div.appendChild(btn);
console.log(elems.length);// 输出 3
上述代码通过 querySelectorAll() 方法定位 HTML 页面中所有的 button 元素，测试打印 button 元素的个数是 3 个。
然后，我们创建一个新的 button 元素，并且将其添加到 HTML 页面中，再测试打印 button 元素的个数依旧是 3 个。
完整示例代码请点击右边的链接:
定位页面元素属性
Document 对象也提供了一些属性，来定位 HTML 页面中一些比较特殊的元素。
documentElement：获取 HTML 页面中的 &html& 元素。
head：获取 HTML 页面中的 &head& 元素。
title：获取 HTML 页面中的 &title& 元素。
body：获取 HTML 页面中的 &body& 元素。
links：获取 HTML 页面中的所有 &a& 元素。
images：获取 HTML 页面中的所有 &img& 元素。
我们可以定义一个包含以上元素的 HTML 页面，然后通过以下示例代码进行测试:
console.log(document.documentElement);
console.log(document.head);
console.log(document.body);
console.log(document.title);
console.log(document.links);
console.log(document.images);
本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。
本教程采用进行许可。
3 收藏&&|&&13
你可能感兴趣的文章
50 收藏，710
507 收藏，22.1k
1052 收藏，29.4k
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}