dom（document object model）

　　-文檔對象模型，包含整個頁面所有功能，可以通過調(diào)用方法的形式來操作頁面，所以js和dom結(jié)合在一起可以寫一些邏輯性的語言

　　　　dom的對象　　dom有5個對象

　　　　　　document　　　　文檔對象(重要),文檔即頁面

　　　　　　element object　　標(biāo)簽對象(重要)

　　　　　　text object　　　　文本對象

　　　　　　attrbute object　　屬性對象

　　　　　　comment object　　注釋對象

　　　　dom定位（在后續(xù)ui測試過程中，用selenium定位不到元素時可以用dom定位）

　　　　　　通過id定位(帶s取所有)

　　　　　　　　document.getElementsById('123')

　　　　　　通過class定位(帶s取所有)

　　　　　　　　document.getElementsByClassName('inner')

　　　　　　通過標(biāo)簽名定位(帶s取所有)

　　　　　　　　document.getElementsByTagName('input')

　　　　　　通過name值定位(帶s取所有)

　　　　　　　　document.getElementsByName('xxxx')

　　　　　　通過層級關(guān)系定位

　　　　　　　　var tmp = document.getElementById('inner1')　　把查找id賦值給tmp變量

　　　　　　　　tmp.nodename　　　　　　　　　　　　　　　? 標(biāo)簽名

　　　　　　　　tmp.nodetype　　　　　　　　　　　　　　　　內(nèi)置標(biāo)簽類型號,沒什么用

　　　　　　　　tmp.nodevalue　　　　　　　　　　　　　　　? 標(biāo)簽value值,默認(rèn)為空

　　　　　　　　tmp.firstchird　　　　　　　　　　　　　　　　 第一個對象內(nèi)容,可以是換行符或縮進(jìn),存在文檔中的內(nèi)容都可以會被返回

　　　　　　　　tmp.lastchild　　　　　　　　　　　　　　　　? 最后一個對象內(nèi)容

　　　　　　　　tmp.childNodes　　　　　　　　　　　　　　　 所有對象內(nèi)容

　　　　　　　　tmp.parenNode　　　　　　　　　　　　　　　 節(jié)點(diǎn)(元素)的父節(jié)點(diǎn),直接使用parentElement,以上方法不實(shí)用

　　　　　　　　

　　　　　　　　tmp.chirdren　　　　　　　　　　　　　　　　 ?其變量的子元素，tmp.chirdren[0]如果有多個值取其下標(biāo)

　　　　　　　　tmp.firstElementChild　　　　　　　　　　　　　取其第一個元素

　　　　　　　　tmp.lastElementChild　　　　　　　　　　　　　取其最后一個元素

　　　　　　　　tmp.parentElement　　　　　　　　　　　　　　取其元素的父類元素

　　　　　　　　tmp.nextElementSibling　　　　　　　　　　　　取其下一個相鄰的標(biāo)簽元素（兄弟標(biāo)簽）

　　　　　　　　tmp.previousElementSibling　　　　　　　　　　取其上一個相鄰的標(biāo)簽元素（兄弟標(biāo)簽）

　　　　dom操作（在dom中你只要能獲取到值就能修改）

　　　　　　input標(biāo)簽操作：

　　　　　　　　var tmp = document.getElementById('inner1').lastElementChild

　　　　　　　　tmp.value　　　　　　　　　　　　　　　　　　　　獲取到input框值是“ ” ，此時在輸入值，輸入tmp.value就能獲取該值

　　　　　　　　tmp.lastElementChild.value='123'　　　　　　　　　? 在頁面中也顯示了該值，dom命令和頁面的交互的

　　　　　　　　innerText 修改目標(biāo)元素的文本內(nèi)容 如果賦值的內(nèi)容 <p></p>包含標(biāo)簽的字符串，依舊會以字符串的形式存儲
?? ?　　　　?? 　　innerHtml 如果賦值的內(nèi)容 包含標(biāo)簽的字符串 他會直接轉(zhuǎn)成標(biāo)簽元素<p></p>

　　　　　　select標(biāo)簽操作：

　　　　　　　　s1.value='xxxx'　　　　　　value值操作

　　　　　　　　s1.selectedIdex=2　　　　 selectedIdex下標(biāo)操作，下標(biāo)按數(shù)組取值

　　　　　　通過字符串操作css樣式：

　　　　　　　　tmp="樣式表中內(nèi)容"

　　　　　　通過list方式操作css樣式：

　　　　　　　　tmp.classlist　　　　　　　查看當(dāng)前樣式表下標(biāo)和字符串

　　　　　　　　tmp.classlist.remove('xxx1')　刪除字符串樣式

　　　　　　　　tmp.classlist.add('xxx2')　　 增加字符串樣式

