JS- Emulates a DOM node

The code part of this chapter mainly realizes the operations of the linked list, including adding child nodes, associating child nodes with sibling nodes, deleting child nodes, finding the first child element and the last child element, and checking the position of the current node in the parent node

Purpose: To practice prototype chain programming, deconstruction, array methods, storage descriptors, and deepen the memory of DOM attributes

There is no view part of the code, just run the code

// Add child nodes and associate sibling nodes
MyNode.prototype.appendChild = function(node) {
    if(this.children.length>0) {// Check whether the first node is being added
        node.preSbing = this.children[this.children.length - 1]
        this.children[this.children.length - 1].nextSbing = node
    }else{/ / is
        node.preSbing = null
    }
    this.children.push(node)
    node.nextSbing = null
}
// Remove the child node and re-associate the sibling node
MyNode.prototype.deletChild = function(node) {
    if(this.children.length==0) {// There is no node to remove the wool
        return;
    }
    var childIndex = this.children.indexOf(node)// View the position of the node to be deleted in the array, that is, get the array subscript
    // Disconnect the chain and reconnect it
    if(childIndex>0){
        node.preSbing.nextSbing = node.nextSbing
    }
    if(childIndex<this.children.length-1){
        node.nextSbing.preSbing = node.preSbing
    }
    this.children.splice(childIndex,1)// Delete the current node
}
MyNode.prototype.appendParent = function(node) {
    this.parent = node
}
function MyNode(parentNode = null,{
    name="anyn",age=0} = {}){

    // This section can define additional attributes
    this.name = name
    this.age = age

    // Core attributes
    this.children = []
    this.parent = parentNode
    this.nextSbing = null// Next sibling node
    this.preSbing = null// Last sibling node


    var _firstchild = null
    var _lastchild = null
    var _indexOfParent = null
    // Store the descriptor to get firstChild
    Object.defineProperty(this."firstchild", {get(){
            _firstchild = this.children[0]
            return _firstchild
        }
    })
    // Store the descriptor to get lastChild
    Object.defineProperty(this."lastchild", {get(){
            _lastchild = this.children[this.children.length - 1]
            return _lastchild
        }
    })
    // Store the descriptor to get indexOfParent
    Object.defineProperty(this."indexOfParent", {get(){
            var temp = this
            var cont = 0
            while(temp.preSbing! =null){
                temp = temp.preSbing
                cont++
            }
            _indexOfParent = cont
            return _indexOfParent
        }
    })

    this.firstchild = _firstchild
    this.lastchild = _lastchild
    this.indexOfParent = _indexOfParent
}

var parentNode = new MyNode(null, {name:"nidie".age:29})
var son1Node = new MyNode(parentNode,{name:"zhangsan".age:18})
var son2Node = new MyNode(parentNode,{name:"lisi".age:15})
var son3Node = new MyNode(parentNode,{name:"wangwu".age:19})
var son4Node = new MyNode(parentNode)

parentNode.appendChild(son1Node)
parentNode.appendChild(son2Node)
parentNode.appendChild(son3Node)
parentNode.appendChild(son4Node)
parentNode.deletChild(son1Node)
console.log(parentNode)
Copy the code