BOM/DOM

BOM

BOM：浏览器对象模型

一、全局默认对象是挂在windows上的；

二、Windows下的子对象：

（1）location 刷新

刷新的方法：window.location.reload( );

window.location.href               当前页面的 URL，能够获取，能够修改（页面跳转）。

window.location.hostname       web主机的域名

window.location.pathname       当前页面的路径和文件名

window.location.port               web主机的端口 （80 或 443）

window.location.protocol          所使用的 web 协议（http:// 或 https://）

window.location.search            请求参数（？后面的内容）

 

（2）window.navigator

navigator.appName        返回获取当前浏览器的名称。

navigator.appVersion      返回获取当前浏览器的版本号。

navigator.platform         返回当前计算机的操做系统。

navigator.userAgent      返回浏览器信息

 

（3）history

    history.go(1)       参数可写任意整数，正数前进，负数后退

    history.back( )    后退

history.forward( )   前进

 

（4）screen: 屏幕

window.screen.width   返回当前屏幕宽度(分辨率值)

window.screen.height   返回当前屏幕高度(分辨率值)

 

（5）window下的弹框方法

alert( )    prompt( )   confirm( )

 

（6）定时器

    超时定时器        间隔定时器

    setTimeout         setInterval

clearTimeout       clearInterval

 

（7）window.onload   页面加载

 

（8）window.onscroll  滚动条兼容

 

（9）window.onresize  浏览器窗口大小触发事件

DOM

DOM：文档对象模型

获取DOM节点：

1、 document.getElementById(id名)

2、getElementsByTagName(标签名)

获得的是一个集合（不止一个，是一堆）

 

 

3、getElementsByName( ) 经过Name值获取元素，返回值是集合，一般用来获取有name的input的值；

 注：一、不是全部的标签都有name值；

二、低版本的浏览器会有兼容问题；

4、 children属性，得到DOM元素的全部子元素；返回值是集合

5、parentNode属性，得到DOM元素的父级元素

6、getElementsByClassName(class名称)，可是：IE8如下不能用

7、ES5选择器：

document.querySelector (  )    一旦匹配成功一个元素，就不日后匹配了

document.querySelectorAll (  )    匹配到全部知足的元素, 支持IE8+；

 

 

属性获取和操做：

1、getAttribute( )获取元素的属性值，他是节点的方法！因此前缀必须是节点！

   document.getElementById( ID值 ).getAttribute( )

   什么是元素属性呢？ class就是元素属性，写在标签内的全部东西都是标签属性， 好比link的href好比img的src....都是元素属性。

   元素自带的属性能够直接用语法获取，可是自定义属性须要 getAttribute() 和 setAttribute( ) 方法。

2、setAttribute( )设置元素的属性。同上；

有些小小的兼容性问题，低版本IE不兼容；

设置的属性永远都是字符串类型

3、removeAttribute( )删除属性；同上；

兼容性问题同上；

 

 

DOM元素类型

（元素、文本和属性）

一、node.Name    节点名称

二、node.Type    1=元素节点、2=属性节点、3=文本节点

元素节点：标签名（大写）

属性节点：属性名称

文本节点：#text

 

适用场所：网页换肤、隔行变色。

 

操做DOM

做用：增、删、克隆节点

 

建立节点

var oDiv = document.createElement("div");

 

克隆节点

clonedNode = Node.cloneNode(boolean)    只有一个参数，传入一个布尔值，true表示深客隆，复制该节点下的全部子节点；false表示浅克隆，只复制该节点

 

插入节点

parentNode.appendChild(childNode);            将新节点追加到子节点列表的末尾

parentNode.insertBefore(newNode, targetNode);   将newNode插入targetNode以前

 

替换节点

parentNode.replaceChild(newNode, targetNode);   使用newNode替换targetNode

 

移除节点

parentNode.removeChild(childNode);           移除目标节点

node.parentNode.removeChild(node);       在不清楚父节点的状况下使用

 

childNode.remove( )                         IE不支持