封装一个可以获取元素文本内容的函数-js教程-PHP中文网

首页

web前端

js教程

封装一个可以获取元素文本内容的函数

php中世界最好的语言

May 24, 2018 pm 03:19 PM

元素可以获取

这次给大家带来封装一个可以获取元素文本内容的函数，封装一个可以获取元素文本内容函数的注意事项有哪些，下面就是实战案例，一起来看一下。

A.1 逻辑步骤

目标: 获取某元素的所有同级+元素节点

S1 获取某的父元素节点 + 其所有子节点
S2 声明将要返回的伪数组对象
S3 去除本身传入的元素节点
S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
S5 返回这个伪数组

A.1 具体代码

<body>
    <ul>
        <li id="item1">选项1</li>
        <li id="item2">选项2</li>
        <li id="item3">选项3</li>
        <li id="item4">选项4</li>
        <li id="item5">选项5</li>
    </ul>
</body>

//S5 封装为函数(API)
function getSiblings(node){
    var allChildren = node.parentNode.children;     //S1 获取li的父元素节点 + 其所有子节点
    var array = {length:0};                         //S2 声明将要返回的伪数组对象
    for (let i = 0; i < allChildren.length; i++){
        if (allChildren[i] !== node){              // S3 去除本身传入的元素节点
            array[array.length] = allChildren[i];   // S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
            array.length += 1;
            }
        }
        // console.log(array);       // {0:li#item1, 1:li#item2......}
        return array;                // S6 返回这个伪数组
    }

A.2 逻辑步骤

目标: 批量给元素添加/移除类名

S1 遍历对象的key值
S2 当类名的值为ture时，添加类名; 否则则去除

A.2 具体代码

