OM—文檔對象模型
●DOM(Document Object Model): 文檔對象模型
●其實就是操作 html 中的標簽的一些能力
●或者說是一整套操作文檔流的屬性和方法的集合
●我們可以操作哪些內容
○獲取一個元素
○移除一個元素
○創建一個元素
○向頁面里面添加一個元素
○給元素綁定一些事件
○獲取元素的屬性
○給元素添加一些 css 樣式
○...
●DOM 的核心對象就是 document 對象
●document 對象是瀏覽器內置的一個對象,里面存儲著專門用來操作元素的各種方法
●DOM: 頁面中的標簽,我們通過 js 獲取到以后,就把這個對象叫做 DOM 對象
DOM樹
●整個文檔以樹狀結構出現出來的
●整個文檔是一個文檔節點
●每個標簽是一個元素節點
●包含在元素中的文本是文本節點
●每一個屬性是一個屬性節點
●注釋屬于注釋節點
獲取DOM元素
●通過 js 代碼來獲取頁面中的標簽
●獲取到以后我們就可以操作這些標簽了
獲取非常規標簽
●獲取頁面的html標簽
●語法: document.documentElement
var doc=document.documentElement
console.log(doc);
●獲取頁面的head標簽
●語法: document.head
var doc=document.head
console.log(doc);
●獲取頁面的body標簽
●語法:document.body
var doc=document.body
console.log(doc);
獲取常規標簽
getElementById
●getElementById 是通過標簽的 id 名稱來獲取標簽的
●因為在一個頁面中 id 是唯一的,所以獲取到的就是一個元素
<body>
<div id="box"></div>
<script>
var box=document.getElementById('box')
console.log(box) // <div></div>
</script>
</body>
●獲取到的就是頁面中的那個 id 為 box 的 div 標簽
getElementsByClassName
●getElementsByClassName 是用過標簽的 class 名稱來獲取標簽的
●因為頁面中可能有多個元素的 class 名稱一樣,所以獲取到的是一組元素
●哪怕你獲取的 class 只有一個,那也是獲取一組元素,只不過這一組中只有一個 DOM 元素而已
<body>
<div calss="box"></div>
<script>
var box=document.getElementsByClassName('box')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>
●獲取到的是一組元素,是一個長得和數組一樣的數據結構,但是不是數組,是 偽數組
●這個一組數據也是按照索引排列的,所以我們想要準確的拿到這個 div,需要用索引來獲取
getElementsByTagName
●getElementsByTagName 是用過標簽的 標簽 名稱來獲取標簽的
●因為頁面中可能有多個元素的 標簽 名稱一樣,所以獲取到的是一組元素
●哪怕真的只有一個這個標簽名,那么也是獲取一組元素,只不過這一組中只有一個 DOM 元素而已
<body>
<div></div>
<script>
var box=document.getElementsByTagName('div')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>
●和 getElementsByClassName 一樣,獲取到的是一個長得很像數組的一組元素
●必須要用索引才能得到準確的 DOM 元素
getElementByName
●根據 name 屬性來獲取元素
●語法:document.getElementsByName('name屬性')
●返回值:一個偽數組,里面是每一個獲取到的元素對象
●注意:
○如果頁面上有 name 屬性對應的元素, 那么有多少獲取多少, 放在偽數組內返回
○如果頁面上沒有 name 屬性對應的元素, 那么就是一個空的偽數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="username" id="">
<script>
var eles=document.getElementsByName('username')
console.log(eles)
</script>
</body>
</html>
querySelector
●querySelector 是按照選擇器的方式來獲取元素
●也就是說,按照我們寫 css 的時候的選擇器來獲取
●這個方法只能獲取到一個元素,并且是頁面中第一個滿足條件的元素
console.log(document.querySelector('div')) // 獲取頁面中的第一個 div 元素
console.log(docuemnt.querySelector('.box')) // 獲取頁面中第一個有 box 類名的元素
console.log(document.querySelector('#box')) // 獲取頁面中第一個 id 名為 box 的元素
querySelectorAll
●querySelectorAll 是按照選擇器的方式來獲取元素
●這個方法能獲取到所有滿足條件的元素,以一個偽數組的形式返回
console.log(document.querySelectorAll('div')) // 獲取頁面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 獲取頁面中所有有 box 類名的元素
●獲取到的是一組數據,也是需要用索引來獲取到準確的每一個 DOM 元素
querySelector和querySelectorAll在IE低版本中不支持 有兼容性問題
.獲取元素在文檔上的坐標
function DocuemntHtmlPageXY (elem) { var rect=elem.getBoundingClientRect(); var scrollTop=window.scrollTop || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0; var scrollLeft=window.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft || 0; var html=document.documentElement || document.getElementsByTagName_r('html')[0]; //修復ie6 7 下的瀏覽器邊框也被算在 boundingClientRect 內的 bug var deviation=html.getBoundingClientRect(); //修復 ie8 返回 -2 的 bug deviation={ //FF 不允許修改返回的對象 left: deviation.left < 0 ? 0 : deviation.left, top: deviation.top < 0 ? 0 : deviation.top }; return { left: rect.left + scrollLeft - deviation.left, top: rect.top + scrollTop - deviation.top }; }
2.舉例如下:
問表單中的元素
每個表單中的元素,無論是文本框、單選按鈕、下拉列表框或者其他的內容,都包含在form的elements集合中。
可以利用元素在集合中的位置或者元素的name屬性來獲得該元素的引用;
var oForm=document.forms["myform1"]; // 獲取表單
var oTextName=oForm.elements[0]; // 獲取第一個元素
var oTextPasswd=oForm.elements["passwd"]; // 獲取name屬性為passwd
var oTextComments=oForm.elements.comments; //獲取name屬性為comments的元素
訪問表單中元素方法的匯總:
<form name="MyForm" id="MyForm">
<input type="text" name="MyTextA" id="MyTextA" value="Default Value A!"/>
<input type="text" name="MyTextB" id="MyTextB" value="Default Value B!"/>
</form>
var MyValue=document.MyForm.MyTextB.value; //最佳的方法
var MyValue=document.MyForm.elements[1].value;
var MyValue=document.forms["MyForm"].MyTextB.value;
var MyValue=document.forms["MyForm"].elements[1].value;
var MyValue=document.forms["index"].MyTextB.value;
var MyValue=document.forms["index"].elements[1].value;
var MyValue=document.getElementById("MyTextB").value; //最佳的方法,符合W3C標準
var MyValue=document.all.MyTextB.value; //經過測試等同于document.all.MyForm.MyTextB.value
表單是否加入<div></div>標簽,都不影響上面的訪問的方式
"MyForm"指的是表單name的值
form表單對象的屬性和方法
action 表單所要提交到的URL地址
elements 數組,表單中所有表單域的集合
enctype 表單向服務器發送數據時,數據應該使用的編碼方法,默認為application/x-www-form-urlencoded,
如果要上傳文件,則應該使用multipart/form-data
length 表單域的數量
method 瀏覽器發送GET請求或者POST請求
name 表單的名稱,即<form>標記中的name屬性
submit() 提交表單到指定的頁面,相當于單擊submit按鈕
reset() 重置表單中的各項到初始值,相當于單擊reset按鈕
*請認真填寫需求信息,我們會在24小時內與您取得聯系。