JavaScript之DOM基礎——我想和你好好談談


小編步入BS的學習階段有段時間了,學習拖拖拉拉,需要好好整理之前學習到的知識。回顧JavaScript 中的知識點之DOM(Document ObjectModel)文檔對象模型,針對HTML和XML文檔的API (應用程序接口)。

W3C組織推薦的處理可擴展標志語言的標准編程接口。

             一.DOM 介紹

             DOM 中的三個字母:D(文檔)理解為D(文檔)可以理解為整個Web 加載的網頁文檔;O(對象)可以理解為類似 window 對象之類的東西,可以調用屬性和方法,這里我們說的是document對象;M(模型)可以理解為網頁文檔的樹型結構。

              DOM的分級:根據W3CDOM規范,DOM是HTML與XML的應用編程接口(API),DOM將整個頁面映射為一個由層次節點組成的文件。有1級、2級、3級共3個級別。

PS:IE 中的所有 DOM對象都是以 COM 對象的形式實現的,這意味着 IE 中的 DOM可能會和其他瀏覽器有一定的差異。

節點

根據DOM,HTML 文檔中的每個成分都是一個節點。

DOM是這樣規定的:

整個文檔是一個文檔節點

每個HTML 標簽是一個元素節點

包含在HTML 元素中的文本是文本節點

每一個HTML 屬性是一個屬性節點

注釋屬於注釋節點


PS:從上圖的樹型結構,我們理解幾個概念,html標簽沒有父輩,沒有兄弟,所以 html 標簽為根標簽。head 標簽是 html 子標簽,meta 和 title標簽之間是兄弟關系。如果把每個標簽當作一個節點的話,那么這些節點組合成了一棵節點樹。

節點樹

節點分為三類:

  1. 元素節點: 就是標簽<div></div>
  2. 文本節點:就是標簽內的純文本,  “測試Div”
  3. 屬性節點: 就是標簽的屬性。Id="box"


            二.查找元素

             W3C提供了比較方便簡單的定位節點的方法和屬性,以便我們快速的對節點進行操作。分別為:getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

一個頁面只能允許一個ID 表示唯一性

getElementById 建議區分大小寫,以免不兼容

如果是IE5.0 不兼容getElementById,可以做個判斷


          三.DOM節點

node 節點屬性

節點可以分為元素節點、屬性節點和文本節點,而這些節點又有三個非常有用的屬性,分別為:nodeName、nodeType和 nodeValue。

這些節點的存在不單單是可以方便查找,同時也可以創建節點、復制節點、插入節點、刪除節點和替換節點。

 

 dome

DOM 在操作生成HTML 上是比較簡明的 我們可以用<table >標簽可以用DOM來創建
在一個表內只能有一個表尾

/**/
window.onload =function(){
//alert(Node);
alert(typeof Node);
}
window.onload =function(){
//alert(document);
alert(document.childNodes[0].nodeName);
//alert(typeof Node);
}

window.onload=function(){
var box=document.getElementById('box');
box.outerHTML='<b>123</b>';
alert(document.getElementById('box'));
}

//使用DOM 來創建一個標簽
window.onload=function (){
var table =document.createElement('table');

table.width=300;//table.setAtrribute('width',300);
table.border=1;

var caption=document.createElement('caption');
table.appendChild(caption);
//caption.innerHTML='人員表';
var captionTitle =document.createTextNode('人員表');
caption.appendChild(captionTitle);

var thead=document.createElement('thead');
table.appendChild(thead);

var tr=document.createElement('tr');
thead.appendChild(tr);

var th=document.createElement('th');
tr.appendChild(th);
th.appendChild(document.createTextNode('數據一'));

var th2=document.createElement('th');
tr.appendChild(th2);
th2.appendChild(document.createTextNode('數據二'));


document.body.appendChild(table);
}

//使用DOM去獲取表格
顯示效果:

表一是在<body></body>節點下添加<table>標簽實現的。


 

 小編感言:

有些知識需要注意:

1.window對象作為全局對象,也就是說你可以通過window來訪問全局對象。

 

 屬性在對象下面以變量的形式存放,在頁面上創建的所有全局對象都會變成window對象的屬性。

方法在對象下面以函數的形式存放,因為左右的函數都存放在window對象下面,所以他們也可以稱為方法。

2.DOM為web文檔創建帶有層級的結果,這些層級是通過node節點組成,這里有幾種DOM node類型,最重要的是Element, Text,Document。

 

 Element節點在頁面里展示的是一個元素,所以如果你有段落元素(<p>),你可以通過這個DOM節點來訪問。

 Text節點在頁面里展示的所有文本相關的元素,所以如果你的段落有文本在里面的話,你可以直接通過DOM的Text節點來訪問這個文本

 Document節點代表是整個文檔,它是DOM的根節點。

3.每個引擎對DOM標准的實現有一些輕微的不同。例如,Firefox瀏覽器使用的Gecko引擎有着很好的實現(盡管沒有完全遵守W3C規范),但IE瀏覽器使用的Trident引擎的實現卻不完整而且還有bug,給開發人言帶來了很多問題。



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com