转载

DOM之DOM元素搜索

DOM之Dom元素搜索

作者 :

2016-04-14 11:44:14.0

8 浏览

类别 :HTML/CSS/JAVASCRIPT 编程语言前端编程

大多数时候, 用户触发事件, 我们需要找到和改变页面上的元素. childNodes, children和另外的方法也就能够起到很好的作用, 但是他们只能在相邻的元素之间移动. 其实我们有更多的方式去查找DOM.

方法

`document.getElementById`

通过id快速获取元素的一种方法. 下面例子通过document获取 id='infor' 的元素. 不管这个元素在文档的哪个位置, 都会被找到.

<body>   <div id="info">Info</div>   <script>     var div = document.getElementById('info')     alert( div.innerHTML )   </script> </body>

提示. 确保仅有一个元素的ID值是唯一的. 当然, 你可以设定很多个元素id值一样的行为, 但是这会造成getElementById的行为在不同的浏览器中是不一致的. 因此, 最好是标准化保持一个元素对应一个id值.

如果元素找不到, 将会返回null.

隐式的id值变量

所有浏览器都会隐式的为每个id创建一个变量. 例如, 运行下面的代码. 将会输出 <div id="a">test</div>, 因为 a 变量是 IE生成的引用到元素.

<div id="a">test</div> <script>   alert(a) </script>

在老版本的IE中可能会导致出错, 看下面的例子

<div id="a">test</div> <script>   a = 5 // (x)   alert(a) </script>

如果在IE老版本中运行, 它不会执行. 有(X)的行是错误的, 因为:

a 已经引用到了DIV.
IE生成引用不能被覆盖!(这是错误行为)

但是如果你使用var a来代替a, 就可以执行:

<div id="a">test</div> <script>   var a = 5    alert(a) // all fine </script>

好的. 我们可以多在IE下实践....同时也是非常有趣的.

我们知道window是全局对象. Javascript在window中搜索任何东西, 作为最后的一种方式.

我们想象window.window会是什么, window === window.window会是true吗?

逻辑上,他们是一样的, 一致的. 但是... 大家可以试试在代码里看看会是什么结果, 为什么会是这个结果

`document/node.getElementsByTagName`

这个方法是所有给出的标签名称的所有元素且返回一个标签数据. 下面这个例子先不用管.

// get all div elements

var elements = document.getElementsByTagName( 'div' )

下面的例子演示了获取所有INPUT标签, 且循环打印他们的结果.

<table id="myTable">   <tr>     <td>Your age:</td>      <td>       <label>         <input type="radio" name="age" value="young" checked/> under 18       </label>       <label>         <input type="radio" name="age" value="mature"/> from 18 to 50       </label>       <label>         <input type="radio" name="age" value="senior"/> older than 60       </label>     </td>   </tr>  </table>  <script> var elements = document.getElementsByTagName('input')   for(var i=0; i<elements.length; i++) {     var input = elements[i]       alert(input.value+': '+input.checked)   } </script>

我们可以试着直接获取第一个元素:

var element = document.getElementsByTagName( 'input' )[0]

我们有一种方式可以通过特殊的 '*' 来获取所有的元素:

// get all elements in the document

document.getElementsByTagName( '*' )

通过父元素限制性的搜索

getElementsByTagName 可以被使用 ,但是必须是在DOM元素上.

下面例子演示了通过在另外一个元素上调用getElementsByTagName:

<ol id="people">   <li>John</li>   <li>Rodger</li>   <li>Hugo</li> </ol> <script>    var elem = document.getElementById('people')    var list = elem.getElementsByTagName('li')   alert(list[0].innerHTML)  </script>

elem.getElementsByTagName(‘li’) 找到elem下的所有li. 元素通过点来获取搜索的上下文.

`document.getElementsByName`

所有元素支持name属性, 我们也可以通过name属性来查找他们.

上面的例子中, 也可以使用下面的代码获取Input:

var elements = document.getElementsByName( 'age' )

`document/node.getElementsByClassName`

这个方法在所有浏览器中都支持, 除了小于IE9的版本. 通过类名来搜索, 不是属性. 我们做个实践, 来理解多个类名. 下面的例子演示了通过类名中的一个值来获取一个元素. 不过不要使用老版本的IE执行.

