dojo/NodeList-manipulate.js

• Provides:

  • dojo.NodeList-manipulate

• dojo.NodeList

  • type

    Function

• dojo.NodeList._placeMultiple

  • parameters:
    • query: (typeof String||Node||NodeList)
    • position: (typeof String)
  • returns

    dojo.NodeList

  • summary

    private method for inserting queried nodes into all nodes in this NodeList
    at different positions. Differs from NodeList.place because it will clone
    the nodes in this NodeList if the query matches more than one element.

  • type

    Function

• dojo.NodeList._placeMultiple.length

• dojo.NodeList.innerHTML

  • parameters:
    • value: (typeof String||DOMNode|NodeList)
  • returns

    dojo.NodeList|String

  • summary

    allows setting the innerHTML of each node in the NodeList,
    if there is a value passed in, otherwise, reads the innerHTML value of the first node.

  • description

    This method is simpler than the dojo.NodeList.html() method provided by
    `dojo.NodeList-html`. This method just does proper innerHTML insertion of HTML fragments,
    and it allows for the innerHTML to be read for the first node in the node list.
    Since dojo.NodeList-html already took the "html" name, this method is called
    "innerHTML". However, if dojo.NodeList-html has not been loaded yet, this
    module will define an "html" method that can be used instead. Be careful if you
    are working in an environment where it is possible that dojo.NodeList-html could
    have been loaded, since its definition of "html" will take precedence.
    The nodes represented by the value argument will be cloned if more than one
    node is in this NodeList. The nodes in this NodeList are returned in the "set"
    usage of this method, not the HTML that was inserted.

  • return_summary

    if no value is passed, the result is String, the innerHTML of the first node.
    If a value is passed, the return is this dojo.NodeList

  • example

    assume a DOM created by this markup:
    	<div id="foo"></div>
    	<div id="bar"></div>
    This code inserts <p>Hello World</p> into both divs:
    	dojo.query("div").innerHTML("<p>Hello World</p>");

  • example

    assume a DOM created by this markup:
    	<div id="foo"><p>Hello Mars</p></div>
    	<div id="bar"><p>Hello World</p></div>
    This code returns "<p>Hello Mars</p>":
    	var message = dojo.query("div").innerHTML();

  • type

    Function

• dojo.NodeList.html

  • parameters:
    • value: (typeof String||DOMNode||NodeList)

      optional. The HTML fragment to use as innerHTML. If value is not passed, then the innerHTML
      of the first element in this NodeList is returned.

  • returns

    dojo.NodeList|String

  • summary

    see the information for "innerHTML". "html" is an alias for "innerHTML", but is
    only defined if dojo.NodeList-html has not been loaded.

  • description

    An alias for the "innerHTML" method, but only defined if there is not an existing
    "html" method on dojo.NodeList. Be careful if you are working in an environment
    where it is possible that dojo.NodeList-html could have been loaded, since its
    definition of "html" will take precedence. If you are not sure if dojo.NodeList-html
    could be loaded, use the "innerHTML" method.

  • return_summary

    if no value is passed, the result is String, the innerHTML of the first node.
    If a value is passed, the return is this dojo.NodeList

  • alias - dojo.NodeList.prototype.innerHTML
  • type

    Function

• dojo.NodeList.text

  • parameters:
    • value: (typeof String)
  • returns

    dojo.NodeList|String

  • summary

    allows setting the text value of each node in the NodeList,
    if there is a value passed in, otherwise, returns the text value for all the
    nodes in the NodeList in one string.

  • example

    assume a DOM created by this markup:
    	<div id="foo"></div>
    	<div id="bar"></div>
    This code inserts "Hello World" into both divs:
    	dojo.query("div").text("Hello World");

  • example

    assume a DOM created by this markup:
    	<div id="foo"><p>Hello Mars <span>today</span></p></div>
    	<div id="bar"><p>Hello World</p></div>
    This code returns "Hello Mars today":
    	var message = dojo.query("div").text();

  • return_summary

    if no value is passed, the result is String, the text value of the first node.
    If a value is passed, the return is this dojo.NodeList

  • type

    Function

