随着Jquery对dom的编程的便利,HTML5也慢慢融入了对dom的编程的扩展。querySelectorAll就是一个很好的例子.
Document.querySelectorAll
返回当前文档中匹配一个特定选择器的所有的元素(使用depth-first pre-order这样的规则遍历所有文档节点) .返回的对象类型是 NodeList.
语法:
elementList = baseElement.querySelectorAll(selectors);
其中
elementList会是一个non-live的NodeList对象.
baseElement是一个元素对象.
selectors是一个由逗号连接的包含一个或多个CSS选择器的字符串.
selectors的规法:
- "#id" :获取含有id="id"的元素
- ".css":获取class属性包含“css”的所有元素
- “tag”:获取tagName为"tag"的所有元素
- "[attr='value']":获取元素含有attr属性的所有元素,如果加上"=value",则表示获取元素含有attr属性且此元素的值需为value,更多:[name*="value"] 包含, [name$="value"]结尾,[name^="value"]开头
- parent child 获取包含child的所有元素,parent > child 只获取第一层。parent > child > child获取第二层,以此类推。
tag和css可以接合使用,如:"div.red",表示所有class属性包含red的所有div元素