資訊專欄INFORMATION COLUMN
摘要：文檔和元素的幾何滾動當瀏覽器在窗口中渲染文檔時，它將會創建文檔一個視覺表現層，在哪里每個元素都有自己的位置和尺寸。通常應用程序將文檔看做元素的樹。的問題是觸發該事件的文檔元素的一個引用。
文檔和元素的幾何滾動
當瀏覽器在窗口中渲染文檔時，它將會創建文檔一個視覺表現層，在哪里每個元素都有自己的位置和尺寸。通常web應用程序將文檔看做元素的樹。
文檔坐標和窗口坐標元素位置以像素來進行度量，向右為x坐標的增加，向下為y坐標的增加。有兩個坐標，一個坐標為文檔的原點，一個為窗口的原點，這兩個原點相互輔助。
文檔包含滾動的內容，而窗口僅僅是當前用戶所看到的內容。
文檔坐標在用戶滾動的時候不會發生改變。
innerWidth 以及 innerHeight 這兩個參數可以判斷當前窗口的大小
pageYOffset 將會判斷垂直滾動條所在的位置 pageXOffset 將會判斷水平滾動條所在的位置查詢元素的幾何尺寸
getBoundingClientRect() 將會返回相對于左上角的內容，注意是左上角的。包括bottom以及left和right都是相對于左上角和元素的距離，其中width和height都是相對于自身的。并且返回的不是實時的，屬于一個快照
滾動設置一個垂直滾動的
// 獲得文檔和窗口的高度 var documentHeight = document.documentElement.offsetHeight; // 獲取根元素，在獲取根元素的高度，即文檔的大小 var viewportHeight = window.innerHeight; // 獲取視口的大小 // 進行滾動 window.scrollTo(0, documentHeight - viewportHeight) // 做差得到頁面剩余的高度，然后將其滾動的該高度
這樣就完成了一個垂直滾動，讓其滾動到底部
以及一個scrollBy 一個偏移量進行便宜。
下面是腳本化的HTML表單
選取表單和表單元素var fields = document.getElementById("address").getElementsByTagName("input");
// id 為 “shipping”的表單中的所有單選按鈕
document.querySelectorAll("#shipping input[type="radio"]");
// id為shipping 的表單中所有名字為method的單選按鈕
document.querySelectorAll("#shipping input[type="radio"][name="method"]");
使用document.forms來進行選擇表單,返回的是一個類數組
document.forms
對于表單使用elements獲取其表單的name的一些屬性值，因為有些時候會出現重疊的問題。
一個栗子html如下
form表單
接著下面在控制臺輸入如下js獲取表單元素的數組
document.forms.shipping.elements.method
即可
將會獲取到表單的屬性
表單和元素屬性js的對象支持兩個方法，一個為submit()一個為reset()這兩個方法，將會和按鈕具有相同的目的。
form具有兩個方法，該兩個方法使用如下所示
// 提交表單 document.forms.shipping.shubmit(); // 重置表單 document.forms.shipping.reset();
一些元素如下
type標識表單元素類型的只讀字符串
form對包含元素的form對象的只讀引用
name只讀字符串
value可讀/寫字符串，指定表單元素包含或代表的值，它是當提交表單時發送到web服務器的字符串
表單和元素的事件處理程序每個form元素都有一個onsubmit事件處理程序用來檢測表單提交。還有一個onreset事件處理程序來檢測表單的重置。表單提交前將會調用onsubmit程序，如果回調函數的返回值為false則會取消表單的提交動作。這是js程序一個用來檢查用戶的輸入錯誤。目的是避免不完整或者無效的數據通過網絡提交到服務端程序。onsubmit事件只能通過單擊提交按鈕觸發。（通過回車也能觸發該事件）如果直接調用表單的submit()方法將不會觸發onsubmit事件處理程序。onreset事件處理程序和onsubmit是類似的。也是會在表單重置之前觸發該事件。同樣onreset也是只能通過單擊重置按鈕來觸發，直接調用表單的reset()方法不會觸發onreset事件處理程序
用戶與表單元素交互時它們往往會觸發click或change事件，通過定義onclick或者onchange事件處理程序可以處理這些事件（h5中，可以直接在表單中添加type類型達到表單過濾的效果）
用戶與表單元素交互時它們往往會觸發click或change事件，通過定義onclick或onchange事件處理程序可以處理這些事件。表單每發生一個改變的時候，都會觸發一個事件，從而可以通過事件調用回調函數。
一般來說，當按鈕表單元素激活（甚至當通過鍵盤而不是鼠標）都會觸發click事件。當用戶改變其他表單元素所代表的值時會觸發change事件。當用戶在一個文本域輸入文本或從下拉列表中選擇一個選項后就觸發change事件，當用戶在一個文本域中該數據不是每次用戶輸入一個鍵值時都會觸發該事件。它僅僅當用戶改變了值才會觸發該事件。單選框和復選框共用一個狀態標識，它們的click和change事件都會被觸發，相比一下change事件更加有用。
表單元素在收到鍵盤的焦點時也會觸發focus事件。失去焦點觸發blur事件
在事件處理程序代碼中關鍵字this將會觸發該事件的文檔元素的一個引用，或者通過this.form.x得到該表單中以x命名的元素
當用戶單擊按鈕（或者回車的時候）進行提交，將會在提交前觸發onsubmit事件。如果返回false將會取消提交。直接調用submit()方法的時候，不會驗證該過程，將會直接提交給服務器，所以服務器端也要做一遍驗證。
正話：window對象的submit事件的一個句柄。
使用場景：對用戶表單進行輸入的驗證
具體的后面有事件，繼續寫。
其過程如下 先觸發onsubmit事件 → 接著調用submit()方法完成提交。
重置觸發的事件當用戶單擊重置按鈕，將會觸發onreset事件。
https://developer.mozilla.org...
同樣也是在表單重置之前觸發該事件，如果該事件返回的是false，則不會重置
同樣，如果使用表單的onreset()方法也不會觸發該事件，將會直接進行重置。
當按鈕表單元素激活的時候，將會觸發click事件。（即使是通過鍵盤而不是通過鼠標，該事件都會觸發）。單選框和復選框也具有click事件。
通過定義onclick事件處理程序能達到處理click事件。
過程： 先觸發事件onclick → 調用對象的方法click
區別 方法能夠直接調用，事件只能等待被觸發change事件
當用戶該表表單元素的值，然后觸發一個click事件的時候，將會觸發上一個表單的change事件。即要發生一次完整的改變才會觸發一次change事件。
focus事件收到鍵盤的焦點將會觸發focus事件，即每次輸出一次都會觸發一次focus事件。
this的問題this是觸發該事件的文檔元素的一個引用。即觸發該事件的對象
在form元素中的元素擁有一個form引用了其父級的form。通過this.form會得到form對象的引用。即使用this.form.x
擁有兩種方式，該兩種方式都會生成按鈕。
超鏈接與按鈕一樣提供了onclick事件處理程序。當onclick事件處理程序能概念化為跟隨此鏈接時用一個鏈接，否則用按鈕。
提交和重置元素本就是按鈕，不同的是它們有與之相關聯的默認動作。
即，按鈕和超鏈接類似，都具有共同的作用。開關按鈕
復選框和單選元素為開關按鈕，或稱之為有兩種視覺狀態的按鈕。即選中或未選中。通過對其單擊，用戶可以改變其開關狀態。單選元素為整組有相關性的元素而設計的，組內所有按鈕的HTML屬性name值都相同。按照這種方式創建的按鈕為互斥的。利用表單屬性的名字選中元素時，它返回的一個類數組對象而不是單個元素。
單選和復選框都定義了checked屬性，指定了元素當前是否選中。defaultChecked屬性也為布爾值，為html的checked值，指定了元素在第一次加載頁面時是否選中。
單選和復選框本身不顯示任何的文本，它們通常和相鄰的html文本一起顯示（于label元素相關聯）。
當用戶單擊按鈕，會觸發onclick事件，由于改變狀態會觸發onchange事件，但是，當用戶單擊其他單選按鈕而導致這個單選按鈕狀態的改變，后者不觸發onchange事件。
placeholder能顯示用戶輸入前在輸入域中顯示的提示信息。
文本輸入域的onchange事件處理程序是在用戶輸入新的文本或編輯已存在的文本時觸發。