• dojo.NodeList.val

  • parameters:
    • value: (typeof String||Array)
  • returns

    dojo.NodeList|String||Array

  • summary

    If a value is passed, allows seting the value property of form elements in this
    NodeList, or properly selecting/checking the right value for radio/checkbox/select
    elements. If no value is passed, the value of the first node in this NodeList
    is returned.

  • return_summary

    if no value is passed, the result is String or an Array, for the value of the
    first node.
    If a value is passed, the return is this dojo.NodeList

  • example

    assume a DOM created by this markup:
    	<input type="text" value="foo">
    	<select multiple>
    		<option value="red" selected>Red</option>
    		<option value="blue">Blue</option>
    		<option value="yellow" selected>Yellow</option>
    	</select>
    This code gets and sets the values for the form fields above:
    	dojo.query('[type="text"]').val(); //gets value foo
    	dojo.query('[type="text"]').val("bar"); //sets the input's value to "bar"
    	dojo.query("select").val() //gets array value ["red", "yellow"]
    	dojo.query("select").val(["blue", "yellow"]) //Sets the blue and yellow options to selected.

  • type

    Function

• dojo.NodeList.val.0

• dojo.NodeList.val.0.type

• dojo.NodeList.val.0.options

• dojo.NodeList.val.0.checked

  • type

    bool

• dojo.NodeList.val.0.value

• dojo.NodeList.append

  • parameters:
    • content: (typeof String||DOMNode||NodeList)
  • returns

    dojo.NodeList

  • summary

    appends the content to every node in the NodeList.

  • description

    The content will be cloned if the length of NodeList
    is greater than 1. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the appended content.

  • example

    assume a DOM created by this markup:
    	<div id="foo"><p>Hello Mars</p></div>
    	<div id="bar"><p>Hello World</p></div>
    Running this code:
    	dojo.query("div").append("<span>append</span>");
    Results in this DOM structure:
    	<div id="foo"><p>Hello Mars</p><span>append</span></div>
    	<div id="bar"><p>Hello World</p><span>append</span></div>

  • type

    Function

• dojo.NodeList.appendTo

  • parameters:
    • query: (typeof String)
  • returns

    dojo.NodeList

  • summary

    appends nodes in this NodeList to the nodes matched by
    the query passed to appendTo.

  • description

    The nodes in this NodeList will be cloned if the query
    matches more than one element. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the matched nodes from the query.

  • example

    assume a DOM created by this markup:
    	<span>append</span>
    	<p>Hello Mars</p>
    	<p>Hello World</p>
    Running this code:
    	dojo.query("span").appendTo("p");
    Results in this DOM structure:
    	<p>Hello Mars<span>append</span></p>
    	<p>Hello World<span>append</span></p>

  • type

    Function

• dojo.NodeList.prepend

  • parameters:
    • content: (typeof String||DOMNode||NodeList)
  • returns

    dojo.NodeList

  • summary

    prepends the content to every node in the NodeList.

  • description

    The content will be cloned if the length of NodeList
    is greater than 1. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the appended content.
    assume a DOM created by this markup:
    	<div id="foo"><p>Hello Mars</p></div>
    	<div id="bar"><p>Hello World</p></div>
    Running this code:
    	dojo.query("div").prepend("<span>prepend</span>");
    Results in this DOM structure:
    	<div id="foo"><span>prepend</span><p>Hello Mars</p></div>
    	<div id="bar"><span>prepend</span><p>Hello World</p></div>

  • type

    Function

• dojo.NodeList.prependTo

  • parameters:
    • query: (typeof String)
  • returns

    dojo.NodeList

  • summary

    prepends nodes in this NodeList to the nodes matched by
    the query passed to prependTo.

  • description

    The nodes in this NodeList will be cloned if the query
    matches more than one element. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the matched nodes from the query.

  • example

    assume a DOM created by this markup:
    	<span>prepend</span>
    	<p>Hello Mars</p>
    	<p>Hello World</p>
    Running this code:
    	dojo.query("span").prependTo("p");
    Results in this DOM structure:
    	<p><span>prepend</span>Hello Mars</p>
    	<p><span>prepend</span>Hello World</p>

  • type

    Function

• dojo.NodeList.after

  • parameters:
    • content: (typeof String||Element||NodeList)
  • returns

    dojo.NodeList

  • summary

    Places the content after every node in the NodeList.

  • description

    The content will be cloned if the length of NodeList
    is greater than 1. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the appended content.

  • example

    assume a DOM created by this markup:
    	<div id="foo"><p>Hello Mars</p></div>
    	<div id="bar"><p>Hello World</p></div>
    Running this code:
    	dojo.query("div").after("<span>after</span>");
    Results in this DOM structure:
    	<div id="foo"><p>Hello Mars</p></div><span>after</span>
    	<div id="bar"><p>Hello World</p></div><span>after</span>

  • type

    Function