　　　　　　直接通過style屬性進(jìn)行修改：

　　　　　　　　tmp.style.width='200px'　　 修改寬度

　　　　補(bǔ)充：　　

　　　　　　在html中css樣式的時候?qū)憽　　　　　　　　　　　　　　　　　　　　　　　　?span style="color:#000000;">style="background-color:red"

　　　　　　在dom命令中寫css樣式的時候?qū)?dom不解析“-”，去"-"后面字母變成大寫)　　　　tmp.style.backgroundColor='red'

?

　　　　　　dom操作原標(biāo)簽中的style屬性

　　　　　　刪除屬性

　　　　　　　　xxx.removeAttribute('value')

　　　　　　添加屬性

　　　　　　　　xxx.setAttribute('value','xxxxxxx')　　　　　　通過字典的取值方式xxx.setAttribute[0]

　　　　　　創(chuàng)建標(biāo)簽

　　　　　　　　1.對象創(chuàng)建

　　　　　　　　　　document.createElement('xxx')　　　　再通過setAttribute添加屬性，只能一個一個添加

　　　　　　　　　　獲取添加父類位置

　　　　　　　　　　div.appendChild(xxxx)　　　　　　　　向當(dāng)前div增加xxxx

　　　　　　　　2.字符串創(chuàng)建

　　　　　　　　　　var input = "<input type='text' value='xxx' id='xxxxx'>"　　定義一個字符串

　　　　　　　　　　獲取添加父類位置

?　　　　　　　　　　div.insertAdjacentHTML("beforeBegin",input)　　　　　參數(shù)"beforeBegin"插入到獲取標(biāo)簽的前面

　　　　　　　　　　 div.insertAdjacentHTML("afterBegin",input)　　　　　參數(shù)"afterBegin"插入到獲取到子標(biāo)簽的前面

　　　　　　　　　　div.insertAdjacentHTML("beforeEnd",input)　　　　　參數(shù)"beforeEnd"插入到獲取到子標(biāo)簽的后面

　　　　　　　　　　div.insertAdjacentHTML("afterEnd",input)　　　　　參數(shù)"afterEnd"插入到獲取標(biāo)簽的前面

　　　　　event事件　　事件也相當(dāng)與一個function

　　　　　　onclick　　單擊事件var a.onclick = function (){alert("aaa");}當(dāng)點(diǎn)擊按鈕后會彈出提示框　　ondblclick雙擊

　　　　　　onfocis/onblur　　獲取焦點(diǎn)/失去焦點(diǎn)

　　　　　　onkeydown　　某個鍵盤按鍵被按下,應(yīng)用場景,登錄時回車

　　　　　　onchange　　當(dāng)內(nèi)容發(fā)生改變就會觸發(fā),如三級聯(lián)動

　　　　　　onload　　onload事件會在游覽器加載完成后才會觸發(fā),在head中加入window.load? = function (){alert("aaa");}

?　　　　　　onmouseover　　當(dāng)鼠標(biāo)進(jìn)入時觸發(fā)

　　　　　　onmouseout　　當(dāng)鼠標(biāo)離開時觸發(fā)

　　　　　　onmousemove　　當(dāng)鼠標(biāo)移動時觸發(fā)

　　　　　　onmousedown　　當(dāng)鼠標(biāo)被按下時觸發(fā)

　　　　　　onselect　　文本被選中

　　　　　　onsubmit　　確認(rèn)按鈕被點(diǎn)擊,與form標(biāo)簽綁定

　　　　　　　　方式一:

　　　　　　　　<form id='form' οnsubmit='return check()'>

　　　　　　　　　　　xxxxxx

　　　　　　　　</form>

　　　　　　　　　　<script>function check(event){alert('驗(yàn)證失敗');return false;}</script>

　　　　　　　　方式二:

　　　　　　　　var a = document.getElementByid('form')'';

　　　　　　　　a.οnsubmit= function(event){? event.preventDefault()?? } //preventDefault阻止form生成

　　　　綁定事件兩種方式

　　　　　　1. <div id='id1' οnclick='func()'></div>直接通過屬性綁定

　　　　　　2. var obj = document.getElementsByClassName('inner')[0]

　　　　　　　obj.onclick = function(){alert('1234')}　　與html脫離,寫在js中更加隱秘

　　　　事件傳播

　　　　　　對象.stopPropagation()　　阻止事件向外層div傳播

　　　　　　

版權(quán)聲明：本文原創(chuàng)發(fā)表于 博客園，作者為?RainBol?本文歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則視為侵權(quán)。

轉(zhuǎn)載于:https://www.cnblogs.com/RainBol/p/9697323.html

總結(jié)

以上是生活随笔為你收集整理的前端笔记-dom的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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