function addClass(node, classes){
    // var classes = {&#39;a&#39;:true, &#39;b&#39;:false, &#39;c&#39;: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 ? &#39;add&#39;:&#39;remove&#39;;
        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 < allChildren.length; i++){
        if (allChildren[i] !== node){              // 去除本身传入的元素节点
            array[array.length] = allChildren[i];
            array.length += 1;
        }
    }
    return array;
}
mydom.addClass = function addClass(node, classes){
    classes.forEach( (value)=> 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 < allChildren.length; i++){
        if (allChildren[i] !== this){              // 去除本身传入的元素节点
            array[array.length] = allChildren[i];
            array.length += 1;
        }
    }
    return array;
}
Node.prototype.addClass = function addClass(classes){
    classes.forEach( (value)=> 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 < allChildren.length; i++){
                if (allChildren[i] !== node){
                    array[array.length] = allChildren[i];
                    arrat.length += 1;
                }
            }
            return array;
        },
        addClass: function(classes){
            classes.forEach( (value) => 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 < allChildren.length; i++){
                if (allChildren[i] !== node){
                    array[array.length] = allChildren[i];
                    arrat.length += 1;
                }
            }
            return array;
        },
        addClass: function(classes){
             classes.forEach( (value) => 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 < temp.length; i++){
            nodes[i]= temp[i];                     //S3 去除多余原型链部分
        }
        nodes.length = temp.length;
    } else if (nodeOrSelector instanceof Node){
        nodes ={ 0: nodeOrSelector , length:1};    //S4 单个元素也要返回伪数组
    }
    nodes.addClass = function(classes){
        // for (let i = 0; i < nodes.length; i++){
        //     classes.forEach( (value) => nodes[i].classList.add(value) );
        // }
        // 更好的写法是
        classes.forEach( (value) => {
            for (let i=0; i<nodes.length; i++){
                nodes[i].classList.add(value);
            }
        })
    }
    return nodes
}
//调用效果
var node2 = jQuery(&#39;ul>li');
node2.addClass( ['blue'] );

D 添加其他功能

window.jQuery = function(nodeOrSelector){
    let nodes = {};  //S1 以后要用到的元素节点伪数组，空对象
    if (typeof nodeOrSelector === 'string'){
        let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
        for (let i = 0 ; i < temp.length; i++){
            nodes[i]= temp[i];                     //S3 去除多余原型链部分
        }
        nodes.length = temp.length;
    } else if (nodeOrSelector instanceof Node){
        nodes ={ 0: nodeOrSelector , length:1};    //S4 单个元素也要返回伪数组
    }
    nodes.addClass = function(classes){
        // 更好的写法是
        classes.forEach( (value) => {
            for (let i=0; i<nodes.length; i++){
                nodes[i].classList.add(value);
            }
        })
    }
    // 获取元素节点文本内容
        // S1 遍历元素节点的伪数组;
        // S2 获取其文本内容，并推送到存储的 数组;
        // S3 返回数组
    nodes.getText = function(){
        var texts = [];
        for (i = 0; i < nodes.length; i++){
            texts.push(nodes[i].textContent);    //获取元素节点内容并推入到数组
        }
        return texts
    }
    // 设置元素节点文本内容
        // S1 遍历元素节点的伪数组;
        // S2 设置其文本内容为传入的参数内容
    nodes.setText = function(text){
        for (i = 0 ; i < nodes.length; i++){
            nodes[i].textContent = text;
        }
    }
    // 合并为一个接口
        //  S1 判断是否传入了参数, 传入了就是设置，没传入就是读取
    nodes.text = function(text){
        if (text === undefined){
            var texts = [];
            for (i = 0; i < nodes.length; i++){
                texts.push(nodes[i].textContent);
            }
            return texts
        } else {
            for (i = 0 ; i < nodes.length; i++){
            nodes[i].textContent = text;
            }
        }
    }
    return nodes
}
// 调用结果
var node2 = jQuery(&#39;ul>li');
node2.addClass( ['blue'] );
// 获取文本内容
    // var text = node2.text();
    // console.log(text);
// 设置文本内容
node2.text('hi');

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

js的数组原型方法使用详解

EasyCanvas绘图库在Pixeler项目开发中使用实战总结

以上是封装一个可以获取元素文本内容的函数的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

在JavaFX中，有哪些不同的路径元素？Aug 28, 2023 pm 12:53 PM

javafx.scene.shape包提供了一些类，您可以使用它们绘制各种2D形状，但这些只是原始形状，如直线、圆形、多边形和椭圆形等等...因此，如果您想绘制复杂的自定义形状，您需要使用Path类。Path类Path类使用此表示形状的几何轮廓您可以绘制自定义路径。为了绘制自定义路径，JavaFX提供了各种路径元素，所有这些都可以作为javafx.scene.shape包中的类使用。LineTo-该类表示路径元素line。它可以帮助您从当前坐标到指定（新）坐标绘制一条直线。HlineTo-这是表

C++程序：向数组中添加一个元素Aug 25, 2023 pm 10:29 PM

数组是一种线性顺序数据结构，用于在连续的内存位置中保存同质数据。与其他数据结构一样，数组也必须具备以某种有效方式插入、删除、遍历和更新元素的功能。在C++中，我们的数组是静态的。C++中还提供了一些动态数组结构。对于静态数组，该数组内可能存储Z个元素。到目前为止，我们已经有n个元素了。在本文中，我们将了解如何在C++中在数组末尾插入元素（也称为追加元素）。通过示例理解概念‘this’关键字的使用方式如下GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin

html5不支持哪些元素Aug 11, 2023 pm 01:25 PM

html5不支持的元素有纯表现性元素、基于框架的元素、应用程序元素、可替换元素和旧的表单元素。详细介绍：1、纯表现性的元素，如font、center、s、u等，这些元素通常被用于控制文本样式和布局；2、基于框架的元素，如frame、frameset和noframes，这些元素在过去用于创建网页布局和分割窗口；3、应用程序相关的元素，如applet和isinde等等。

jquery怎么移除元素Feb 17, 2023 am 09:49 AM

jquery移除元素的方法：1、通过jQuery remove()方法删除被选元素及其子元素，语法是“$("#div1").remove();”；2、通过jQuery empty()方法删除被选元素的子元素，语法是“$("#div1").empty();”。

如何使用HTML和CSS实现一个具有固定导航菜单的布局Oct 26, 2023 am 11:02 AM

如何使用HTML和CSS实现一个具有固定导航菜单的布局在现代网页设计中，固定导航菜单是常见的布局之一。它可以使导航菜单始终保持在页面顶部或侧边，使用户可以方便地浏览网页内容。本文将介绍如何使用HTML和CSS实现一个具有固定导航菜单的布局，并提供具体的代码示例。首先，需要创建一个HTML结构来呈现网页的内容和导航菜单。以下是一个简单的示例

Vue3中的ref函数详解：直接访问组件元素的应用Jun 18, 2023 am 11:51 AM

在Vue3中，ref函数是非常有用的，在开发过程中提供了很方便的操作方式。它允许直接访问Vue组件元素并对其进行操作。ref函数是一个创建一个被响应式地绑定的对象的函数。可以在Vue组件中使用它来引用一个元素或子组件，并从父组件操作这些元素或子组件。ref函数返回一个响应式的对象，并通过该对象暴露指定元素或子组件的引用。因此，可以通过该对象直接访问元素或子组

Python程序用于测试列表中的所有元素是否最大间隔为KAug 28, 2023 pm 05:25 PM

在许多编程场景中，我们都会遇到需要确定列表中的所有元素是否最多相距K个位置的情况。这个问题出现在各个领域，例如数据分析、序列处理和算法挑战。能够测试和验证这些条件对于确保我们程序的完整性和正确性至关重要。在本文中，我们将探索一个Python程序来有效地解决这个问题。我们将讨论这个概念，提出解决问题的分步方法，并提供工作代码实现。读完本文后，您将清楚地了解如何使用Python检查列表中的元素是否最多相距K个位置。理解问题在深入研究解决方案之前，让我们首先详细了解问题陈述。给定一个元素列表，我们需要

Java程序：在循环链表中搜索元素Sep 11, 2023 am 11:45 AM

什么是喜欢列表和循环链表？链表是一种数据结构，其中每个节点都包含两部分，数据和地址路径。这些部分指向下一个节点，该节点始终与先前的节点创建互连。基于此，循环链表是最后一个节点与第一个节点有内部链接，这就是这种类型的链表称为循环链表。在Java环境中，当我们查找元素循环链表时，需要在链表中创建一个临时节点来指向。这样我们还需要声明两个变量。它们是曲目索引和曲目搜索。如果Temp节点在起始点为空，那么遍历列表就很重要，因为此时它不包含任何项目。循环链表的工作原理及其应用？循环链表的工作方法对于循环链

See all articles