• dojo.NodeList.insertAfter

  • parameters:
    • query: (typeof String)
  • returns

    dojo.NodeList

  • summary

    The nodes in this NodeList will be placed after the nodes
    matched by the query passed to insertAfter.

  • description

    The nodes in this NodeList will be cloned if the query
    matches more than one element. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the matched nodes from the query.

  • example

    assume a DOM created by this markup:
    	<span>after</span>
    	<p>Hello Mars</p>
    	<p>Hello World</p>
    Running this code:
    	dojo.query("span").insertAfter("p");
    Results in this DOM structure:
    	<p>Hello Mars</p><span>after</span>
    	<p>Hello World</p><span>after</span>

  • type

    Function

• dojo.NodeList.before

  • parameters:
    • content: (typeof String||DOMNode||NodeList)
  • returns

    dojo.NodeList

  • summary

    Places the content before every node in the NodeList.

  • description

    The content will be cloned if the length of NodeList
    is greater than 1. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the appended content.

  • example

    assume a DOM created by this markup:
    	<div id="foo"><p>Hello Mars</p></div>
    	<div id="bar"><p>Hello World</p></div>
    Running this code:
    	dojo.query("div").before("<span>before</span>");
    Results in this DOM structure:
    	<span>before</span><div id="foo"><p>Hello Mars</p></div>
    	<span>before</span><div id="bar"><p>Hello World</p></div>

  • type

    Function

• dojo.NodeList.insertBefore

  • parameters:
    • query: (typeof String)
  • returns

    dojo.NodeList

  • summary

    The nodes in this NodeList will be placed after the nodes
    matched by the query passed to insertAfter.

  • description

    The nodes in this NodeList will be cloned if the query
    matches more than one element. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    dojo.NodeList, the nodes currently in this NodeList will be returned,
    not the matched nodes from the query.

  • example

    assume a DOM created by this markup:
    	<span>before</span>
    	<p>Hello Mars</p>
    	<p>Hello World</p>
    Running this code:
    	dojo.query("span").insertBefore("p");
    Results in this DOM structure:
    	<span>before</span><p>Hello Mars</p>
    	<span>before</span><p>Hello World</p>

  • type

    Function

• dojo.NodeList.remove

  • parameters:
    • simpleFilter: (typeof String)

      single-expression CSS rule. For example, ".thinger" or
      "#someId[attrName='value']" but not "div > span". In short,
      anything which does not invoke a descent to evaluate but
      can instead be used to test a single node is acceptable.

  • returns

    dojo.NodeList

  • summary

    alias for dojo.NodeList's orphan method. Removes elements
    in this list that match the simple filter from their parents
    and returns them as a new NodeList.

  • return_summary

    dojo.NodeList

  • type

    Function

• dojo.NodeList.prototype.remove

  • alias - dojo.NodeList.prototype.orphan

• dojo.NodeList.wrap

  • parameters:
    • html: (typeof String||DOMNode)
  • returns

    dojo.NodeList

  • summary

    Wrap each node in the NodeList with html passed to wrap.

  • description

    html will be cloned if the NodeList has more than one
    element. Only DOM nodes are cloned, not any attached
    event handlers.

  • return_summary

    dojo.NodeList, the nodes in the current NodeList will be returned,
    not the nodes from html argument.

  • example

    assume a DOM created by this markup:
    	<b>one</b>
    	<b>two</b>
    Running this code:
    	dojo.query("b").wrap("<div><span></span></div>");
    Results in this DOM structure:
    	<div><span><b>one</b></span></div>
    	<div><span><b>two</b></span></div>

  • type

    Function

• dojo.NodeList.wrapAll

  • parameters:
    • html: (typeof String||DOMNode)
  • returns

    dojo.NodeList

  • summary

    Insert html where the first node in this NodeList lives, then place all
    nodes in this NodeList as the child of the html.

  • return_summary

    dojo.NodeList, the nodes in the current NodeList will be returned,
    not the nodes from html argument.

  • example

    assume a DOM created by this markup:
    	<div class="container">
    		<div class="red">Red One</div>
    		<div class="blue">Blue One</div>
    		<div class="red">Red Two</div>
    		<div class="blue">Blue Two</div>
    	</div>
    Running this code:
    	dojo.query(".red").wrapAll('<div class="allRed"></div>');
    Results in this DOM structure:
    	<div class="container">
    		<div class="allRed">
    			<div class="red">Red One</div>
    			<div class="red">Red Two</div>
    		</div>
    		<div class="blue">Blue One</div>
    		<div class="blue">Blue Two</div>
    	</div>

  • type

    Function

