欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

dojo获取dom节点的方法

程序员文章站 2022-05-11 23:20:21
...

 1. 通过id获取dom节点

如果要对html文档中的元素进行处理时,我们一般会为该节点设置一个id属性;在dojo中,提供了一个通过id获取节点的简洁方式。

如果要获取如下节点:

<input type="text" name="username"  value="alex1" id="username" class="textCss"/>

 

使用js获取该节点:

document.getElementById("username");

 

使用dojo获取该节点:

dojo.byId("username");

 注意:如果没有找到指定id的节点,返回的将是undefined,而不是null。

 

2. 使用dojo.query进行通用查询

    除了通过byId来获取节点外,dojo提供了更为通用的方法query来获取dom节点,使用query方法获取指定id节点的方式如下:

var usernameObj  = dojo.query("#username"); //方法1
var usernameObj  = dojo.query("[id='username']"); //方法2
var usernameVal = usernameObj[0].value;

  

 2.1 通过节点的属性来获取节点的格式如下:

    dojo.query("[属性名='属性值']");

所以,你也可用一下方式来获取:

dojo.query("[name='username']");
dojo.query("[type='text']");
dojo.query("[value='alex']");

 

注意:通过query的方式获取节点,返回的将是一个对象数组;如果没有获取到任何节点,将返回空字符串"",而不是null。

 

  2.2 通过节点类型来获取节点的格式如下:

        dojo.query("节点类型");

   如获取所有的input的节点:

dojo.query("input");

 

    可以和其他方式结合在一起使用,如获取input节点中name属性值为username的节点:

dojo.query("input[name='username']");

  

   2.3 通过样式名来获取节点的格式如下:

         dojo.query(".样式名");

dojo.query(".textCss");

 

3. 节点复杂查询

    3.1 从某节点的所有后代节点中查找

dojo.query("body input");

 

    3.2 从某节点的子节点中查找

dojo.query("body>input");

   3.3 获取指定属性的值中,以"item"字符串开头、结尾或包含此字符串节点的方式如下:

 

dojo.query("[name^='item']"); 
dojo.query("[name$='item']"); 
dojo.query("[name*='item']"); 

   3.4 获取第一个和最后一个节点,或指定索引的节点

dojo.query("input:first-child");
dojo.query("input:last-child");
dojo.query("input:nth-child(1)");  // 索引从1开始
dojo.query("input:nth-child(odd)");

 

    如果某个元素是父元素中唯一的子元素,可以使用如下方式获取:
dojo.query("body form:only-child");