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
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
