function $(names){ //封装获取id元素
return document.getElementById(names);
}
var box = $('box'); //传参
var sp = $('sp');
var sps = $('sps');
console.log(box.firstElementChild);//打印第一个子元素
console.log(box.lastElementChild);//打印最后一个子元素
console.log(box.childElementCount);//打印子元素的个数
console.log(box.previousElementSibling);//打印前一个同辈元素
console.log(box.children);//获取元素子元素,返回一个数组
console.log(sp.nextElementSibling);//打印下一个元素
console.log(sps.previousSibling);//打印上一个节点
sp.classList.add('nn');//为元素增加类名
sp.classList.remove('aa');//为元素删除类名
console.log(sp.classList.contains('aa'));//检测该类名是否存在,返回布尔值
2
var box = document.createElement('div');//创建一个新的div节点并取变量名
var spa = document.createElement('span');//创建一个新的span节点并var变量名
var newboxtext = document.createTextNode('hello world');//创建文本节点
box.appendChild(newboxtext);//把文本节点插入div里
box.classList.add('aa');//给div取一个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');//创建一个新的h1标节点
wrap.insertBefore(h1,box);//wrap为在什么地方插入;h1为想插入的元素;box为插入到这个元素前;
var h2 = document.createElement('h2');
wrap.replaceChild(h2,h1);//替换节点。h2为新节点,h1为要替换的节点;(简而言之:h1替换为h2)
wrap.removeChild(spa);//删除节点。该方法不是在删除的节点上调用,而是在父节点上调用。
var uls = document.getElementById('uls');//获取ul节点
var ss = uls.cloneNode(false);//克隆变量名为uls的元素;true为全部克隆;false为只克隆这个元素
wrap.appendChild(ss);//把克隆的元素插入到div里;