View Source Accessors Cheatsheet
Accessors let you access certains parts of the element you have selected previously. As the given htmlable can contain multiple nodes, these functions return lists.
All function that can be filtered using a selector, they are done by using a selector
as second argument. In that case, there is a version of the same function ended with
_in
where the first and second arguments are switched. These are just convenience
function in case you want to pipe when building a complex selector.
Selecting nodes
All matching nodes
find(view, "p")
find_in("p", view)
# Returns all paragraphs.
First matching node
find_first(view, "div.contents")
find_first_in("div.contents", view)
# Returns the first div with contents class
Count the matching nodes
Just a convinience function.
find_count(view, "p")
find_count_in("p", view)
# Counts the number of paragraphs
find_count(view, "nav ul li")
find_count_in("nav ul li", view)
# Counts the number of elements in the navigation list
Selecting attributes
Classes
Classes are quite common in HTML. Specially useful when checking for classes like
hidden
in Tailwind, that checks if an element should be hidden or not. Class
attributes will be split in words before being returned.
One element
Look out for the nested list!
classes(~s[<div class="one two three">Content</div>])
# [["one", "two", "three"]]
Several elements
classes(~s[<div class="one two three">Content</div><div class="four five">Other</div>])
# [["one", "two", "three"], ["four", "five"]]
Using selectors
classes/2
let's you pass a selector as second argument. This is convenient so you don't
to pipe find
just for this.
classes(~s[<div class="one two three">Content</div><div class="first">Other</div>], ".one")
classes_in(".one", ~s[<div class="one two three">Content</div><div class="first">Other</div>])
# [["one", "two", "three"]]
classes(~s[<div class="one two three">Content</div><div class="four five">Other</div>], "div")
classes_in("div", ~s[<div class="one two three">Content</div><div class="four five">Other</div>])
# [["one", "two", "three"], ["four", "five"]]
Other attributes
Other attributes can easily be accessed too. Unlike classes, these values are returned as strings, unparsed in any way.
One element
attribute(~s[<li data-index="0">1</li>], "data-index")
# ["0"]
Several elements
attribute(~s[<li data-index="0">1</li><li data-index="1">2</li>], "data-index")
# ["0", "1"]
Using selectors
attribute/3
let's you pass a selector as second argument. This is convenient so you don't
to pipe find
just for this.
attribute(~s[<div class="one" data-index="0">Content</div><div class="first" data-index="1">Other</div>], ".one", "data-index")
attribute_in(".one", ~s[<div class="one" data-index="0">Content</div><div class="first" data-index="1">Other</div>], "data-index")
# ["0"]
attribute_in("div", ~s[<div class="one two three">Content</div><div class="four five">Other</div>], "class")
# ["one two three", "four five"]
Text
Several elements, combined
Text would return just one string for all elements by default.
text(~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>), ".odd")
text_in(".odd", ~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>))
# "First Third"
text(~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>), ".even")
text_in(".even", ~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>))
# "Second"
text(~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>), ".none")
text_in(".none", ~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>))
# ""
text(~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>), "li")
text_in("li", ~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>))
# "First Second Third"
Several elements, list
Combine Enum.map/2
with Nobs.Accessors.text/3
to create a list.
find(~s(<ul><li class="odd"> First </li> <li class="even"> Second </li> <li class="odd"> Third </li></ul>), "li") |> Enum.map(&text/1)
# ~w(First Second Third)