#2 Node

Node Basics

 

//首先写一个HTML;

<div id="demo">
    <p><em>Whose child am I?</em></p>
</div>

 

//然后通过YUI实例的one方法获得Node实例

var node = Y.one('#demo p');

 

访问Node的属性 可以通过 set 或者get方法

一般来说，Node的属性都是一些直接来自DOM节点内的一些String,numbers或者booleans,还有一些返回值是Node或者NodeList实例代表其返回的是其它DOM节点.

 

YUI().use('node', function(Y) {
    var node = Y.one('#demo p');
    var onClick = function(e) {
        var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em
        e.currentTarget.one('em').setContent('I am a child of ' + tag + '.'); // e.currentTarget === node
    }; 
    node.on('click', onClick);
});

---

DOM Methods

 

所有的普通的Node实例都可以使用DOM方法.这些方法有add,remove,retrieve其它节点.

下面的例子用一个handler实现当click触发时将一个节点移到一个新的list里;

 

YUI().use('node', function(Y) {
    var onClick = function(e) {
        var node = Y.one('#demo2').appendChild(e.currentTarget);
        node.addClass('yui-pass');
    };

    Y.all('#demo li').on('click', onClick);
});

<ul id="demo">
    <li>lorem</li>
    <li>ispum</li>
    <li>dolor</li>
    <li>sit</li>
</ul>

<ul id="demo2">
    <li>foo</li>
</ul>

<script type="text/javascript">
YUI().use("node", function(Y) {
    var onClick = function(e) {
        var node = Y.one('#demo2').appendChild(e.currentTarget);
        node.addClass('yui3-pass');
    };

    Y.all('#demo li').on('click', onClick);
});

 

---

 

NodeList Events

 

下面的实例展示了以NodeList

<ul id="demo">
    <li><p>i am <em>lorem</em></p></li>
    <li><p>i am <strong>ispum</strong></p></li>
</ul>

<script type="text/javascript">
YUI().use("node", function(Y) {
    var onClick = function(e) {
        e.currentTarget.setContent(e.type + ': ' + e.target.get('tagName')); // e.currentTarget === #demo li
        this.addClass('yui3-pass'); // this defaults to the NodeList instance
    };

    Y.all('#demo li').on('click', onClick);
});
</script>

 

显然 e.currentTarget.setContent中，context就是NodeList实例，所以this指向的就是NodeList 实例。

 

---

 

NodeList

 

通过all方法获取NodeList实例

 

var nodes = Y.all('#demo li');

NodeList的属性访问和Node一样，简单的属性(strings,numbers,booleans)都是直接从HTML元素里访问的。如果返回值是Node实例则代表返回的是HTML元素本身。

 

<ul id="demo">
    <li>lorem</li>
    <li>ispum</li>
    <li>dolor</li>
    <li>sit</li>
</ul>

<script type="text/javascript">
YUI().use("node", function(Y) {
    var nodes = Y.all('#demo li');

    var onClick = function(e) {
        this.setContent('thanks from all of us!'); // this === nodes
        e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li
    };

    nodes.on('click', onClick);
});
</script>

 

上面的例子中nodes.on('clicl',onClick);NodeList里面所有元素都随着handler的触发而改变。

 

---

 

Delegating Node Events

 

把list级别的listerner授权到item级别来执行;

 

<ul id="demo">
    <li><em>click me if you don't mind...</em></li>
    <li><em>click me if you don't mind...</em></li>
    <li><em>click me if you don't mind...</em></li>
    <li><em>click me if you don't mind...</em></li>
</ul>

<script type="text/javascript">
YUI().use("selector-css3", "node", function(Y) {
    var nodes = Y.all('#demo li');

    var onClick = function(e) {
        e.currentTarget.addClass('yui3-pass'); // e.currentTarget === #demo li
        e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
        e.container.setStyle('border', '5px solid blue'); // e.container === #demo

        nodes.filter(':not(.yui3-pass)').setContent('Click me too please!');
    };

    Y.one('#demo').delegate('click', onClick, 'li');
});

 

显然通过Y.one('#demo').delegate('click', onClick, 'li');可以把click授权到Item级别来触发;

 

---