Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
luci/documentation/jsapi/LuCI.dom.html
Jo-Philipp Wich 3942789dc6 documentation: add JS api docs 
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit d9452d1157aef6b8752fac0f4ed1e0b9221abb31)
2019-11-05 09:37:52 +01:00

3135 lines
No EOL
44 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: dom</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: dom</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>
<span class="ancestors"><a href="LuCI.html">LuCI</a>.</span>dom</h2>
<div class="class-description"><p>The <code>dom</code> class provides convenience method for creating and
manipulating DOM elements.</p></div>
</header>
<article>
<div class="container-overview">
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2065">line 2065</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="append"><span class="type-signature"></span>append<span class="signature">(node, children<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node|null}</span></h4>
<div class="description">
<p>Appends the given children data to the given node.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The <code>Node</code> argument to append the children to.</p></td>
</tr>
<tr>
<td class="name"><code>children</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The childrens to append to the given node.</p>
<p>When <code>children</code> is an array, then each item of the array
will be either appended as child element or text node,
depending on whether the item is a DOM <code>Node</code> instance or
some other non-<code>null</code> value. Non-<code>Node</code>, non-<code>null</code> values
will be converted to strings first before being passed as
argument to <code>createTextNode()</code>.</p>
<p>When <code>children</code> is a function, it will be invoked with
the passed <code>node</code> argument as sole parameter and the <code>append</code>
function will be invoked again, with the given <code>node</code> argument
as first and the return value of the <code>children</code> function as
second parameter.</p>
<p>When <code>children</code> is is a DOM <code>Node</code> instance, it will be
appended to the given <code>node</code>.</p>
<p>When <code>children</code> is any other non-<code>null</code> value, it will be
converted to a string and appened to the <code>innerHTML</code> property
of the given <code>node</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2216">line 2216</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the last children <code>Node</code> appended to the node or <code>null</code>
if either the <code>node</code> argument was no valid DOM <code>node</code> or if the
<code>children</code> was <code>null</code> or didn't result in further DOM nodes.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Node</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="attr"><span class="type-signature"></span>attr<span class="signature">(node, key, val<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Sets attributes or registers event listeners on element nodes.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The <code>Node</code> argument to set the attributes or add the event
listeners for. When the given <code>node</code> value is not a valid
DOM <code>Node</code>, the function returns and does nothing.</p></td>
</tr>
<tr>
<td class="name"><code>key</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">Object.&lt;string, *></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Specifies either the attribute or event handler name to use,
or an object containing multiple key, value pairs which are
each added to the node as either attribute or event handler,
depending on the respective value.</p></td>
</tr>
<tr>
<td class="name"><code>val</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Specifies the attribute value or event handler function to add.
If the <code>key</code> parameter is an <code>Object</code>, this parameter will be
ignored.</p>
<p>When <code>val</code> is of type function, it will be registered as event
handler on the given <code>node</code> with the <code>key</code> parameter being the
event name.</p>
<p>When <code>val</code> is of type object, it will be serialized as JSON and
added as attribute to the given <code>node</code>, using the given <code>key</code>
as attribute name.</p>
<p>When <code>val</code> is of any other type, it will be added as attribute
to the given <code>node</code> as-is, with the underlying <code>setAttribute()</code>
call implicitely turning it into a string.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2331">line 2331</a>
</li></ul></dd>
</dl>
<h4 class="name" id="bindClassInstance"><span class="type-signature"></span>bindClassInstance<span class="signature">(node, inst)</span><span class="type-signature"> &rarr; {Class}</span></h4>
<div class="description">
<p>Binds the given class instance ot the specified DOM <code>Node</code>.</p>
<p>This function uses the <code>dom.data()</code> facility to attach the
passed instance of a Class to a node. This is needed for
complex widget elements or similar where the corresponding
class instance responsible for the element must be retrieved
from DOM nodes obtained by <code>querySelector()</code> or similar means.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">Node</span>
</td>
<td class="description last"><p>The DOM <code>Node</code> instance to bind the class to.</p></td>
</tr>
<tr>
<td class="name"><code>inst</code></td>
<td class="type">
<span class="param-type">Class</span>
</td>
<td class="description last"><p>The Class instance to bind to the node.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2565">line 2565</a>
</li></ul></dd>
</dl>
<h5>Throws:</h5>
<dl>
<dt>
<div class="param-desc">
<p>Throws a <code>TypeError</code> when the given instance argument isn't
a valid Class instance.</p>
</div>
</dt>
<dd></dd>
<dt>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">TypeError</span>
</dd>
</dl>
</dt>
<dd></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the bound class instance.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Class</span>
</dd>
</dl>
<h4 class="name" id="callClassMethod"><span class="type-signature"></span>callClassMethod<span class="signature">(node, method, &hellip;params)</span><span class="type-signature"> &rarr; {*|null}</span></h4>
<div class="description">
<p>Finds a bound class instance on the given node itself or the
first bound instance on its closest parent node and invokes
the specified method name on the found class instance.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">Node</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The DOM <code>Node</code> instance to start from.</p></td>
</tr>
<tr>
<td class="name"><code>method</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The name of the method to invoke on the found class instance.</p></td>
</tr>
<tr>
<td class="name"><code>params</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
&lt;repeatable><br>
</td>
<td class="description last"><p>Additional arguments to pass to the invoked method as-is.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2619">line 2619</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the return value of the invoked method if a class
instance and method has been found. Returns <code>null</code> if either
no bound class instance could be found, or if the found
instance didn't have the requested <code>method</code>.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">*</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="content"><span class="type-signature"></span>content<span class="signature">(node, children<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node|null}</span></h4>
<div class="description">
<p>Replaces the content of the given node with the given children.</p>
<p>This function first removes any children of the given DOM
<code>Node</code> and then adds the given given children following the
rules outlined below.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The <code>Node</code> argument to replace the children of.</p></td>
</tr>
<tr>
<td class="name"><code>children</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The childrens to replace into the given node.</p>
<p>When <code>children</code> is an array, then each item of the array
will be either appended as child element or text node,
depending on whether the item is a DOM <code>Node</code> instance or
some other non-<code>null</code> value. Non-<code>Node</code>, non-<code>null</code> values
will be converted to strings first before being passed as
argument to <code>createTextNode()</code>.</p>
<p>When <code>children</code> is a function, it will be invoked with
the passed <code>node</code> argument as sole parameter and the <code>append</code>
function will be invoked again, with the given <code>node</code> argument
as first and the return value of the <code>children</code> function as
second parameter.</p>
<p>When <code>children</code> is is a DOM <code>Node</code> instance, it will be
appended to the given <code>node</code>.</p>
<p>When <code>children</code> is any other non-<code>null</code> value, it will be
converted to a string and appened to the <code>innerHTML</code> property
of the given <code>node</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2283">line 2283</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the last children <code>Node</code> appended to the node or <code>null</code>
if either the <code>node</code> argument was no valid DOM <code>node</code> or if the
<code>children</code> was <code>null</code> or didn't result in further DOM nodes.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Node</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="create"><span class="type-signature"></span>create<span class="signature">(html, attr<span class="signature-attributes">opt</span>, data<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node}</span></h4>
<div class="description">
<p>Creates a new DOM <code>Node</code> from the given <code>html</code>, <code>attr</code> and
<code>data</code> parameters.</p>
<p>This function has multiple signatures, it can be either invoked
in the form <code>create(html[, attr[, data]])</code> or in the form
<code>create(html[, data])</code>. The used variant is determined from the
type of the second argument.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>html</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Describes the node to create.</p>
<p>When the value of <code>html</code> is of type array, a <code>DocumentFragment</code>
node is created and each item of the array is first converted
to a DOM <code>Node</code> by passing it through <code>create()</code> and then added
as child to the fragment.</p>
<p>When the value of <code>html</code> is a DOM <code>Node</code> instance, no new
element will be created but the node will be used as-is.</p>
<p>When the value of <code>html</code> is a string starting with <code>&lt;</code>, it will
be passed to <code>dom.parse()</code> and the resulting value is used.</p>
<p>When the value of <code>html</code> is any other string, it will be passed
to <code>document.createElement()</code> for creating a new DOM <code>Node</code> of
the given name.</p></td>
</tr>
<tr>
<td class="name"><code>attr</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, *></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Specifies an Object of key, value pairs to set as attributes
or event handlers on the created node. Refer to
<a href="LuCI.dom.html#attr"><code>dom.attr()</code></a> for details.</p></td>
</tr>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Specifies children to append to the newly created element.
Refer to <a href="LuCI.dom.html#append"><code>dom.append()</code></a> for details.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2409">line 2409</a>
</li></ul></dd>
</dl>
<h5>Throws:</h5>
<dl>
<dt>
<div class="param-desc">
<p>Throws an <code>InvalidCharacterError</code> when the given <code>html</code>
argument contained malformed markup (such as not escaped
<code>&amp;</code> characters in XHTML mode) or when the given node name
in <code>html</code> contains characters which are not legal in DOM
element names, such as spaces.</p>
</div>
</dt>
<dd></dd>
<dt>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">InvalidCharacterError</span>
</dd>
</dl>
</dt>
<dd></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the newly created <code>Node</code>.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Node</span>
</dd>
</dl>
<h4 class="name" id="data"><span class="type-signature"></span>data<span class="signature">(node, key<span class="signature-attributes">opt</span>, val<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {*}</span></h4>
<div class="description">
<p>Attaches or detaches arbitrary data to and from a DOM <code>Node</code>.</p>
<p>This function is useful to attach non-string values or runtime
data that is not serializable to DOM nodes. To decouple data
from the DOM, values are not added directly to nodes, but
inserted into a registry instead which is then referenced by a
string key stored as <code>data-idref</code> attribute in the node.</p>
<p>This function has multiple signatures and is sensitive to the
number of arguments passed to it.</p>
<ul>
<li><code>dom.data(node)</code> -
Fetches all data associated with the given node.</li>
<li><code>dom.data(node, key)</code> -
Fetches a specific key associated with the given node.</li>
<li><code>dom.data(node, key, val)</code> -
Sets a specific key to the given value associated with the
given node.</li>
<li><code>dom.data(node, null)</code> -
Clears any data associated with the node.</li>
<li><code>dom.data(node, key, null)</code> -
Clears the given key associated with the node.</li>
</ul>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">Node</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The DOM <code>Node</code> instance to set or retrieve the data for.</p></td>
</tr>
<tr>
<td class="name"><code>key</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">null</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>This is either a string specifying the key to retrieve, or
<code>null</code> to unset the entire node data.</p></td>
</tr>
<tr>
<td class="name"><code>val</code></td>
<td class="type">
<span class="param-type">*</span>
|
<span class="param-type">null</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>This is either a non-<code>null</code> value to set for a given key or
<code>null</code> to remove the given <code>key</code> from the specified node.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2485">line 2485</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the get or set value, or <code>null</code> when no value could
be found.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">*</span>
</dd>
</dl>
<h4 class="name" id="elem"><span class="type-signature"></span>elem<span class="signature">(e)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
<div class="description">
<p>Tests whether the given argument is a valid DOM <code>Node</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>e</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"><p>The value to test.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2079">line 2079</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns <code>true</code> if the value is a DOM <code>Node</code>, else <code>false</code>.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="findClassInstance"><span class="type-signature"></span>findClassInstance<span class="signature">(node)</span><span class="type-signature"> &rarr; {Class|null}</span></h4>
<div class="description">
<p>Finds a bound class instance on the given node itself or the
first bound instance on its closest parent node.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">Node</span>
</td>
<td class="description last"><p>The DOM <code>Node</code> instance to start from.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2585">line 2585</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the founds class instance if any or <code>null</code> if no bound
class could be found on the node itself or any of its parents.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Class</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="isEmpty"><span class="type-signature"></span>isEmpty<span class="signature">(node, ignoreFn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
<div class="description">
<p>Tests whether a given DOM <code>Node</code> instance is empty or appears
empty.</p>
<p>Any element child nodes which have the CSS class <code>hidden</code> set
or for which the optionally passed <code>ignoreFn</code> callback function
returns <code>false</code> are ignored.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">Node</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The DOM <code>Node</code> instance to test.</p></td>
</tr>
<tr>
<td class="name"><code>ignoreFn</code></td>
<td class="type">
<span class="param-type"><a href="LuCI.dom.html#~ignoreCallbackFn">LuCI.dom~ignoreCallbackFn</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Specifies an optional function which is invoked for each child
node to decide whether the child node should be ignored or not.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2665">line 2665</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns <code>true</code> if the node does not have any children or if
any children node either has a <code>hidden</code> CSS class or a <code>false</code>
result when testing it using the given <code>ignoreFn</code>.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="matches"><span class="type-signature"></span>matches<span class="signature">(node, selector<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
<div class="description">
<p>Tests whether a given <code>Node</code> matches the given query selector.</p>
<p>This function is a convenience wrapper around the standard
<code>Node.matches(&quot;selector&quot;)</code> function with the added benefit that
the <code>node</code> argument may be a non-<code>Node</code> value, in which case
this function simply returns <code>false</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The <code>Node</code> argument to test the selector against.</p></td>
</tr>
<tr>
<td class="name"><code>selector</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The query selector expression to test against the given node.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2140">line 2140</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns <code>true</code> if the given node matches the specified selector
or <code>false</code> when the node argument is no valid DOM <code>Node</code> or the
selector didn't match.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="parent"><span class="type-signature"></span>parent<span class="signature">(node, selector<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node|null}</span></h4>
<div class="description">
<p>Returns the closest parent node that matches the given query
selector expression.</p>
<p>This function is a convenience wrapper around the standard
<code>Node.closest(&quot;selector&quot;)</code> function with the added benefit that
the <code>node</code> argument may be a non-<code>Node</code> value, in which case
this function simply returns <code>null</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The <code>Node</code> argument to find the closest parent for.</p></td>
</tr>
<tr>
<td class="name"><code>selector</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The query selector expression to test against each parent.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2167">line 2167</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the closest parent node matching the selector or
<code>null</code> when the node argument is no valid DOM <code>Node</code> or the
selector didn't match any parent.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Node</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="parse"><span class="type-signature"></span>parse<span class="signature">(s)</span><span class="type-signature"> &rarr; {Node}</span></h4>
<div class="description">
<p>Parses a given string as HTML and returns the first child node.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>s</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>A string containing an HTML fragment to parse. Note that only
the first result of the resulting structure is returned, so an
input value of <code>&lt;div&gt;foo&lt;/div&gt; &lt;div&gt;bar&lt;/div&gt;</code> will only return
the first <code>div</code> element node.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2098">line 2098</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns the first DOM <code>Node</code> extracted from the HTML fragment or
<code>null</code> on parsing failures or if no element could be found.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Node</span>
</dd>
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<h4 class="name" id="~ignoreCallbackFn"><span class="type-signature"></span>ignoreCallbackFn<span class="signature">(node)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
<div class="description">
<p>The ignore callback function is invoked by <code>isEmpty()</code> for each
child node to decide whether to ignore a child node or not.</p>
<p>When this function returns <code>false</code>, the node passed to it is
ignored, else not.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">Node</span>
</td>
<td class="description last"><p>The child node to test.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="luci.js.html">luci.js</a>, <a href="luci.js.html#line2628">line 2628</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Boolean indicating whether to ignore the node or not.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="LuCI.html">LuCI</a></li><li><a href="LuCI.Class.html">Class</a></li><li><a href="LuCI.dom.html">dom</a></li><li><a href="LuCI.fs.html">fs</a></li><li><a href="LuCI.Headers.html">Headers</a></li><li><a href="LuCI.Network.html">Network</a></li><li><a href="LuCI.Network.Device.html">Device</a></li><li><a href="LuCI.Network.Hosts.html">Hosts</a></li><li><a href="LuCI.Network.Protocol.html">Protocol</a></li><li><a href="LuCI.Network.WifiDevice.html">WifiDevice</a></li><li><a href="LuCI.Network.WifiNetwork.html">WifiNetwork</a></li><li><a href="LuCI.Poll.html">Poll</a></li><li><a href="LuCI.Request.html">Request</a></li><li><a href="LuCI.Request.poll.html">poll</a></li><li><a href="LuCI.Response.html">Response</a></li><li><a href="LuCI.rpc.html">rpc</a></li><li><a href="LuCI.uci.html">uci</a></li><li><a href="LuCI.view.html">view</a></li><li><a href="LuCI.XHR.html">XHR</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Nov 05 2019 09:33:05 GMT+0100 (Central European Standard Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
Reference in a new issue View git blame Copy permalink