JSMA nodeCollection
- Pascal Hartmann (Unlicensed)
Overview
A nodeCollection is a server-side HTML node containing an arbitrary amount of sub-nodes.
What can JSMA nodeCollection do for me?
The JSMA mainly serves the purpose of executing server-side jQuery commands. For example, it can facilitate dynamic server-side rendering of SEO-relevant content without losing too many prettification options.
Index
Methods
The JSMA nodeCollection provides the following methods:
nodeCollection.addClass(className)
Adds a CSS class to the respective nodeCollection in accordance with jQuery.addClass.
Example
[...]
// creates a new nodeCollection
var button = dom.create('div');
// adds CSS classes to the node collection
button.addClass('btn btn-primary');
[...]
Parameter className (required)
nodeCollection.append([elements])
If provided, elements will be appended after the last immediate child element of the respective node collection in accordance with jQuery.append.
Example
[...]
// creates two new nodeCollections
var list = dom.create('ul');
var listElement = dom.create('li');
// appends the list element to the list
list.append(listElement);
[...]
Output
<ul> <li></li> </ul>
Parameter elements (optional)
nodeCollection.attr(field, [value])
Will add an attribute to the respective node collection with its name provided by the field parameter. If provided, the value parameter defines the attributes value in accordance with jQuery.attr.
Example
[...]
// creates a new nodeCollection
var button = dom.create('a');
// adds an attribute without any value
button.attr('disabled');
// adds an attribute-value pair
button.attr('href', 'https://www.my-ikona.com');
[...]
Output
<a disabled></a> <a href="https://www.my-ikona.com" disabled></a>
Parameter field (required)
Parameter value (optional)
nodeCollection.childCount()
Counts the number of children within the respective nodeCollection. There is no jQuery equivalent for this method.
Example
[...]
// creates a list
var list = dom.create('ul');
// creates a list element for each customer in an array
customers.forEach(function(customer) {
var listElement = dom.create('li');
listElement.text(customer.name);
list.append(listElement);
});
[...]
Output
<ul> <li>John Doe</li> <li>Jane Doe</li> <li>Jack Smith</li> </ul>
nodeCollection.children()
Addresses all immediate children of the respective nodeCollection. Does not take a selector parameter unlike the jQuery equivalent.
Example
[...]
var children = nodeCollection.children();
children.forEach(function(child) {
if(child.isEmpty()) {
nodeCollection.removeChild(child);
}
});
[...]
This will only find any immediate children of the nodeCollection you address. If you need to traverse through all layers of the respective nodeCollection, you might want to use nodeCollection.find().
nodeCollection.clone()
Create a copy of the respective nodeCollection. Does not take parameters for copying data or deep copying unlike the jQuery equivalent.
Example
[...]
/* We will create three different buttons by creating a basic button first,
cloning it and then adding distinct features to each button. */
var saveAction = dom.create('div');
saveAction.addClass("btn btn-xs");
// now that we have our template, we create the clones
var cancelAction = saveAction.clone();
var helpAction = saveAction.clone();
//now we add specific CSS to each action
saveAction.addClass("btn-success");
cancelAction.addClass("btn-danger");
helpAction.addClass("btn-primary");
[...]
nodeCollection.create(tag_name)
Creates a new nodeCollection for further use in JSMA nodeCollection
Example
[...]
// creates a new nodeCollection
var button = dom.create('div');
[...]
Parameter tag_name (required)
nodeCollection.each(fun)
Used to loop through nodeCollections in accordance with jQuery.each
Example
[...]
buttonGroup.each(function( button ) {
button.attr('disabled');
});
[...]
Parameter fun (required)
nodeCollection.find(selector)
Address all children of the respective nodeCollection in accordance with jQuery.find. Unlike nodeCollection.children this will not only include immediate children, but traverse through all layers within the respective nodeCollection.
Example
[...]
var children = nodeCollection.find("li");
children.forEach(function(child) {
if(child.isEmpty()) {
nodeCollection.removeChild(child);
}
});
[...]
Parameter selector (required)
nodeCollection.hasAttr(field)
Checks if the attribute provided by field is present in the respective nodeCollection. There is no jQuery equivalent for this method.
Example
[...]
if(nodeCollection.hasAttr("href")) {
nodeCollection.removeAttr("href");
}
[...]
Parameter field (required)
nodeCollection.isEmpty()
Returns true if the respective nodeCollection is entirely empty, i.e. does not contain children or text. The jQuery equivalent would be the :empty selector.
Example
[...]
var children = nodeCollection.find("li");
children.forEach(function(child) {
if(child.isEmpty()) {
nodeCollection.removeChild(child);
}
});
[...]
nodeCollection.length()
The number of elements to match with the respective node collection in accordance with jQuery.length and jQuery.size.
Example
[...] nodeCollection.length(); // -> 42 [...]
nodeCollection.parent()
Addresses the immediate parent of the respective nodeCollection. Does not take a selector parameter unlike the jQuery equivalent.
Example
[...]
if(listElement.isEmpty) {
var parent = listElement.parent;
parent.remove();
}
[...]
nodeCollection.prepend([elements])
If provided, elements will be prepended before the first immediate child element of the respective node collection in accordance with jQuery.prepend.
Before
<p> <span>First sentence</span> <span>Second sentence</span> <span>Third sentence</span> <p>
Example
[...]
// creates a fourth sentence to add to the paragraph
var paragraph = nodeCollection.find('p');
var fourthSentence = dom.create('span');
fourthSentence.text("Fourth sentence");
// prepends the fourth sentence to the paragraph
paragraph.prepend(fourthSentence);
[...]
After
<p> <span>Fourth sentence</span> <span>First sentence</span> <span>Second sentence</span> <span>Third sentence</span> <p>
Parameter elements (optional)
nodeCollection.remove()
Removes the respective nodeCollection from the DOM entirely in accordance with jQuery.remove.
Example
[...]
if(listElement.isEmpty) {
var parent = listElement.parent;
parent.remove();
}
[...]
nodeCollection.removeAttr(field)
Removes the attribute provided in field from the respective nodeCollection in accordance with jQuery.removeAttr.
Before
<a href="https://www.my-ikona.com" disabled></a>
Example
[...]
// creates a new nodeCollection
var button = dom.create('a');
[...]
// removes the attribute
button.removeAttr('disabled');
[...]
After
<a href="https://www.my-ikona.com"></a>
Parameter field (required)
nodeCollection.removeChild(child)
Removes the child provided in child from the respective nodeCollection. There is no jQuery equivalent for this method.
Before
<div> <p></p> <a></a> </div>
Example
[...]
nodeCollection.children.forEach(function(child) {
var tagName = child.tagName();
if(tagName === "a") {
nodeCollection.removeChild(child);
}
});
[...]
After
<div> <p></p> </div>
Parameter child (required)
nodeCollection.removeClass(className)
Removes a CSS class from the respective nodeCollection in accordance with jQuery.removeClass.
Example
[...]
var customer = customers.current;
if(!customer) {
bulkySEOText.removeClass("hidden");
}
[...]
Show hidden content before delivering it
At times, you might want to avoid hiding and showing content on the client-side but still deliver dynamic SEO-relevant content depending on its destination. Hiding and showing content before delivering it will mend your problem.
Parameter className (required)
nodeCollection.replace([elements])
Replaces the respective nodeCollection's content with another provided in elements while keeping the variable name intact. This method is adjacent to jquery.replaceWith.
Example
[...] nodeCollection.replace([elements]) [...]
Parameter elements (optional)
nodeCollection.setTagName(name)
Exchanges tag names without changing their content. Similar to jQuery.replaceWith()
Example
[...]
// whenever a URL is provided turn the description paragraph into a link
if(product.path) {
descriptionBlock.setTagName('a');
descriptionBlock.attr('href', product.path);
}
[...]
Parameter name (required)
Use any common HTML tag to provide a tag name, such as 'a', 'p', 'div' or others.
nodeCollection.stringify([pretty], [indentationStep])
Prints your nodeCollection as HTML, with a prettify and indentation option.
Example
[...] myList.stringify(false, 4) [...]
Parameter pretty (optional)
Parameter indentationStep (optional)
Result
<ul>
<li>John Doe</li>
<li>Jane Doe</li>
<li>Jack Smith</li>
</ul>
nodeCollection.tagName()
Returns the tag name of the respective nodeCollection. There is no jQuery equivalent for this method.
Example
[...]
var node = dom.create('div');
var tag = node.tagName();
this.tagLabel.text(tag);
[...]
Output
div
nodeCollection.text([value])
This method places text inside the respective nodeCollection in accordance with jQuery.text. If there is already something inside the nodeCollection, this method will replace it.
Example
[...]
var node = dom.create('div');
node.text('This is a server-side text sample!');
[...]
Output
<div>This is a server-side text sample!</div>