dom（document object model）

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

　　　　dom的對象　　dom有5個對象

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

　　　　　　element object　　標簽對象(重要)

　　　　　　text object　　　　文本對象

　　　　　　attrbute object　　屬性對象

　　　　　　comment object　　注釋對象

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

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

　　　　　　　　document.getElementsById('123')

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

　　　　　　　　document.getElementsByClassName('inner')

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

　　　　　　　　document.getElementsByTagName('input')

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

　　　　　　　　document.getElementsByName('xxxx')

　　　　　　通過層級關系定位

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

　　　　　　　　tmp.nodename　　　　　　　　　　　　　　　? 標簽名

　　　　　　　　tmp.nodetype　　　　　　　　　　　　　　　　內置標簽類型號,沒什么用

　　　　　　　　tmp.nodevalue　　　　　　　　　　　　　　　? 標簽value值,默認為空

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

　　　　　　　　tmp.lastchild　　　　　　　　　　　　　　　　? 最后一個對象內容

　　　　　　　　tmp.childNodes　　　　　　　　　　　　　　　 所有對象內容

　　　　　　　　tmp.parenNode　　　　　　　　　　　　　　　 節點(元素)的父節點,直接使用parentElement,以上方法不實用

　　　　　　　　

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

　　　　　　　　tmp.firstElementChild　　　　　　　　　　　　　取其第一個元素

　　　　　　　　tmp.lastElementChild　　　　　　　　　　　　　取其最后一個元素

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

　　　　　　　　tmp.nextElementSibling　　　　　　　　　　　　取其下一個相鄰的標簽元素（兄弟標簽）

　　　　　　　　tmp.previousElementSibling　　　　　　　　　　取其上一個相鄰的標簽元素（兄弟標簽）

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

　　　　　　input標簽操作：

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

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

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

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

　　　　　　select標簽操作：

　　　　　　　　s1.value='xxxx'　　　　　　value值操作

　　　　　　　　s1.selectedIdex=2　　　　 selectedIdex下標操作，下標按數組取值

　　　　　　通過字符串操作css樣式：

　　　　　　　　tmp="樣式表中內容"

　　　　　　通過list方式操作css樣式：

　　　　　　　　tmp.classlist　　　　　　　查看當前樣式表下標和字符串

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

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

　　　　　　直接通過style屬性進行修改：

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

　　　　補充：　　

　　　　　　在html中css樣式的時候寫　　　　　　　　　　　　　　　　　　　　　　　　　style="background-color:red"

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

?

　　　　　　dom操作原標簽中的style屬性

　　　　　　刪除屬性

　　　　　　　　xxx.removeAttribute('value')

　　　　　　添加屬性

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

　　　　　　創建標簽

　　　　　　　　1.對象創建

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

　　　　　　　　　　獲取添加父類位置

　　　　　　　　　　div.appendChild(xxxx)　　　　　　　　向當前div增加xxxx

　　　　　　　　2.字符串創建

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

　　　　　　　　　　獲取添加父類位置

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

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

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

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

　　　　　event事件　　事件也相當與一個function

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

　　　　　　onfocis/onblur　　獲取焦點/失去焦點

　　　　　　onkeydown　　某個鍵盤按鍵被按下,應用場景,登錄時回車

　　　　　　onchange　　當內容發生改變就會觸發,如三級聯動

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

?　　　　　　onmouseover　　當鼠標進入時觸發

　　　　　　onmouseout　　當鼠標離開時觸發

　　　　　　onmousemove　　當鼠標移動時觸發

　　　　　　onmousedown　　當鼠標被按下時觸發

　　　　　　onselect　　文本被選中

　　　　　　onsubmit　　確認按鈕被點擊,與form標簽綁定

　　　　　　　　方式一:

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

　　　　　　　　　　　xxxxxx

　　　　　　　　</form>

　　　　　　　　　　<script>function check(event){alert('驗證失敗');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傳播

　　　　　　

版權聲明：本文原創發表于 博客園，作者為?RainBol?本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則視為侵權。

轉載于:https://www.cnblogs.com/RainBol/p/9697323.html

總結

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

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