JavaScript中的DOM有什么作用

本篇內(nèi)容介紹了“JavaScript中的DOM有什么作用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

DOM能干啥？

●　JavaScript 能夠改變頁(yè)面中的所有 HTML 元素

●　JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性

●　JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式

●　JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)

當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。 HTML DOM 模型被構(gòu)造為對(duì)象的樹(shù)：

查找元素方法：

1、直接查找：

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

●　getElementsByTagName():    通過(guò)標(biāo)簽名找到 HTML 元素(列表)

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

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

2、間接查找：

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

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

操作方法：

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

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

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

checkbox屬性：

checkbox.checked：true選中，false不選

tag標(biāo)簽操作：

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

每個(gè)HTML標(biāo)簽都有自己的屬性，屬性參照：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)    //添加標(biāo)簽}\\----------等同于var a_tag="<a class='a1' href='>click me</a>"

2、操作標(biāo)簽：

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

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

位置說(shuō)明：

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

3、標(biāo)簽樣式操作style：

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

4、位置操作

document.documentElement.offsetHeight    總文檔高度document.documentElement.clientHeight    當(dāng)前文檔占屏幕高度tag.offsetHeight    自身高度tag.offsetTop    距離上級(jí)定位高度tag.offsetParent 父定位標(biāo)簽tag.scrollTop 滾動(dòng)高度

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

事件：  

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

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

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

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

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

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

當(dāng)你使用 addEventListener() 方法時(shí),  JavaScript 從 HTML 標(biāo)記中分離開(kāi)來(lái)，可讀性更強(qiáng)， 在沒(méi)有控制HTML標(biāo)記時(shí)也可以添加事件監(jiān)聽(tīng)。

你可以使用 removeEventListener() 方法來(lái)移除事件的監(jiān)聽(tīng)。

語(yǔ)法：

element.addEventListener(event, function, useCapture);

事件類型：

onabort圖像的加載被中斷。onload一張頁(yè)面或一幅圖像完成加載。onblur元素失去焦點(diǎn)。onmousedown鼠標(biāo)按鈕被按下。onchange域的內(nèi)容被改變。onmousemove鼠標(biāo)被移動(dòng)。onclick當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。onmouseout鼠標(biāo)從某元素移開(kāi)。ondblclick當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。onmouseover鼠標(biāo)移到某元素之上。onerror在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。onmouseup鼠標(biāo)按鍵被松開(kāi)。onfocus元素獲得焦點(diǎn)。onreset重置按鈕被點(diǎn)擊。onkeydown某個(gè)鍵盤按鍵被按下。onresize窗口或框架被重新調(diào)整大小。onkeypress某個(gè)鍵盤按鍵被按下并松開(kāi)。onselect文本被選中。onkeyup某個(gè)鍵盤按鍵被松開(kāi)。onsubmit確認(rèn)按鈕被點(diǎn)擊。onunload用戶退出頁(yè)面。

鍵盤鼠標(biāo)事件：

altKey   返回當(dāng)事件被觸發(fā)時(shí)，"ALT" 是否被按下。button  返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。clientX返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。  clientY返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。 ctrlKey  返回當(dāng)事件被觸發(fā)時(shí)，"CTRL" 鍵是否被按下。    metaKey 返回當(dāng)事件被觸發(fā)時(shí)，"meta" 鍵是否被按下。relatedTarget返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。    screenX返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。    screenY  返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。    shiftKey   返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT" 鍵是否被按下。

小例子：

1、文本框默認(rèn)文字

<input id="i1" type="text" onfocus="foucs(this)" onblur="blurs(this)" value="請(qǐng)輸入關(guān)鍵字"/><script>    function foucs(th){        var v=th.value;        if (v=='請(qǐng)輸入關(guān)鍵字'){            th.value='';        }    }    function blurs(th){        var v=th.value;        if (v.length==0){            th.value='請(qǐng)輸入關(guān)鍵字';            th.style.color="gray";            th.style.border="1px solid red";        }    }</script>

2、添加標(biāo)簽

<div style="border: 1px solid red;" id="std"></div>function b_b(){    var std=document.getElementById('std');    var new_b="<input type='button' value='我是beforeBegin,在DIV前' />";    std.insertAdjacentHTML('beforeBegin',new_b);}function a_b(){    var std=document.getElementById('std');    var new_b="<input type='button' value='我是afterBegin,在DIV內(nèi)前' />";    std.insertAdjacentHTML('afterBegin',new_b);}function b_e(){    var std=document.getElementById('std');    var new_b="<input type='button' value='我是beforeEnd,在DIV后' />";    std.insertAdjacentHTML('beforeEnd',new_b);}function a_e(){       var std=document.getElementById('std');    var new_b="<input type='button' value='我是afterEnd,在DIV內(nèi)后'/>";    std.insertAdjacentHTML('afterEnd',new_b);}

3、展開(kāi)同時(shí)隱藏其它子菜單：

HTML：

<div id="left_menu" class="left_menu">    <div id='m1' class="main_menu" onclick="show_sub_menu(this)"><span>人員管理</span></div>    <div id='sm1' class="sub_menu">        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>            <li>6</li>            <li>7</li>        </ul>    </div>    <div  id='m2' class="main_menu" onclick="show_sub_menu(this)"><span>組別管理</span></div>    <div id='sm2' class="sub_menu">        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>            <li>6</li>            <li>7</li>        </ul>    </div></div>

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、標(biāo)簽提交：

<!-- DOM提交標(biāo)單!--><form id="f1" action="search.html">    <input id="input1" type="text"/>    <a onclick="a_submit()">提交吧</a></form><script>    function a_submit(){        document.getElementById('f1').submit();    }</script>

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

每類存儲(chǔ)為單獨(dú)的文件，其中js使用dom添加事件方法，可以html更簡(jiǎn)潔。

例子：鼠標(biāo)移動(dòng)表格行變色

HTML：

<table id='tb'>    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></table>

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<td_numbers;td++){        mytrs[td].onmouseover=function(){this.style.backgroundColor='red';};        mytrs[td].onmouseout=function(){this.style.backgroundColor='';};    }

css

.tb_style{    bacground-color:pink;}

6、詞法分析：形參--》函數(shù)體內(nèi)函數(shù),編譯時(shí)函數(shù)體內(nèi)的函數(shù)會(huì)分配 內(nèi)存地址，覆蓋形參。

function cifa(age){    console.log(age);        \\function age    age=22;    console.log(age);        \\22    function age(){};    console.log(age);        \\22}age(3)

“JavaScript中的DOM有什么作用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！