1.DOM分類

? DOM:文檔對(duì)象模型，提供了添加、移動(dòng)、該變、或移除的結(jié)構(gòu)文檔的方法和屬性

DOM Core：鎖定一批標(biāo)簽，看成dom對(duì)象，進(jìn)行業(yè)務(wù)分析
HTML DOM ：把標(biāo)簽和屬性看成是一個(gè)DOM，即HTML 文檔對(duì)象
CSS DOM ：style.cssText
　　　　　　style.屬性名：

2.? HTML文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)

1〉整個(gè)文檔時(shí)一個(gè)文檔節(jié)點(diǎn)

2〉每個(gè)HTML是一個(gè)元素節(jié)點(diǎn)

3〉每個(gè)HTML中的文本是一個(gè)文本節(jié)點(diǎn)

3. ??獲取當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)集合childNodes，寫的時(shí)候有空格的話會(huì)影響結(jié)果，所以應(yīng)該先獲取節(jié)點(diǎn)信息，然后判斷節(jié)點(diǎn)類型（nodeType），1：element 元素節(jié)點(diǎn) ；2：attr ?屬性節(jié)點(diǎn)；? ?3：#text 文本節(jié)點(diǎn)；

例：

window.οnlοad=function(){// 能力檢測(cè) 查看瀏覽器內(nèi)核引擎內(nèi)有沒有某個(gè)屬性var str=document.getElementById("box");//能力檢測(cè)var str1=str.childNodes;for ( var i=0;i<str1.length;i++) {if (str1[i].nodeType==1) {alert(str1[i].innerHTML);}}};

4.　創(chuàng)建和插入節(jié)點(diǎn)　

?1〉A(chǔ)(父級(jí)對(duì)象).appendChild(dom);?

2〉? insertBefore(A,B) ?表示將A插入到B對(duì)象之前

例：

window.οnlοad=function(){
?　　　　　　　　　　//動(dòng)態(tài)的構(gòu)建一個(gè)divvar str=document.createElement("div");str.innerHTML="我是div";var bo=document.getElementById("mine");var myul=document.getElementById("box");bo.insertBefore(str,myul);var ss=document.getElementById("first");ss.style.background="red";};

　

5.替換和刪除節(jié)點(diǎn)
replaceChild()

　例：

window.οnlοad=function(){ //等待所有的html標(biāo)簽，img。css。js加載完畢后執(zhí)行//刪除節(jié)點(diǎn) ，A.removeChild(子元素對(duì)象)/* var dom=document.getElementById("first");var box=document.getElementById("box");box.removeChild(dom); *///替換節(jié)點(diǎn)};function myreplace(){var myfirst=document.getElementById("first");var dom=document.createElement("li");dom.innerText="打游戲";var box=document.getElementById("box");box.replaceChild(dom,myfirst);}

6.操作節(jié)點(diǎn)樣式

1〉dom.style.屬性名="屬性值";規(guī)則：碰到有-的，去掉-，后面的第一個(gè)字母變成大寫；

2〉一次設(shè)置n個(gè)樣式：dom.style.cssText="屬性名1:屬性值1;屬性名2:屬性值2";

例：

var dom=document.getElementById("first");
/* dom.style.屬性名="屬性值";
　　　　　　　　　　 dom.style.backgroundColor="pink";dom.style.fontSize="30px"; */dom.style.cssText="background-color:pink;font-size:30px;";};

7. 1〉offsetLeft：類似于css中的margin-left；返回他與父級(jí)邊框之間的距離，但是父級(jí)元素必須有相對(duì)定位，否則返回的是本身與瀏覽器邊框之間的距離；

例：

window.οnlοad=function(){var small=document.getElementById("small");var left=small.offsetLeft;alert(left);};

　2〉scrollTop：返回匹配元素的滾動(dòng)條的垂直位置

例：

window.οnscrοll=function(){var height=document.documentElement.scrollTop||document.body.scrollTop;document.title=height;var bigBox=document.getElementById("big");bigBox.style.cssText="margin-top:"+height+"px";};

8.dom.className="class屬性值"; ?規(guī)則：配合樣式表使用

例：

window.οnlοad=function(){ //等待所有的html標(biāo)簽，img。css。js加載完畢后執(zhí)行};function addStyle(){var dom=document.getElementById("first");dom.className="mystyle";}

　　

轉(zhuǎn)載于:https://www.cnblogs.com/cn-930621/p/7056537.html

總結(jié)

以上是生活随笔為你收集整理的javascript-----DOM文档对象模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。