DOM Methods
The attr method sets, removes, gets and checks if an attribute exists.
action
The action parameter is completely case insensitive
"set", "setAttr", "setAttribute" or "apply" are all valid actions to set an attribute
"del", "delAttr", "deleteAttribute", "remove", "removeAttr" or "removeAttribute" are all valid actions to remove an attribute
"get", "getAttr" or "getAttribute" are all valid actions to get an attribute
value
The value is only used when setting an attribute, multiple attributes can be set within the one method, eg:
x(".elem").attr("set", "id=elem, title=Title");Each attribute and its value must be separated by an "=".
Returns - array or string
In the case that multiple elements are selected, values will be returned as an array. Otherwise if a single element is selected a string will be returned.
The classList method can add, remove, swap or check for a class.
action
The action parameter is completely case insensitive
"+" or "add" are all valid actions to add a class
"delete", "remove" or "-" are all valid actions to remove a class
"swap" or "switch" are all valid actions to swap a class
"has", "hasClass" or "contains" are all valid actions to check if a class exists
value
The value parameter is required
x(".elem").classList("+", "new-class");adds a class
x(".elem").classList("-", "new-class");removes a class
x(".elem").classList("swap", "new-class >> old-class");to swap a class (the replacement class appears before the ">>")
x(".elem").classList("has", "new-class");checks if "new-class" exists on the selected elements class list
returns - any
The css method applies inline css rules.
x(".elem").css("background-color: red; color: #fff;");css
The css is written like normal css as a string value.
append (optional)
By default this parameter is set to false. If true, pre-existing css on the selected element will not be overwritten.
returns - void
The cssValue method gets or checks the value of a css rule applied to the element. The css value must be from an inline css rule applied to the element.
property
The property to get the value of, eg:
x(".elem").cssValue("background-color");returns the background colour
value (optional)
A css value to test for, eg:
x(".elem").cssValue("background-color", "coral")returns a boolean
returns - string or boolean
The write method writes html or text to the selected element.
method
The application method defines the type of value to apply, HTML or Text.
"html" or "innerHTML" are both valid methods to write HTML
"outer" or "outerHTML" are both valid methods to write outer HTML
"text" or "txt" are both valid methods to write text content
x(".elem").write("html", "<span>Hi!</span>");value
The value is a string that corresponds to the method, it can really be anything as long as it's a string.
append (optional)
By default this parameter is false. If true any pre-existing content inside the selected element won't be overwritten by the value passed into the write method.
returns - void
The make method makes an element or multiple. This method can append newly created elements to the selected element. If more than one element is selected a newly made element will be made for each of the selected elements.
x(".elem1, .elem2").make("div");2 divs have been made
node (string)
The type of element to make, "div" will create a
amount (integer) (optional)
How many elements to make, by default it will only create 1 element.
attr (string) (optional)
Attributes to apply to the element, this parameter works exactly the same way as the attr() method documented on this page.
append (boolean) (optional)
By default this is set to false, if true the newly made element will be appended to the selected element.
returns - void or array
The append method will append one or more elements to the selected element.
...nodes
This parameter expects each individual element separated by a comma, eg:
x(".elem").append(elemOne, elemTwo);returns - void
The prepend method inserts an element before another element. For this to work correctly, the container element must be selected inside the query selector.
x(".container").prepend(newElement, beforeElement);node
The node to insert
before
The node to insert before
returns - void
The next method selects the next sibling relative to the selected element.
x(".elem").next(1);amount (integer) (optional)
By default this will be 1
How many elements to skip ahead to
exclude (string) (optional)
Elements to exclude from the sibling list. These elements will be ignored.
returns - void
The prev method selects the previous sibling relative to the selected element.
x(".elem").prev(1);amount (integer) (optional)
By default this will be 1
How many elements to skip back to
exclude (string) (optional)
Elements to exclude from the sibling list. These elements will be ignored.
returns - void
The children method gets the child elements relative to the selected element.
x(".elem").children();allChildren (boolean) (optional)
By default this is false. If it is true it will select all child elements within the main selected node rather than just surface level child elements.
return - array
The parents method gets all parent elements relative to the selected element.
x(".elem").parents();returns - array
The nodeIndex method gets the index of the selected element
returns - array or integer
The contains method checks if the selected element contains a specified element.
value (string)
The selector for the element to check for, eg:
returns - boolean
The childOf method checks if the selected element is a child of the element passed into the childOf method.
value
Query selector value of the parent element, eg:
x(".child-element").childOf(".parent-element");callback (optional)
If the selected element is found to be a child of the element passed into this method this callback will fire.
returns - boolean or void
The parentOf method checks if the selected element is a parent of the element passed into the parentOf method.
value
Query selector value of the child element, eg:
x(".parent-element").parentOf(".child-element");callback (optional)
If the selected element is found to be a parent of the element passed into this method this callback will fire.
returns - boolean or void
The moveContent method moves the contents of one element to another.
moveTo (string or object)
The element to move the content to
method (string)
"all" or "*" moves all of the content of the selected element
To move specific elements their type can be specified with their class, id, tag or attribute, eg:
x(".elem").moveTo(".elem2", ".child, img, video");
Query flags can also be used in this method:
x(".elem").moveTo(".elem2 {all}", ".child {all}, img {2}, video");deleteOnMove (boolean) (optional)
This is false by default, if set to true it will remove all of selected content from the original element.
returns - void
