Dominator.js | Query Traversal

Using Query Traversal in Dominator.js

Dominator.js supports a rich set of query traversal methods, allowing developers to select and manipulate elements in a precise and flexible way. These queries can be chained together using the : delimiter to create more specific selections. Below are the key query methods:

1. :children(index) - Select Children by Index

Selects the child element at the specified index within the matched parent elements.

D$('.container:children(0)').css({ color: 'blue' });

This selects the first child element of the container and applies a blue color.

2. :gt(index) - Greater Than Index

Selects elements with an index greater than the specified value.

D$('.all:gt(0)').addClass('highlight');

This selects all .all elements with an index greater than 0 and adds the class highlight.

3. :lt(index) - Less Than Index

Selects elements with an index less than the specified value.

D$('.all:lt(2)').addClass('highlight');

This selects all .all elements with an index less than 2 and adds the class highlight.

4. :eq(index) - Equal to Index

Selects the element at the specified index.

D$('.all:eq(0)').css({ color: 'red' });

This selects the first .all element and changes its text color to red.

5. :not(index) - Exclude Index

Excludes the element at the specified index from the selection.

D$('.all:not(0)').addClass('highlight');

This selects all .all elements except the first one and adds the class highlight.

6. :hasclass(className) - Elements with Specific Class

Selects elements that contain a specific class.

D$('.all:hasclass(eliminate)').hide();

This hides all .all elements that have the eliminate class.

7. :hasnotclass(className) - Elements without Specific Class

Selects elements that do not contain a specific class.

D$('.all:hasnotclass(eliminate)').show();

This shows all .all elements that do not have the eliminate class.

8. :hasattr(attribute) - Elements with Specific Attribute

Selects elements that have a specified attribute.

D$('.all:hasattr(dominator)').css({ border: '2px solid red' });

This applies a red border to all elements with the dominator attribute.

9. :hasnotattr(attribute) - Elements without Specific Attribute

Selects elements that do not have a specified attribute.

D$('.all:hasnotattr(appname)').addClass('hidden');

This adds the hidden class to all elements that do not have the appname attribute.

10. :contains(text) - Elements Containing Specific Text

Selects elements that contain the specified text.

D$('.all:contains(kinshasa)').addClass('highlight');

This adds the class highlight to all elements containing the text "kinshasa".

11. :notcontains(text) - Elements Not Containing Specific Text

Selects elements that do not contain the specified text.

D$('.all:notcontains(kinshasa)').addClass('highlight');

This adds the class highlight to all elements that do not contain the text "kinshasa".

12. :startswith(text) - Elements Starting with Specific Text

Selects elements whose content starts with the specified text.

D$('.all:startswith(apa)').addClass('highlight');

This adds the class highlight to all elements whose text starts with "apa".

13. :endswith(text) - Elements Ending with Specific Text

Selects elements whose content ends with the specified text.

D$('.all:endswith(kakule)').addClass('highlight');

This adds the class highlight to all elements whose text ends with "kakule".

14. :regex(pattern) - Elements Matching Regular Expression

Selects elements whose content matches a regular expression pattern.

D$('.all:regex(\\d{4}-\\d{2}-\\d{2})').html('Date formatted correctly');

This selects all elements whose content matches the date format YYYY-MM-DD and updates their content.

15. :first - First Element

Selects the first element within the matched set.

D$('.all:first').css({ color: 'green' });

This applies green color to the first .all element.

16. :last - Last Element

Selects the last element within the matched set.

D$('.all:last').css({ color: 'purple' });

This applies purple color to the last .all element.

17. :notfirst - All but First Element

Selects all elements except the first one.

D$('.all:notfirst').addClass('highlight');

This adds the class highlight to all .all elements except the first one.

18. :notlast - All but Last Element

Selects all elements except the last one.

D$('.all:notlast').addClass('highlight');

This adds the class highlight to all .all elements except the last one.

19. :children(*) - Select All Children

This part of the query selects all direct child elements of a specified parent element.

D$('.parent:children(*)')

### Explanation:

• :children(*) selects all the direct child elements of the element specified before it (in this case, .parent).

Example:

<div class="parent">
<p>Child 1</p>
<p>Child 2</p>
<p>Child 3</p>
</div>

In this example, :children(*) would select all three <p> elements inside the .parent container.

20. :wrapinnewelement(div) - Wrap in New Element

This part of the query wraps each selected child element inside a new <div> element.

D$('.parent:children(*):wrapinnewelement(div)')

### Explanation:

• :wrapinnewelement(div) wraps each of the selected children in a new <div> element.

Example:

<div class="parent">
<p>Child 1</p>
<p>Child 2</p>
</div>

After applying :wrapinnewelement(div), the structure becomes:

<div class="parent">
<div><p>Child 1</p></div>
<div><p>Child 2</p></div>
</div>

21. :addclass('content') - Add Class to Elements

This part of the query adds the specified class (in this case, content) to each of the wrapped elements.

D$('.parent:children(*):wrapinnewelement(div):addclass('content')

### Explanation:

• :addclass('content') adds the class content to each element that was wrapped in a <div> by the previous part of the query.

Example:

<div class="parent">
<div><p>Child 1</p></div>
<div><p>Child 2</p></div>
</div>

After applying :addclass('content'), the structure becomes:

<div class="parent">
<div class="content"><p>Child 1</p></div>
<div class="content"><p>Child 2</p></div>
</div>

22. :appendto('.container') - Append to Another Element

This part of the query appends the wrapped elements to the specified target element (in this case, .container).

D$('.parent:children(*):wrapinnewelement(div):addclass('content'):appendto('.container')

### Explanation:

• :appendto('.container') appends the newly wrapped elements inside .parent into the .container element.

Example:

<div class="parent">
<div class="content"><p>Child 1</p></div>
<div class="content"><p>Child 2</p></div>
</div>
<div class="container"></div>

After applying :appendto('.container'), the structure becomes:

<div class="container">
<div class="content"><p>Child 1</p></div>
<div class="content"><p>Child 2</p></div>
</div>

Final Result:

The full query will select all children of .parent, wrap each in a <div> with a content class, and append them inside the .container element, resulting in:

<div class="container">
<div class="content"><p>Child 1</p></div>
<div class="content"><p>Child 2</p></div>
</div>