1.DOM分類

? DOM:文檔對象模型，提供了添加、移動、該變、或移除的結構文檔的方法和屬性

DOM Core：鎖定一批標簽，看成dom對象，進行業務分析
HTML DOM ：把標簽和屬性看成是一個DOM，即HTML 文檔對象
CSS DOM ：style.cssText
　　　　　　style.屬性名：

2.? HTML文檔中的每個成分都是一個節點

1〉整個文檔時一個文檔節點

2〉每個HTML是一個元素節點

3〉每個HTML中的文本是一個文本節點

3. ??獲取當前節點的子節點集合childNodes，寫的時候有空格的話會影響結果，所以應該先獲取節點信息，然后判斷節點類型（nodeType），1：element 元素節點 ；2：attr ?屬性節點；? ?3：#text 文本節點；

例：

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

4.　創建和插入節點　

?1〉A(父級對象).appendChild(dom);?

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

例：

window.οnlοad=function(){
?　　　　　　　　　　//動態的構建一個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.替換和刪除節點
replaceChild()

　例：

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

6.操作節點樣式

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

2〉一次設置n個樣式：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；返回他與父級邊框之間的距離，但是父級元素必須有相對定位，否則返回的是本身與瀏覽器邊框之間的距離；

例：

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

　2〉scrollTop：返回匹配元素的滾動條的垂直位置

例：

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屬性值"; ?規則：配合樣式表使用

例：

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

　　

轉載于:https://www.cnblogs.com/cn-930621/p/7056537.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。