• dojo.NodeList.wrapInner

  • parameters:
    • html: (typeof String||DOMNode)
  • returns

    dojo.NodeList

  • summary

    For each node in the NodeList, wrap all its children with the passed in html.

  • description

    html will be cloned if the NodeList has more than one
    element. Only DOM nodes are cloned, not any attached
    event handlers.

  • return_summary

    dojo.NodeList, the nodes in the current NodeList will be returned,
    not the nodes from html argument.

  • example

    assume a DOM created by this markup:
    	<div class="container">
    		<div class="red">Red One</div>
    		<div class="blue">Blue One</div>
    		<div class="red">Red Two</div>
    		<div class="blue">Blue Two</div>
    	</div>
    Running this code:
    	dojo.query(".red").wrapInner('<span class="special"></span>');
    Results in this DOM structure:
    	<div class="container">
    		<div class="red"><span class="special">Red One</span></div>
    		<div class="blue">Blue One</div>
    		<div class="red"><span class="special">Red Two</span></div>
    		<div class="blue">Blue Two</div>
    	</div>

  • type

    Function

• dojo.NodeList.replaceWith

  • parameters:
    • content: (typeof String||DOMNode||NodeList)
  • returns

    dojo.NodeList

  • summary

    Replaces each node in ths NodeList with the content passed to replaceWith.

  • description

    The content will be cloned if the length of NodeList
    is greater than 1. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    The nodes currently in this NodeList will be returned, not the replacing content.
    Note that the returned nodes have been removed from the DOM.

  • example

    assume a DOM created by this markup:
    	<div class="container">
    		<div class="red">Red One</div>
    		<div class="blue">Blue One</div>
    		<div class="red">Red Two</div>
    		<div class="blue">Blue Two</div>
    	</div>
    Running this code:
    	dojo.query(".red").replaceWith('<div class="green">Green</div>');
    Results in this DOM structure:
    	<div class="container">
    		<div class="green">Green</div>
    		<div class="blue">Blue One</div>
    		<div class="green">Green</div>
    		<div class="blue">Blue Two</div>
    	</div>

  • type

    Function

• dojo.NodeList.replaceAll

  • parameters:
    • query: (typeof String)
  • returns

    dojo.NodeList

  • summary

    replaces nodes matched by the query passed to replaceAll with the nodes
    in this NodeList.

  • description

    The nodes in this NodeList will be cloned if the query
    matches more than one element. Only the DOM nodes are cloned, not
    any attached event handlers.

  • return_summary

    The nodes currently in this NodeList will be returned, not the matched nodes
    from the query. The nodes currently in this NodeLIst could have
    been cloned, so the returned NodeList will include the cloned nodes.

  • example

    assume a DOM created by this markup:
    	<div class="container">
    		<div class="spacer">___</div>
    		<div class="red">Red One</div>
    		<div class="spacer">___</div>
    		<div class="blue">Blue One</div>
    		<div class="spacer">___</div>
    		<div class="red">Red Two</div>
    		<div class="spacer">___</div>
    		<div class="blue">Blue Two</div>
    	</div>
    Running this code:
    	dojo.query(".red").replaceAll(".blue");
    Results in this DOM structure:
    	<div class="container">
    		<div class="spacer">___</div>
    		<div class="spacer">___</div>
    		<div class="red">Red One</div>
    		<div class="red">Red Two</div>
    		<div class="spacer">___</div>
    		<div class="spacer">___</div>
    		<div class="red">Red One</div>
    		<div class="red">Red Two</div>
    	</div>

  • type

    Function

• dojo.NodeList.clone

  • returns

    dojo.NodeList

  • summary

    Clones all the nodes in this NodeList and returns them as a new NodeList.

  • description

    Only the DOM nodes are cloned, not any attached event handlers.

  • return_summary

    dojo.NodeList, a cloned set of the original nodes.

  • example

    assume a DOM created by this markup:
    	<div class="container">
    		<div class="red">Red One</div>
    		<div class="blue">Blue One</div>
    		<div class="red">Red Two</div>
    		<div class="blue">Blue Two</div>
    	</div>
    Running this code:
    	dojo.query(".red").clone().appendTo(".container");
    Results in this DOM structure:
    	<div class="container">
    		<div class="red">Red One</div>
    		<div class="blue">Blue One</div>
    		<div class="red">Red Two</div>
    		<div class="blue">Blue Two</div>
    		<div class="red">Red One</div>
    		<div class="red">Red Two</div>
    	</div>

  • type

    Function

• dojo.NodeList-manipulate

  • summary

    Adds a chainable methods to dojo.query() / Nodelist instances for manipulating HTML
    and DOM nodes and their properties.

  • type

    Object

• dojo

  • type

    Object