Ext.DomQuery,根据编译请求提供高效的将选择符 / xpath 处理为可复用的函数的方法。可以添加新的伪类和匹配器。该类可以运行于 HTML 和 XML 文档之上(如果给出了一个内容节点)。 简单的说就是选择器。

DomQuery的核心方法就是:CSS选择器和XPath语法。

DomQuery支持4种选择器:元素选择器、属性选择器、伪类、CSS选择器。

1.元素选择器

  var el = Ext.DomQuery.selectNode("*");

  之前一篇,我们谈论过Ext.DomQuery.selectValue();

  • * 任意元素
  • E 一个标签为 E 的元素
  • E F 所有 E 元素的分支元素中含有标签为 F 的元素
  • E > FE/F 所有 E 元素的直系子元素中含有标签为 F 的元素
  • E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
  • E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素

 例子:

     var did = "extdd-7"; 

     var elt = Ext.DomQuery.selectNode("div[@id='"+did+"']");

      alert(elt.innerHTML);

2.属性选择器

  var el = Ext.DomQuery.selectNode("div[@class='mydiv']");

  @ 与引号的使用是可选的。例如:div[@foo='bar'] 也是一个有效的属性选择符。

  • E[foo] 拥有一个名为 “foo” 的属性
  • E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
  • E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
  • E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
  • E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
  • E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性 

3.伪选择器

   var el = Ext.DomQuery.selectNode("div:first-child");

  • E:first-child E 元素为其父元素的第一个子元素
  • E:last-child E 元素为其父元素的最后一个子元素
  • E:nth-child(n) E 元素为其父元素的第 n 个子元素(由1开始的个数)
  • E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
  • E:nth-child(even) E 元素为其父元素的偶数个数的子元素
  • E:only-child E 元素为其父元素的唯一子元素
  • E:checked E 元素为拥有一个名为“checked”且值为“true”的元素(例如:单选框或复选框)
  • E:first 结果集中第一个 E 元素
  • E:last 结果集中最后一个 E 元素
  • E:nth(n) 结果集中第 n 个 E 元素(由1开始的个数)
  • E:odd :nth-child(odd) 的简写
  • E:even :nth-child(even) 的简写
  • E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
  • E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
  • E:not(S) 一个与简单选择符 S 不匹配的 E 元素
  • E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
  • E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
  • E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素

4.CSS选择器

  var el = Ext.DomQuery.selectNode("div{padding-left='6px'}");

  • E{display=none} css 的“display”属性等于“none”
  • E{display^=none} css 的“display”属性以“none”开始
  • E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包含字串“none”
  • E{display%=2} css 的“display”属性能够被2整除
  • E{display!=none} css 的“display”属性不等于“none”