Encapsulates a function that can obtain the text content of an element

This time I will introduce to you the encapsulation of a function that can obtain the text content of an element. What are the precautions for encapsulating a function that can obtain the text content of an element? The following is a practical case, let's take a look. A.1 Logical steps

Goal: Get all sibling element nodes of an element

S1 Get the parent element node of an element and all its child nodes

S2 Statement The pseudo array object to be returned

S3 Remove the element node passed in by itself
S4 Use array.length to pass in the array content by subscript (if i is used, it is possible to skip it, and it is not in order )
S5 Return this pseudo array

A.1 Specific code

        
• 选项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-Logical-steps">A.2 Logical steps</h2><h2 id="Goal-Add-remove-class-names-to-elements-in-batches">Goal: Add/remove class names to elements in batches</h2><p style="text-align: left;">S1 </p>Traverse the key value of the object<p style="text-align: left;"><a href="http://www.php.cn/wiki/198.html" target="_blank">S2 When the value of the class name is true, add the class name; otherwise, remove it</a><br>A.2 Specific code</p><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 Add the

namespace

, which is

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) );
}

`

The calling method is

mydom.getSiblings(item3); mydom.addClass(item3, [' a','b'])
The desired calling method isitem3.getSibling() / item3.addClass('['a', 'b'])
C.1 this prototype chain

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 Simulate a simplified 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 Support Pass in one/multiple nodes

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 Add other functions

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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of array prototype methods in js

Practical use of EasyCanvas drawing library in Pixeler project development Summarize

The above is the detailed content of Encapsulates a function that can obtain the text content of an element. For more information, please follow other related articles on the PHP Chinese website!