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不支持