JavaScript操作DOM对象

程序调试
f12开发者工具
f10 单步调试 f11单步调试进入函数内容
Chrome开发人员工具：
八大模块：Elements：用于查看和编辑当前页面中的HTML和CSS元素
Console：用于显示脚本中所输出的调试信息，或运行测试脚本
Console.log（）控制台输出提示
Sources:用于查看和调试当前页面所加载的脚本的源文件
Network:用于查看HTTP请求的详细信息
TimeLine:用于查看脚本执行时间、页面元素渲染时间等信息
Profiles:用于查看CPU执行时间与内存占用等信息
Resource:用于查看当前页面所请求的资源文件
Audits:用于优化前端页面，加速网页加载速度等
DOM
分类：DOM Core、HTML-DOM、CSS-DOM
节点和节点关系：
文档节点、元素节点、文本节点、属性节点、注释节点
关系：父节点、子节点、相邻节点…
节点属性：parentNode、childNode、firstNode、lastChild、nextSibling下一个节点、previousSibiling上一个节点
由于兼容不同空行可能也会被认为为一个节点因此需要element属性
element属性：firstElementChild、lastElementChild、nextElementSibling、previousElementSibling
节点信息： nodeName节点名称 nodeValue节点值
nodeType节点类型：
元素 1 属性 2 文本 3 注释 8 文档 9

操作节点和属性：
getAttribute()获取属性的值
serAttribute(属性名,属性值) 设置属性的值
创建和插入节点：
createElement()创建节点
A.appendChild(B)把B节点追加至A节点的末尾
insertBefore(A,B)把A节点插入B节点之前
cloneNode()复制某个指定的节点
删除和替换节点：
removeChild()删除节点 replaceChild(newNode,oldNode)用其他的节点替换指定的节点
操作节点样式：
获取或设置内联样式的属性值
HTML元素.style.样式属性=”值” ;
设置或返回类样式
HTML元素.className=”样式名称”;
兼容：HTML元素.currentstyle.样式属性;(IE)
document.defaultView.getComputedStyle(元素,null).属性;