DOM面试题练习

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

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

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

如果有className，那么打印className

否则打印小写标签名

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

    

        

            

                
1
                
2
                ...
            
         
    

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，返回自己

function retSiblings (ele, n) {
	while(ele && n) {
		if(n > 0 && ele.nextElementSibling) {
			n--;
			ele = ele.nextElementSibling;	//注意是要Element，否则会返回text节点即空格
		} else if(ele.previousElementSibling){
			n ++;
			ele = ele.previousElementSibling;
		}
	}
	return ele;
}

兼容性写法

function retSiblings (ele, n) {
	while(ele && n) {
		if(n > 0 ) {
			n--;
			if(ele.nextElementSibling){
				ele = ele.nextElementSibling;
			} else {
				for(ele = ele.nextSibling ; ele && ele.nodeType != 1 ; ele = ele.nextSibling);
			}
		} else {
			n ++;
			if(ele.previousElementSibling){
				ele = ele.previousElementSibling;
			} else {
				for(ele = ele.previousSibling; ele && ele.nodeType != 1; ele = ele.previousSibling);
			}
		}
	}
	return ele;
}

题目四：封装函数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:       

-》       

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