要素のテキストコンテンツを取得できる関数をカプセル化します。

今回は要素のテキスト内容を取得できる関数をカプセル化する際の注意点を紹介します。実際のケースを見てみましょう。

A.1 論理的なステップ

目標: 要素のすべての兄弟 + 要素ノードを取得します

S1 親要素ノード + そのすべての子ノードを取得します
S2 返される疑似配列オブジェクトを宣言します
S3 入力自体を削除します要素ノード
S4 は array.length を使用して配列の内容を添字で渡します (i を使用すると、i をスキップすることができ、順序は変わりません)
S5 この疑似配列を返します

A.1 特定のコード

        
• 选项1
        
• 选项2
        
• 选项3
        
• 选项4
        
• 选项5
    

//S5 封装为函数(API)
function getSiblings(node){
    var allChildren = node.parentNode.children;     //S1 获取li的父元素节点 + 其所有子节点
    var array = {length:0};                         //S2 声明将要返回的伪数组对象
    for (let i = 0; i  <h2 id="A-論理ステップ">A.2 論理ステップ</h2><p style="text-align: left;">目標: バッチ内の要素にクラス名を追加/削除する</p><p style="text-align: left;">S1 <a href="http://www.php.cn/wiki/198.html" target="_blank">オブジェクトのキー値を走査する</a><br>S2 クラス名の値が true の場合、クラス名を追加します。それ以外の場合は削除します</p><h2 id="A-特定のコード">A .2 特定のコード </h2><pre class="brush:php;toolbar:false">function addClass(node, classes){
    // var classes = {'a':true, 'b':false, 'c':true}   //S1 构造要传入的类名对象
    for (let key in classes){                          //S2 遍历对象的key值
        value = classes[key];
        // if (value){                                    //S3 当类名的值为ture时，添加类名
        //     node.classList.add(key);
        // }else{
        //     node.classList.remove(key);
        // }
        // 以上 if/else可以优化为
        var methodName = value ? 'add':'remove';
        node.classList[methodName](key);
    }
}

B は namespace を追加します。これは

window.mydom = {};
mydom.getSiblings = function getSiblings(node){
    var allChildren = node.parentNode.children;
    var array = {length:0};
    for (let i = 0; i  node.classList.add(value) );
}

`
呼び出しメソッドは mydom.getSiblings(item3); 'a','b']) mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])
而希望的调用方法是item3.getSibling() / item3.addClass('['a', 'b']) 必要な呼び出しメソッドは item3.getSibling() / item3.addClass('['a', 'b'])です

C .1 this+prototypechain

Node.prototype.getSiblings = function getSiblings(){
    var allChildren = this.parentNode.children;
    var array = {length:0};
    for (let i = 0; i  this.classList.add(value) );
}
// 参考效果
console.log( item3.getSiblings() )

C.2 node2 function_object mode

window.Node2 = function(node){         //要挂载到全局window上，才能直接访问
    return {
        getSiblings: function(){
            var allChildren = node.parentNode.children;
            var array = {length:0};
            for (let i = 0 ; i  node.classList.add(value) )
        }
    }
}
//参考效果
node2 = Node2(item3);
console.log( node2.getSibling() );
node2.addClass( ['a', 'b', 'c'] )

C.3 簡略化された jQuery をシミュレートする

window.jQuery = function(nodeOrSelector){
    let node;
    if (typeof nodeOrSelector === 'string'){        //类型检测
        node = document.querySelector(nodeOrSelector);  //只支持返回一个节点
    } else {
        node = nodeOrSelector;
    }
    return{
        getSibligs: function(){
           var allChildren = node.parentNode.children;
            var array = {length:0};
            for (let i = 0 ; i  node.classList.add(value) )
        }
    }
}
//调用效果
var node2 = jQuery('#item3');
node2.getSibling();
node2.addClass(['red', 'c'])

C.4 1 つ/複数のノードの受け渡しをサポートする

window.jQuery = function(nodeOrSelector){
    let nodes = {};  //S1 以后要用到的元素节点伪数组，空对象
    if (typeof nodeOrSelector === 'string'){
        let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
        for (let i = 0 ; i  nodes[i].classList.add(value) );
        // }
        // 更好的写法是
        classes.forEach( (value) => {
            for (let i=0; i<nodes.length var>li');
node2.addClass( ['blue'] );</nodes.length>

D 他の関数を追加する

window.jQuery = function(nodeOrSelector){
    let nodes = {};  //S1 以后要用到的元素节点伪数组，空对象
    if (typeof nodeOrSelector === 'string'){
        let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
        for (let i = 0 ; i  {
            for (let i=0; i<nodes.length var>li');
node2.addClass( ['blue'] );
// 获取文本内容
    // var text = node2.text();
    // console.log(text);
// 设置文本内容
node2.text('hi');</nodes.length>

あなたはこの記事のケースを読みました。この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

js での配列プロトタイプ メソッドの使用の詳細な説明

Pixeler プロジェクト開発における EasyCanvas 描画ライブラリの使用の実践的な概要

以上が要素のテキストコンテンツを取得できる関数をカプセル化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。