JavaScript操作BOM
1.什么是BOM
BOM：Document Object Model（文档对象模型）
2.BOM分为：1.BOM Core 2.HTML-BOM 3.CSS-BOM
3.节点和节点关系（结构排序之后像家族谱一样判断关系）
文档：dpcument
根节点：<html>
(父节点)<html> (父节点)<body>
(子节点)<title> (子节点) <img> <h1> <p>
4. 使用getElement方法访问指定节点 、 根据层次关系访问节点
1.getElementById()
2.getElementsByName()
3.getElementsByTagName()
5.节点的属性有：(使用getElement方法调用)
1.parentNode
2.chileNodes
3.firstChlid (第一个子节点)
4.lastChild (最后一个子节点)
5.nextSibling (下一个)
6.previousSibling (上一个)
6.根据层次关系访问节点
1.firstElementChild
2.lastElementChild
3.nextElementSibling
4.previousElementSibling
示例：
document.getElementById("").firstElementChild.innerHTML || document.getElementById("").fristChild.innerHTML;
7.节点信息
1.nodeName 节点名称
2.nodeValue 节点值
3.nodeType 节点类型
8.操作节点
1.操作节点的属性
示例：
getAttribute("属性名");
setAttribute("属性名","属性值");
2.创建和插入节点
createElement(aa) 创建一个标签名为aa的新元素节点
A.appendChild(B) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
3.删除和替换节点
removeChild(node) 删除指定的节点
replaceChild(newNode,oldNode) 用其他节点替换指定的节点
示例：
var aa = document.getElementByld("first");
delNode.parentNode.removeChild(delNode);
4.操作节点样式
如何实现鼠标移至表格某一行背景颜色高亮显示
改变样式的属性
1.style属性
HTML元素.style.样式属性="值";
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
document.getElementByld("wrap").style.color="# fff";
document.getElementByld("wrap").style.backgroundColor="# ccc";
隔行变色
//鼠标进入，改变颜色
trArr[i].onmouseover = function(){
color = this.style.backgroundColor;
this.style.backgroundColor = "# fff";
}
//鼠标移开，恢复颜色
trArr[i].onmouseout = function(){
this.style.backgroundColor = color;
}
2.className属性
HTML元素.className="样式名称";
示例：
document.getElementByld("cart").className="cartOver";
5.获取元素的样式
1.HTML元素.style.样式属性;
alert(document.getElementByld("cartList").style.display);
2.document.defaultView.getComputedStyle(元素,null).属性;
alert(document.defaultView,getComputedStyle(cartList,null).display);
3.HTML元素.currentStyle.样式属性;(兼容IE浏览器)
alert(document.getElementByld("cartList").currentStyle.display);
9.HTML元素属性应用
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平高度
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
示例：
标准浏览器:
document.documentElement.scrollTop;
Chrome：
document.body,scrollTop;
