封裝一個可以取得元素文字內容的函數

這次帶給大家封裝一個可以取得元素文字內容的函數，封裝一個可以取得元素文字內容函數的注意事項有哪些，下面就是實戰案例，一起來看一下。

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>的key值<br>S2 當類別名稱的值為ture時，新增類別名稱; 否則則移除</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 加上命名空間，就是

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); mydom.addClass(item3, [' a','b'])
而希望的呼叫方法是item3.getSibling() / item3.addClass('['a', 'b'])

#C.1 this 原型鏈

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函數_物件模式

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 支持傳入一個/多個節點

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中文網其它相關文章！

推薦閱讀：

js的陣列原型方法使用詳解

EasyCanvas繪圖庫在Pixeler專案開發中使用實戰總結

以上是封裝一個可以取得元素文字內容的函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！