JavaScript中DOM模型是什么？怎么用？可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司主營成都網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,成都APP應用開發(fā),成都h5微信小程序開發(fā)搭建,成都網(wǎng)站營銷推廣歡迎成都等地區(qū)企業(yè)咨詢

DOM能干什么

●　JavaScript 能夠改變頁面中的所有 HTML 元素

●　JavaScript 能夠改變頁面中的所有 HTML 屬性

●　JavaScript 能夠改變頁面中的所有 CSS 樣式

●　JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?/p>

當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹：

查找元素方法：

1、直接查找：

●　getElementByid():    通過 id 找到 HTML 元素

●　getElementsByTagName():    通過標簽名找到 HTML 元素(列表)

●　getElementsByClassName():    通過類名找到 HTML 元素(列表)

●　getelementsByName():    通過name屬性找到HTML元素(列表)

2、間接查找：

      parentNode  父節(jié)點
    childNodes     所有子節(jié)點
    firstChild        第一個子節(jié)點
    lastChild     最后一個子節(jié)點
    nextSibling     下一個兄弟節(jié)點
    previousSibling   上一個兄弟節(jié)點
    parentElement    父節(jié)點標簽元素
    children          所有子標簽
    firstElementChild   第一個子標簽元素
    lastElementChild   最后一個子標簽元素
    nextElementtSibling    下一個兄弟標簽元素
    previousElementSibling   上一個兄弟標簽元素

3、添加刪除節(jié)點和元素：

操作方法：

innerText    文本，指定ID下所有文本的拼接，去除間隔的HTML元素
outerText  寫模式下，替換所有子元素
innerHTML    會根據(jù)指定的值創(chuàng)建新的 DOM 樹，然后用這個 DOM 樹完全替換調(diào)用元素原先的所有子節(jié)點。
outerHTML    寫模式下，新的元素替換原有的 DOM 樹
value         屬性可設置或返回密碼域的默認值。獲取文本框的值。

Class屬性操作(CSS樣式表名)：

className 獲取所有類名
classList.remove(cls) 刪除指定類
classList.add(cls)  添加類

checkbox屬性：

checkbox.checked：true選中，false不選

tag標簽操作：

1、createElement()創(chuàng)建標簽：

每個HTML標簽都有自己的屬性，屬性參照：https://www.w3school.com.cn/jsref/dom_obj_anchor.asp

function append_tag(){
   var a = document.createElement('a')
   var cur = document.getElementById('dd')
   a.innerHTML='click me'
   a.href='http://www.baidu.com'
   a.className='a1'
   cur.appendChild(a)    //添加標簽}\\----------等同于
var a_tag="click me"

2、操作標簽：

insertAdjacentText('位置',obj) 在指定的地方插入文本內(nèi)容，如果是HTML對象會以文本形式顯示出來

insertAdjacentHTML('位置',obj) 在指定的地方插入html內(nèi)容

位置說明：

beforeBegin：標簽起始位置前（標簽前）
afterBegin：標簽起始位置后（標簽內(nèi)）
beforeEnd：標簽結(jié)束位置前（標簽內(nèi)）
afterEnd：    標簽結(jié)束位置后（標簽外）

3、標簽樣式操作style：

var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

4、位置操作

document.documentElement.offsetHeight    總文檔高度
document.documentElement.clientHeight    當前文檔占屏幕高度
tag.offsetHeight    自身高度
tag.offsetTop    距離上級定位高度
tag.offsetParent 父定位標簽
tag.scrollTop 滾動高度

/*
    clientHeight -> 可見區(qū)域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可見區(qū)域：height + padding + border
    offsetTop    -> 上級定位標簽的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滾動高度
    特別的：
        document.documentElement代指文檔根節(jié)點
*/

事件：  

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

你可以向一個元素添加多個事件句柄。

你可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。

你可以向任何 DOM 對象添加事件監(jiān)聽，不僅僅是 HTML 元素。如： window 對象。

addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。

當你使用 addEventListener() 方法時,  JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以添加事件監(jiān)聽。

你可以使用 removeEventListener() 方法來移除事件的監(jiān)聽。

語法：

element.addEventListener(event, function, useCapture);

事件類型：

鍵盤鼠標事件：

小例子：

1、文本框默認文字

2、添加標簽  

function b_b(){
    var std=document.getElementById('std');
    var new_b="";
    std.insertAdjacentHTML('beforeBegin',new_b);}
function a_b(){
    var std=document.getElementById('std');
    var new_b="";
    std.insertAdjacentHTML('afterBegin',new_b);}
function b_e(){
    var std=document.getElementById('std');
    var new_b="";
    std.insertAdjacentHTML('beforeEnd',new_b);}

function a_e(){   
    var std=document.getElementById('std');
    var new_b="";
    std.insertAdjacentHTML('afterEnd',new_b);}

3、展開同時隱藏其它子菜單：

HTML：

    
人員管理
    

        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
        
    

    
組別管理
    

        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
        
    

js：

function show_sub_menu(th){
    var parentId = th.id;
    var childId='s'+parentId;
    var childE=document.getElementById('left_menu').children;
    for (var s in childE){
        var e=childE[s].classList;
        console.log(e);
        if (e){
            if (childE[s].id==childId){
                childE[s].classList.add('show');
            }else{
                childE[s].classList.remove('show');
            }
         }
    }}

4、標簽提交：

    
    提交吧

5、html、css、js頁面分離：生產(chǎn)環(huán)境的寫法。

每類存儲為單獨的文件，其中js使用dom添加事件方法，可以html更簡潔。

例子：鼠標移動表格行變色

HTML：

    
1
1
1
1
1
    
1
1
1
1
1
    
1
1
1
1
1
    
1
1
1
1
1
    
1
1
1
1
1

JS:給table添加屬性和class

 var t=document.getElementById('tb').classList;
    t.add('tb_style');
    
    var mytrs=document.getElementsByTagName('tr');
    var td_numbers=mytrs.length;
    for (var td=0;td
css
.tb_style{
    bacground-color:pink;}
6、詞法分析：形參--》函數(shù)體內(nèi)函數(shù),編譯時函數(shù)體內(nèi)的函數(shù)會分配 內(nèi)存地址，覆蓋形參。
function cifa(age){
    console.log(age);        \\function age
    age=22;
    console.log(age);        \\22
    function age(){};
    console.log(age);        \\22}age(3)
看完上述內(nèi)容，你們對JavaScript中的DOM模型有進一步的了解嗎？如果還想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。
            
            
                        

            網(wǎng)站標題：JavaScript中DOM模型是什么？怎么用            

            文章鏈接：http://weahome.cn/article/jpgdpd.html