BOM和DOM的基本操作

Bom和Dom
Bom：浏览器对象模型

Bom提供了独立于内容而与浏览器窗口进行交互的对象

Window对象是bom的顶层对象

对象：document frames history location navigator screen

网页链接

Location .href = “”;

Window.location = “”;

    History .back()后退一个网页                                                                                       

    History.go(num)：打开历史列表的中一个网址，

    History.go(0):刷新页面

History.Forward():前进一个网页

Navigator.useAgent:用户代理信息，可以获取浏览器及操作系统信息

定时器

1、 setInterval（）间歇式计时器

2、 clearInterval（）取消定时器

3、 setTimeout()可取消有setTimeout()方法设置的定时

window.onscroll事件

Document.documentElement.scrollTop代表垂直的滚动条，向下滚动的距离

兼容写法

document.documentElement.scrollTop || document.body.scrollTop

                              Dom

Dom:文档对象模型

作用：通过JavaScript操作Dom，可以重构整个html文档

Dom的基本操作（查询，修改，创建，删除）

查询

getElementById（）

getElementsByName():获取相同名称的节点列表

getElementsByClassName()获取相同class属性的节点列表

getElementsByTagName():获取标签节点

document.body()获取body的方法

querySelector:通过选择器获取一个元素

querySelectorAll:获取一组元素

创建节点

Document.createElement():创建一个元素节点

CreateTextNode():创建一个文本节点

修改

父节点.replaceChild(new,old)

删除

父节点.removeChild(nodeChild)删除节点

追加节点

AppendChild()；向指定节点的子节点列表追加新的节点

insertBefore(new,old);

cloneNode();只克隆节点，不包含内容

cloneNode(true);内容也被克隆

节点分为 元素节点 属性节点 文本节点

nodeName 元素名称 属性名称 #text

nodeType 1 2 3

nodeValue null 属性值 文本内容

自定义属性：程序员自己给标签添加的属性

GetAttitude():获取特定元素节点属性的值，自定义属性的值

setAttribute():可以修改或添加元素节点的属性

removeAttribute():删除属性

outerHTML:设置或获取对象及其内容的HTML形式

innerHTML：设置或获取位于对象起始和结束的标签文本，包含标签

innerText:不包含标签

删除空白节点

Function deleteSpace(node){

     Var childs = node.childNodes;

     For(var  i =0;i < childs.length;i ++){

         If(childs[i].nodeType  === 3&& / ^\s+$/.test(childs[i].nodeValue)){

         node.removeChild(childs[i]);

}

Return node;

} 

}

高级选取

firstChild

lastChild

parentChild

previousSibling//上一个兄弟节点

nextSibling//下一个兄弟节点

兼容

获取非行内样式

function getstyle(obj,attr){

   return obj.currentStyle ?obj.currentStyle[attr]:obj.getComputedStyle(obj,1)[attr];
   }Dom