DOM&BOM

DOM:DOM 全稱是 Document Object Model，也就是文檔對象模型。DOM 是 W3C（萬維網聯盟）的標準。

DOM 定義了訪問 HTML 和 XML 文檔的標準：「W3C 文檔對象模型 （DOM） 是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。」

W3C DOM 標準被分爲 3 個不一樣的部分：

• 核心 DOM - 針對任何結構化文檔的標準模型
• XML DOM - 針對 XML 文檔的標準模型
• HTML DOM - 針對 HTML 文檔的標準模型

 

一、DOM起源（recourse）:在1998年，W3C發佈了第一級的DOM規範。這個規範容許訪問和操做HTML頁面中的每個單獨的元素。全部的瀏覽器都執行了這個標準，所以，DOM的兼容性問題也難覓蹤跡了。

二、DOM方法：

可經過 JavaScript （以及其餘編程語言）對 HTML DOM 進行訪問。

全部 HTML 元素被定義爲對象，而編程接口則是對象方法和對象屬性。

方法是您可以執行的動做（好比添加或修改元素）。

屬性是您可以獲取或設置的值（好比節點的名稱或內容）。

三、DOM內容：來自於w3school

一、經過 HTML DOM，JavaScript 可以訪問 HTML 文檔中的每一個元素。

二、經過 HTML DOM，您可以訪問 HTML 對象的樣式對象。

三、HTML DOM 容許您在事件發生時執行代碼。

當 HTML 元素」有事情發生「時，瀏覽器就會生成事件：

• 在元素上點擊
• 加載頁面
• 改變輸入字段

 

四、DOM應用：

---------------------

做者：zhaoke_930325

來源：CSDN

原文：https://blog.csdn.net/zhaoke_930325/article/details/75635179

版權聲明：本文爲博主原創文章，轉載請附上博文連接！

查找元素、改變HTML

樣式、使用事件（在元素上點擊、加載頁面、改變輸入字段）

 

一、子節點的刪除能夠用’javascript:;’來做爲刪除選項：

 

for (var i = 0; i < aA.length; i++) {

            aA[i].onclick = function(){

                oUl.removeChild(this.parentNode);

            };

        }

二、childNodes只支持IE6-8，且包括文本節點和元素節點，而children只包括元素，不包括文本節點。

三、子節點指的是隻算第一層的節點，而內層節點不算。

四、parentNode：當前的父節點，是獲取用來定位的父級。

五、setAttribute（名稱，值）方法添加指定的屬性，併爲其賦指定的值。

若是這個指定的屬性已存在，則僅設置/更改值。getAttribute用來獲取屬性。

 

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

六、獲取元素屬性的方法：

 

function getStyle(oParents,sClass)

        {

            var aEle = oParents.getElementsByTagName('*');

            var aResult[];

            for (var i = 0; i < aEle.length; i++) {

                if(aEle[i].className=sClass)

                {

                    aResult.push(aEle[i]);

                }

            }

            return aResult;

        };

七、父級調用的方法有：

.appendChild(子節點)增長子節點，過程是先把元素從原有的父級刪掉，再添加到新的父級；.insertBefore（子節點，在誰以前）；.removeChild（子節點）移除子節點。

八、在DOM文檔中能夠經過 document.createDocumentFragment();來建立表格，經過調用 .tBodies[i]取body，.rows[i]取行，.cells[i]取單元格，.toLowerCase()轉爲小寫，用於搜索時不區分大小寫，.search(‘str’)值爲位置，當值等於 -1 時，爲沒有找到（模糊搜索），.split（‘str’）切分字符串。

九、.sort（）是Arr數組特有的方法，輸入時失去焦點時的驗證，onkeyup onblur，

提交檢查onsubmit。

 

BOM:

BOM 是 Browser Object Model，瀏覽器對象模型。簡單地說，BOM和DOM同樣，只不過DOM操做的是HTML中的元素，BOM是瀏覽器的API、操做的是瀏覽器（即控制瀏覽器的行爲）

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。全局變量是 window 對象的屬性。全局函數是 window 對象的方法。甚至文檔對象（HTML DOM）也是window對象的屬性： 一些經常使用的Window方法：可使用兩個屬性來肯定瀏覽器窗口的大小。兩個屬性都以像素爲單位返回大小：

• window.innerHeight - 瀏覽器窗口的內部高度（以像素爲單位）
• window.innerWidth - 瀏覽器窗口的內部寬度（以像素爲單位）
• 其餘一些方法：
• window.open（） - 打開一個新窗口
• window.close（） - 關閉當前窗口
• window.moveTo（） - 移動當前窗口
• window.resizeTo（） - 表示當前窗口

一、window.screen對象包含有關用戶屏幕的信息

二、screen.width屬性返回訪問者屏幕的寬度（以像素爲單位）。

三、screen.height屬性返回訪問者屏幕的高度（以像素爲單位）

四、screen.availWidth屬性返回訪問者屏幕的寬度（以像素爲單位），減去Windows任務欄等界面功能

五、screen.availHeight屬性返回訪問者屏幕的高度（以像素爲單位），減去Windows任務欄等界面功能。

六、screen.colorDepth屬性返回用於顯示一種顏色的位數。全部現代計算機都使用24位或32位硬件進行顏色分辨。24位= 16,777,216種不一樣的「真彩色」。32位= 4,294,967,296種不一樣的「深色」

七、screen.pixelDepth屬性返回屏幕的像素深度。 

八、window.location對象可用於獲取當前頁面地址（URL）並將瀏覽器重定向到新頁面。