Element.prototype.hasChildren =function(){var arr = this.childNodesif(arr.length ===0){returnfalse}else{for(var i =0; i < arr.length; i++){if(arr[i].nodeType ===1){returntrue}}returnfalse}}
var div = document.getElementsByTagName('div')[0]
var h1 = document.getElementsByTagName('h1')[0]
console.log(div.hasChildren())
console.log(h1.hasChildren())
原型上編程 尋找兄弟元素節點 參數為正找之后第n個，參數為負找之前第n個，參數0返回自己
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><h1></h1><p></p><a href=""></a><span></span></div><script>Element.prototype.findSibling =function(){var index = arguments[0]||0if(!index){return this}else{var times = Math.abs(index)var node = thisfor(var i =0; i < times; i++){node =findFn(node, index)}return node}}functionfindFn(node, index){if(index >0){return node.nextElementSibling}else{return node.previousElementSibling}}var h1 = document.getElementsByTagName('h1')[0]var found = h1.findSibling(3)var a = document.getElementsByTagName('a')[0]var found2 = a.findSibling(-2)console.log(found)console.log(found2)</script></body></html>
用js創建文檔碎片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="box"></div><script>var div = document.getElementsByTagName('div')[0],oUl = document.createElement('ul');oUl.className ='list'var oDivFragment = document.createDocumentFragment('div')for(var i =0; i <5; i++){var oLi = document.createElement('li')oLi.className ='list-item'oLi.innerText = i +1oDivFragment.appendChild(oLi)}oUl.appendChild(oDivFragment)div.appendChild(oUl)</script></body></html>
