DOM面试题练习

ゞ浴缸里的玫瑰 2022-05-20 10:45 250阅读 0赞

### 题目一：要求点击任何一个元素，返回它在事件冒泡时所经过的元素 ###

阿里实习生网上测试题目，当初看着学姐做的

如果元素有id，那么打印id

如果有className，那么打印className

否则打印小写标签名

例如：点击li时，返回：html body \#page .content.main .refer ul li

document.addEventListener('click', function(e) {
       //点击li时，返回：html body #page .content.main .refer ul li
       return getCssSelecter(e.target)
    })

代码实现：

function getCssSelecter(ele) {
    	var arrDom = [];
    
    	while(ele){
    		var e = ele.id ? '#'+ ele.id 
    				: ( ele.className ?  '.' + ele.className.split(' ').join('.') 
    				: ele.tagName.toLowerCase() );
    
    		arrDom.push( e );
    		ele = ele.parentElement;
    	}
    	console.log(arrDom.reverse())
    	return arrDom;
    }

### 题目二：自己封装hasChildren()方法，不可用children属性 ###

在原型上编程

Element.prototype.hasChildren = function () {
    	var child = this.childNodes;
    	var len = child.length;
    	var arr = [];
    	for(var i = 0; i < len; i++){
    		if(child[i].nodeType == 1){
    			arr.push(child[i]);
    		}
    	}
    	return arr;
    }

### 题目三：找第n个兄弟节点 ###

封装函数，返回元素e的第n个兄弟节点，n为正，返回后面的兄弟节点，n为负，返回前面的，n为0，返回自己

兼容性写法

### 题目四：封装函数insertAfter()； ###

我们知道系统中有一个insertBefore(); 实现一个insertAfter()，功能类似insertBefore()

思路： 如果后面有节点，那就对后面那个节点执行insertBefore();

如果是最后一个节点，那就使用appendChild() 方法

Element.prototype.insertAfter = function (newNode, existNode) {
    
    	var beforeNode = existNode.nextElementSibling;
    	if(beforeNode){
    		this.insertBefore(newNode, beforeNode);
    	}else{
    		this.appendChild(newNode);
    	}
    }

### 题目五：将目标节点内部的节点顺序，逆序。 ###

eg:       <div> <a></a> <em></em></div>

\-》        <div><em></em><a></a></div>

function reverseChildrens (parent){
    	var lastChild = parent.lastElementChild;
    	console.log(lastChild);
    	var pre;
    	while(pre = lastChild.previousSibling){
    		var temp = parent.removeChild(pre);
    		parent.appendChild(temp);
    	}
    }