QueryWalker is a JavaScript library for efficiently traversing DOM elements. It provides two traversal methods: horizontal (parallel) and vertical (sequential), allowing you to process DOM elements based on selectors.
- Horizontal Traversal (walkHorizontally): Process multiple selectors in parallel
- Vertical Traversal (walkVertically): Process selectors sequentially
- Async Processing: Promise-based asynchronous processing support
- Error Handling: Customizable exception handling with resolve/reject control
- Scope Specification: Traverse within specific DOM elements
npm install querywalkerimport { QueryWalker } from "querywalker";
const { walkHorizontally, walkVertically } = QueryWalker;Process multiple selectors in parallel:
await walkHorizontally({
_scope_: document,
".button": async ({ element, selector, self }, resolve, reject) => {
console.log("Button found:", element);
element.addEventListener("click", () => {
console.log("Button clicked");
});
resolve(); // Explicitly resolve when done
},
".input": async ({ element, selector, self }, resolve, reject) => {
console.log("Input field found:", element);
element.addEventListener("input", (e) => {
console.log("Input value:", e.target.value);
});
resolve(); // Explicitly resolve when done
},
__exeptionHandler__: async (error, data, resolve, reject) => {
console.error("Error occurred:", error, data);
resolve(data.selector); // Resolve with selector name
},
});Process selectors sequentially:
await walkVertically({
_scope_: document.body,
".item": async ({ element, selector, self }) => {
console.log("Processing item:", element);
// Process each element sequentially
},
".link": async ({ element, selector, self }) => {
console.log("Processing link:", element);
// Process link elements
},
__exeptionHandler__: async (error, data) => {
console.error("Error occurred:", error, data);
},
});Process DOM elements horizontally in parallel.
Parameters:
options(Object): Configuration object_scope_(Element, default: document): Scope for traversal__exeptionHandler__(Function): Exception handler function with resolve/reject parameters[selector](Function): Processing function with selector name as key
Returns:
Promise<Object>: Configuration object
Process DOM elements vertically in sequence.
Parameters:
options(Object): Configuration object_scope_(Element, default: null): Scope for traversal__exeptionHandler__(Function): Exception handler function[selector](Function): Processing function with selector name as key
Returns:
Promise<Object>: Configuration object
Each selector's processing function receives the following parameters:
element(Element): Target DOM element for processingselector(String): Selector name (String object)self(Object): Reference to the configuration objectresolve(Function, walkHorizontally only): Promise resolve functionreject(Function, walkHorizontally only): Promise reject function
The exception handler function receives:
error(Error): The caught exceptiondata(Object): Object containing element, selector, and self referenceresolve(Function, walkHorizontally only): Promise resolve functionreject(Function, walkHorizontally only): Promise reject function
npm installnpm run build# Run tests
npm test
# Run tests in watch mode
npm run test:watchQueryWalker/
├── src/
│ ├── querywalker.js # Main export
│ └── Walker/
│ ├── WalkHorizontally.js # Horizontal traversal implementation
│ └── WalkVertically.js # Vertical traversal implementation
├── test/ # Test files
├── package.json
├── webpack.config.js
└── README.md
This project is licensed under the MIT License. See the LICENSE file for details.
Please report bugs and feature requests on GitHub Issues.
BlueFoxEnterprise