JavaScript全解析-DOM操作-獲取元素的方

JavaScript全解析-DOM操作-獲取元素的方式

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按鈕