npm install domf#### on_
Add eventlistener.
[HTML]
``HTML`
[LiveScript]
`livescript`
query "input[name='foo-input-button']" document
|> on_ \click, -> @value = "button pushed"
[LiveScript] (With no lambda using glad-functions. Equivalent to the below. )livescript`
query "input[name='foo-input-button']" document
|> (withl lazy set, \value, "button pushed", _ ) >> (apply on_ \click)
#### parent
Get parent node (up to 1 hierarchy).
[HTML]
`HTML`
...
...
...
[LiveScript]
`livescript`
query \#foo-third-layer document
|> parent #=> elem(#foo-second-layer)
#### parents
Get parent nodes (up to the "document" as root, over "html" element.)
[HTML]
`HTML`
...
...
...
[LiveScript]
`livescript`
query \#foo-third-layer document
|> parents #=> [elem(#foo-second-layer), elem(#foo-top-layer), ... document]
#### children
Get child nodes.
[HTML]
`HTML`
foo-second-content
foo-second-next-content
[LiveScript]
`livescript`
query \#foo-top document
|> children #=> [elem(#foo-second), elem(#foo-second-next), ...]
#### classes
Get classes of the element.
[HTML]
`HTML`
foo-second-content
foo-second-next-content
[LiveScript]
`livescript`
query \#foo-second-next document
|> classes #=> [class(foo-class-second),class(foo-class-sub)]
#### has_class
Detect if element has the class,or not.
[HTML]
`HTML`
...
[LiveScript]
`livescript
query \#foo-top document
|> has_class \foo-class #=> true
query \#foo-top document
|> has_class \foo-class-not #=> false
`
#### add_class
Add class value to the element.
[HTML]
`HTML`
...
[LiveScript]
`livescript`
query \#foo-top document
|> add_class \bar-class
#### remove_class
Remove class value from the element.
[HTML]
`HTML`
...
[LiveScript]
`livescript`
query \#foo-top document
|> remove_class \foo-class
#### query
Get the first element on which matches the selector.
[HTML]
`HTML`
...
[LiveScript]
`livescript`
query \#foo-top document #=> elem(#foo-top)
#### query_all
Get all of elements on which matches the selector.
[HTML]
`HTML`
foo-second-content
foo-second-next-content
[LiveScript]
`livescript`
query_all \.foo-class-second document
#=> [elem(#foo-second), elem(#foo-second-next)]
#### create
Create the HTML element.
[LiveScript]
`livescript`
element = create \div document
[HTML]
`HTML`
foo-second-content
[LiveScript]
`livescript
create \div
|> append_to (query \#foo-top document)
#
#### attr
Get the attribute value.[HTML]
HTML
...
`[LiveScript]
livescript
query \#foo-top document
|> attr \class #=> foo-class
`
#### set_attr
Set value to the attribute.[HTML]
HTML
...
`[LiveScript]
livescript
query \#foo-top document
|> set_attr \rel \rel-var#
...
#
`
#### style
Get style value.[HTML]
HTML
...
`[LiveScript]
livescript
query \h1 document
|> style #=> color:#000;
`
#### set_style
Set style value.[HTML]
HTML
...
`[LiveScript]
livescript
query \h1 document
|> set_style \text-decoration \underline
#=>
#
#...
#
`
#### append_to
Add the element into the other element.[HTML]
HTML
foo-second-content
`[LiveScript]
livescript
create \div
|> append_to (query \#foo-top document)#
foo-second-content
#`
#### append
Add the other element in the element itself.[HTML]
HTML
foo-second-content
`[LiveScript]
livescript
query \#foo-class document
|> append (create \p document)#
foo-second-content
#
`
#### select
Give all text in the text box selected.[HTML]
HTML
`[LiveScript]
livescript
query "input[name='foo-input-text']" document
|> select#The text "foo" that is in the text box "foo-input-text", goes to be selected
`
#### focus
Give focus to the element.[HTML]
HTML
`[LiveScript]
livescript
query "input[name='foo-input-text']" document
|> focus
`
#### blur
Remove focus from the element.[HTML]
HTML
`[LiveScript]
livescript
query "input[name='foo-input-text']" document
|> blur
`
#### text
Get the text content of the element.[HTML]
HTML
foo-second-content
foo-second-next-content
`[LiveScript]
livescript
query \#foo-second document
|> text #=> foo-second-content`
#### set_text
Set the text content into the element.[HTML]
HTML
foo-second-content
`[LiveScript]
livescript
query \#foo-second document
|> set_text "This text is added by bar"#
This text is added by bar
#`
#### html
Get the HTML content of the element( not includes the element itself.)[HTML]
HTML
foo-second-content
`[LiveScript]
livescript
query \#foo-top document
|> html #=>
# foo-second-content
# `
#### set_html
Set the HTML content into the element.[HTML]
HTML
foo-second-content
`[LiveScript]
livescript
query \#foo-top document
|> set_html "this is a paragraph
"#
this is a paragraph
#
`
#### outer_html
Get the HTML content of the element( includes the element itself.)[HTML]
HTML
foo-second-content
`[LiveScript]
livescript
query \#foo-top document
|> outer_html #=>
#
# foo-second-content
#
#
`
#### set_outer_html
Replace the HTML content of the element( includes the element itself.)[HTML]
HTML
foo-second-content
`[LiveScript]
livescript
query \#foo-top document
|> set_outer_html "this is the content of the element"#
this is the content of the element
``