操作DOM
DOM是基于文档编程的一套API接口。
由DOM Core， CSS-DOM，HTML-DOM组成,通过这些标准开发人员可以让网页真正的动起来，
比如动态的增加 修改 删除等。
DOC Core不是JavaScript的专属品，任何支持DOM的编程语言都可使用，
他的用途是不仅限于处理一种使用标记语言写出来的文档，如：HTML....getelementById等
都是他的组成部分。
HTML-DOM出现的比DOC Core早他提供了更简单的标记来描述各种HTML元素的属性
范围小，仅限于HTML
CSS-DOM 主要同于修改页面的样式。
节点和节点的关系
访问节点：
使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、getElementsByTagName()
根据层次关系访问节点：
节点属性
element属性
示例
//两种都写上 因为浏览器的兼容性不同
总结
访问节点
使用getElement系列方法访问指定节点
根据层次关系访问节点
节点属性
Element属性
节点信息
nodeName：节点名称 //元素节点显示为：标签名称 属性节点：属性名称 文本节点：#text
文档节点：#document
nodeValue：节点值 //对应的节点的值，文档和元素节点是不可以用的
nodeType：节点类型 //显示的是对应的类型，这个类型值是只读的，对应类型如下图：
操作节点
操作节点的属性
创建和插入节点
删除和替换节点
操作节点样式
获取元素的样式
操作节点的属性
语法：
getAttribute("属性名")
setAttribute("属性名","属性值")
创建和插入节点
创建节点
//deep(深度)
//如果深度为true是本身加所有子节点
//如果深度为false是只复制本身
删除和替换节点
??? parentNode ,createElement(),
style属性
语法：
HTML元素.style.样式属性＝"值"
示例：
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
示例
我的购物车
function over(){
document.getElementById("cart").style.backgroundColor="#ffffff";
document.getElementById("cart").style.zIndex="100";
document.getElementById("cart").style.borderBottom="none";
document.getElementById("cartList").style.display="block";
document.getElementById("cartList").style.position="relative";
document.getElementById("cartList").style.top="-1px";
function out(){
document.getElementById("cart").style.backgroundColor="#f9f9f9";
document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
document.getElementById("cartList").style.display="none";
}
//尽可能避免在脚本中出现对样式的修改 不然1,.影响对颜色的修改2，不利于维护
className属性 //提前写好样式而style是现写样式//优点是在修改样式时不需要关注脚本的变化
语法
HTML元素.className="样式名称"
示例
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
获取元素的样式
语法：
HTML元素.style.样式属性;
示例：
alert(document.getElementById("cartList").style.display);
//只能获取内联样式的属性值 无法获取内部样式表或外部样式表的属性值
//通常工作中样式和内容是分离的，所以不能使用这种方式来获取样式属性值
HTML中元素属性
语法
总结