Node

• Introduction
• Basic Example
• Full Example
• Real World Example

Allows for interaction with the DOM through a set of utility methods.

---

What Does Node Do, Exactly?

Node supplies a set of methods that assists in DOM manipulation. Simple DOM interaction is possible without the node component, with Y.one, Y.all, and such commands being supplied in the YUI base code.

However, more complicated actions which would be quite difficult with that code alone (e.g., finding ancestors and siblings, changing attributes, or modifying content) are made much simpler with the node component.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Node module.

YUI().use(
  'aui-node',
  function(Y) {
    // code goes here
  }
);

---

Using Node

Let's make a <div> element so we have something to work with:

<div class="box"></div>

Now we can do all sorts of things with this box, using the utility methods that the node component provides.

We can find all of the ancestors of our box, or all the ancestors that are div elements:

YUI().use(
  'aui-node',
  function(Y) {
    var ancestors = Y.one('.box').ancestors();
    // or
    var divAncestors = Y.one('.box').ancestors('div');
  }
);

We can add content to our box:

YUI().use(
  'aui-node',
  function(Y) {
    Y.one('.box').html('<p>I just love boxes! Do you?</p>');
  }
);

And then add more content:

YUI().use(
  'aui-node',
  function(Y) {
    Y.one('.box p').placeAfter('<p>Especially when they are filled to the brim!</p>');
  }
);

Or, we could empty it of all content:

YUI().use(
  'aui-node',
  function(Y) {
    Y.one('.box').empty();
  }
);

Node allows you to interact with the DOM in all sorts of ways that would usually be quite difficult. You can get the margin or padding on a certain element, change an element's ID, center an element in an ancestor container, get or set an attribute of an element, or many other useful things.

For a full list of the utilities that the node component supplies, check out the source code! Most methods explain what they do right there in the code for you.