You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. # Slick
  2. Slick is a standalone selector engine that is totally slick.
  3. Slick is split in 2 components: the Finder and the Parser. The Finder's job is to find nodes on a webpage, the Parser's job is to create a javascript object representation of any css selector.
  4. Slick allows you to:
  5. * Create your own custom pseudo-classes
  6. * Use the Parser by itself.
  7. * Find nodes in XML documents.
  8. ---
  9. ## The Finder
  10. Find nodes in the DOM
  11. ### `search` context for selector
  12. Search this context for any nodes that match this selector.
  13. Expects:
  14. * selector: String or SelectorObject
  15. * (**optional**) context: document or node or array of documents or nodes
  16. * (**optional**) append: Array or Object with a push method
  17. Returns: append argument or Array of 0 or more nodes
  18. slick.search("#foo > bar.baz") → [<bar>, <bar>, <bar>]
  19. slick.search("li > a", [<ol>, <ul>]) → [<a>, <a>, <a>]
  20. slick.search("#foo > bar.baz", document, []) → [<bar>, <bar>, <bar>]
  21. ### `find` first in context with selector or null
  22. Find the first node in document that matches selector or null if none are found.
  23. Expects:
  24. * selector: String or SelectorObject
  25. * (**optional**) context: document or node or array of documents or nodes
  26. Returns: Element or null
  27. slick.find("#foo > bar.baz") → <bar>
  28. slick.find("#does-not-exist", node) → null
  29. ### node `matches` selector?
  30. Does this node match this selector?
  31. Expects:
  32. * node
  33. * node, String or SelectorObject
  34. Returns: true or false
  35. slick.matches(<div class=rocks>, "div.rocks") → true
  36. slick.matches(<div class=lame>, "div.rocks") → false
  37. slick.matches(<div class=lame>, <div class=rocks>) → false
  38. ### context `contains` node?
  39. Does this context contain this node? Is the context a parent of this node?
  40. Expects:
  41. * context: document or node
  42. * node: node
  43. Returns: true or false
  44. slick.contains(<ul>, <li>) → true
  45. slick.contains(<body>, <html>) → false
  46. ---
  47. ## The Parser
  48. Parse a CSS selector string into a JavaScript object
  49. ### `parse` selector into object
  50. Parse a CSS Selector String into a Selector Object.
  51. Expects: String
  52. Returns: SelectorObject
  53. slick.parse("#foo > bar.baz") → SelectorObject
  54. ### format
  55. ### `#foo > bar.baz`
  56. [[
  57. { "combinator":" ", "tag":"*", "id":"foo" },
  58. { "combinator":">", "tag":"bar", "classList": ["baz"], "classes": [{"value":"baz", "match": RegExp }]}
  59. ]]
  60. ### `h1, h2, ul > li, .things`
  61. [
  62. [{ "combinator":" ", "tag": "h1" }],
  63. [{ "combinator":" ", "tag": "h2" }],
  64. [{ "combinator":" ", "tag": "ul" }, { "combinator": ">", "tag": "li" }],
  65. [{ "combinator":" ", "tag": "*", "classList": ["things"], "classes": [{"value": "things", "match": RegExp }] }]
  66. ]