<div class="a b c">Yep</div> <script> alert( document.getElementsByClassName('a')[0].innerHTML ) </script>

类似 getElementsByTagName.

`document/node.querySelector` , `querySelectorAll`

方法querySelector和queryselectorAll 预习通过CSS3查询选择元素. querySelector 返回第一个元素, querySelectorAlll返回所有的元素.

在所有支持的浏览器中都可以使用, 包含IE8+. IE限制性的支持:

IE8中必须是IE8模式, 不能是兼容模式.
是IE CSS2.1. 虽然不是那么强大, 但是多数情况下也是可以有效的.

下面通过父元素UL获取所有li中的最后一个元素. 在IE8可以运行, 因为可以在IE8模式下渲染.

<ul>   <li>The</li>   <li>Test</li> </ul> <ul>   <li>Is</li>   <li>Passed</li> </ul> <script>   var elements = document.querySelectorAll('UL > LI:last-child')    for(var i=0; i<elements.length; i++) {     alert(elements[i].innerHTML )   } </script>

querySelector是 querySelectorAll('...')[0]简写.

XPath在现在的浏览器中.

所有现在的浏览器都支持强大的XPATH的查询, 这是作为XML的一般DOM搜索工具. 大多数浏览器可以在HTML运行它们.

下面的代码演示了不是IE语法的使用XPath查询找到所有包含 'XPath'的H3元素:

var result = document.evaluate("//h3[contains(text(),'XPath')]", document.documentElement, null,                  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)  for (var i=0; i<result.snapshotLength; i++) {     alert(result.snapshotItem(i).innerHTML) }

唯一例外的是IE(包含IE9) ,只支持XML文档对象. 他们可以通过XMLHTTPRequest加载文档, 但是在文档中搜索, 需要明确的加载页面到一个XML文档对象

在实际中,可以通过querySelector来更方便的完成这个任务.但是要总是要考虑各种各样的可能性.

查询结果可持续性!

所有的DOM查询, 可以匹配多个元素, 返回一个数组集合, 有长度, 有索引. 可以通过for循环去迭代他们.

但是索引和length属性在Array和返回的元素集合中, 其实是唯一相似的地方. 因为元素集合是特殊类型 NodeList或者HTMLCollection.

因此不要去使用push, pop或者另外的数组对象的属性方法.

恰恰相反的是, 通过所有getElementsBy*的方法查询的结果都是持续性的. 当你选择或者改变一个文档时, 查询结果会自动更新.

下面的例子演示了当元素删除时, 集合的length会改变:

<div id="outer">   <div id="inner">Info</div> </div> <script>   var outerDiv = document.getElementById('outer')   var divs = document.getElementsByTagName('div')    alert(divs.length)     outerDiv.innerHTML = '' // clear inner div    alert(divs.length) </script>

这个只适用于集合中. 如果你获取一个引用元素, 这个引用将会变成null. 例如, 元素elem = document.getElementById("inner") , 在外层div清除后,也还会存在.

querySelectorAll是个特殊的. 为了性能方面, 他返回的不是一个持续性的NodeList, 这是规则中的例外.

大家可以多多谢谢代码测试测试, 看看效果, 做一定的总结性的东西. 方便快速理解和熟练这个查询方法.

总结

有5种方式来查询DOM元素:

getElementById getElementsByTagName getElementsByName getElementsByClassName querySelector

5中方法都可以搜索其中的任何元素. 除了querySelector都可以返回可持续的元素. XPath在大多数浏览器中都支持,但很少使用.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=227 ,欢迎大家传播与分享.

HTML5 Camera(摄像头) 和 Video(视频)控制

towaywu

一个喜欢技术,走在创业路上的屌丝!欢迎一起交流

编程的人微信公众号: bianchengderen

DOM之DOM元素搜索

交流QQ群: 186659233

原文 http://www.wutongwei.com/front/infor_showone.tweb?id=227

正文到此结束

所属分类：编程技术

本文标签： CTO 总结创业代码 list 微信公众号 ip HTML5 value 文章 node CSS XML 博客 tab IDE Select 删除测试数据 DOM http web UI Document src java 创业 HTML QQ群
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

DOM之DOM元素搜索