function $(names){ //封裝獲取id元素
return document.getElementById(names);
}
var box = $('box'); //傳參
var sp = $('sp');
var sps = $('sps');
console.log(box.firstElementChild);//打印第一個(gè)子元素
console.log(box.lastElementChild);//打印最后一個(gè)子元素
console.log(box.childElementCount);//打印子元素的個(gè)數(shù)
console.log(box.previousElementSibling);//打印前一個(gè)同輩元素
console.log(box.children);//獲取元素子元素,返回一個(gè)數(shù)組
console.log(sp.nextElementSibling);//打印下一個(gè)元素
console.log(sps.previousSibling);//打印上一個(gè)節(jié)點(diǎn)
sp.classList.add('nn');//為元素增加類名
sp.classList.remove('aa');//為元素刪除類名
console.log(sp.classList.contains('aa'));//檢測該類名是否存在,返回布爾值
2
var box = document.createElement('div');//創(chuàng)建一個(gè)新的div節(jié)點(diǎn)并取變量名
var spa = document.createElement('span');//創(chuàng)建一個(gè)新的span節(jié)點(diǎn)并var變量名
var newboxtext = document.createTextNode('hello world');//創(chuàng)建文本節(jié)點(diǎn)
box.appendChild(newboxtext);//把文本節(jié)點(diǎn)插入div里
box.classList.add('aa');//給div取一個(gè)class名
// var boxnode = document.getElementsByClassName('aa')
var wrap = document.getElementsByClassName('wrapper')[0];//獲取id名為wrapper的div并給變量名
wrap.appendChild(box);//把變量名為box的div放到變量名為wrap的div里
wrap.appendChild(spa);//同上
var h1 = document.createElement('h1');//創(chuàng)建一個(gè)新的h1標(biāo)節(jié)點(diǎn)
wrap.insertBefore(h1,box);//wrap為在什么地方插入抱环;h1為想插入的元素纸巷;box為插入到這個(gè)元素前;
var h2 = document.createElement('h2');
wrap.replaceChild(h2,h1);//替換節(jié)點(diǎn)瘤旨。h2為新節(jié)點(diǎn),h1為要替換的節(jié)點(diǎn)存哲;(簡而言之:h1替換為h2)
wrap.removeChild(spa);//刪除節(jié)點(diǎn)。該方法不是在刪除的節(jié)點(diǎn)上調(diào)用察滑,而是在父節(jié)點(diǎn)上調(diào)用修肠。
var uls = document.getElementById('uls');//獲取ul節(jié)點(diǎn)
var ss = uls.cloneNode(false);//克隆變量名為uls的元素贺辰;true為全部克虑妒;false為只克隆這個(gè)元素
wrap.appendChild(ss);//把克隆的元素插入到div里滓侍;