转载

DOM之DOM元素搜索

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)的行是错误的, 因为:

  1. a 已经引用到了DIV.

  2. 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.querySelectorquerySelectorAll

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

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

  1. IE8中必须是IE8模式, 不能是兼容模式.

  2. 是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(视频)控制

DOM之DOM元素搜索
towaywu

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

编程的人微信公众号: bianchengderen

DOM之DOM元素搜索

交流QQ群: 186659233
原文  http://www.wutongwei.com/front/infor_showone.tweb?id=227
正文到此结束
Loading...