[js API] DOM基础知识，节点操作

js API学习day2

通过className改变元素样式：
element.className = ’ ‘；会覆盖以前的类名
想保留原来的类名：
element.calssName = ‘原类名 新类名’
改变body的背景样式：
document.body.style.background = ‘url(’+xxx+’)’

---

补充：
localStorage：作为本地存储
localStorage.setItem(‘名’,值)
localStorage.getItem(‘名’)
localStorage.removeItem(‘名’)

给单选框添加监听事件
check.addEventListener('change ',function(){//添加监听事件
if(this.checked){}
})

节点描述

节点至少拥有nodeType、nodeName、nodeValue三个基本属性。
元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3(文本节点包括文字、空格、换行等)
主要操作元素节点

父节点

子节点.parentNode ：获得该子节点的最近的父节点

子节点

父节点.childNodes ：得到的是一个集合包含了所有的子节点，包括元素节点，文本节点等。
父节点.children：只想获得里面的元素节点
父节点.firstChild：获得第一个子节点，不管是文本节点还是其他
父节点.firstElementChild：获得第一个元素节点(但是只有IE9以上才支持)
lastChild同理

实际开发使用：
子节点的第一个：父节点.children[0]
子节点最后一个：父节点.children[父节点.children.length - 1]

兄弟节点

节点.nextSibing：下一个兄弟节点，包含元素节点或者文本节点等等
节点.nextElementSibing：下一个兄弟元素节点，找不到返回Null
节点.previousSibing：上一个兄弟节点
节点.previousElementSibing：上一个兄弟元素节点(IE9以上支持)

创建节点（创建后需添加才会出现）

document.createElement(‘tagName’)
document.write()：如果页面文档流加载完毕，再调用这句话会导致页面重绘，原先页面消失

添加节点

父级.appendChild(子级)：在后面添加
父级.insertBeforeChild(子级,指定子元素)：在指定子元素前添加子元素

删除节点

父节点.removeChild(子节点)

拷贝节点（拷贝后需要添加节点）

节点.clonNode()：括号为空或false，为浅拷贝，只复制标签，不复制内容。为true的话，深拷贝，既复制标签也复制内容

小tips

链接点击后不跳转：href=“javascript:;”