文檔和元素的幾何滾動(dòng)
當(dāng)瀏覽器在窗口中渲染文檔時(shí)娩梨，它將會(huì)創(chuàng)建文檔一個(gè)視覺(jué)表現(xiàn)層铣鹏，在哪里每個(gè)元素都有自己的位置和尺寸透典。通常web應(yīng)用程序?qū)⑽臋n看做元素的樹(shù)。
文檔坐標(biāo)和窗口坐標(biāo)
元素位置以像素來(lái)進(jìn)行度量摆昧，向右為x坐標(biāo)的增加撩满，向下為y坐標(biāo)的增加。有兩個(gè)坐標(biāo)，一個(gè)坐標(biāo)為文檔的原點(diǎn)鹦牛，一個(gè)為窗口的原點(diǎn)，這兩個(gè)原點(diǎn)相互輔助勇吊。
文檔包含滾動(dòng)的內(nèi)容曼追，而窗口僅僅是當(dāng)前用戶所看到的內(nèi)容。
文檔坐標(biāo)在用戶滾動(dòng)的時(shí)候不會(huì)發(fā)生改變汉规。
innerWidth 以及 innerHeight 這兩個(gè)參數(shù)可以判斷當(dāng)前窗口的大小
pageYOffset 將會(huì)判斷垂直滾動(dòng)條所在的位置
pageXOffset 將會(huì)判斷水平滾動(dòng)條所在的位置
查詢?cè)氐膸缀纬叽?/h2>
getBoundingClientRect() 將會(huì)返回相對(duì)于左上角的內(nèi)容礼殊，注意是左上角的。包括bottom以及l(fā)eft和right都是相對(duì)于左上角和元素的距離针史，其中width和height都是相對(duì)于自身的晶伦。并且返回的不是實(shí)時(shí)的，屬于一個(gè)快照
滾動(dòng)
設(shè)置一個(gè)垂直滾動(dòng)的
// 獲得文檔和窗口的高度
var documentHeight = document.documentElement.offsetHeight; // 獲取根元素啄枕，在獲取根元素的高度婚陪，即文檔的大小
var viewportHeight = window.innerHeight; // 獲取視口的大小
// 進(jìn)行滾動(dòng)
window.scrollTo(0, documentHeight - viewportHeight) // 做差得到頁(yè)面剩余的高度，然后將其滾動(dòng)的該高度
這樣就完成了一個(gè)垂直滾動(dòng)频祝，讓其滾動(dòng)到底部
以及一個(gè)scrollBy 一個(gè)偏移量進(jìn)行便宜泌参。
HTML表單
下面是腳本化的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來(lái)進(jìn)行選擇表單,返回的是一個(gè)類(lèi)數(shù)組
document.forms
對(duì)于表單使用elements獲取其表單的name的一些屬性值，因?yàn)橛行r(shí)候會(huì)出現(xiàn)重疊的問(wèn)題常空。
一個(gè)栗子
html如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表單</title>
</head>
<body>
<form name="shipping">
<fieldset>
<legend>Shipping Method</legend>
<label><input type="radio" name="method" value="1st">Fisrt-class</label>
<label><input type="radio" name="method" value="2st">2-day Air</label>
<label><input type="radio" name="method" value="overnite">Overnight</label>
</fieldset>
</form>
</body>
</html>
接著下面在控制臺(tái)輸入如下js獲取表單元素的數(shù)組
document.forms.shipping.elements.method
即可
將會(huì)獲取到表單的屬性
表單和元素屬性
js的對(duì)象支持兩個(gè)方法沽一，一個(gè)為submit()一個(gè)為reset()這兩個(gè)方法，將會(huì)和按鈕具有相同的目的漓糙。
form具有兩個(gè)方法铣缠，該兩個(gè)方法使用如下所示
// 提交表單
document.forms.shipping.shubmit();
// 重置表單
document.forms.shipping.reset();
一些元素如下
type
標(biāo)識(shí)表單元素類(lèi)型的只讀字符串
form
對(duì)包含元素的form對(duì)象的只讀引用
name
只讀字符串
value
可讀/寫(xiě)字符串，指定表單元素包含或代表的值昆禽，它是當(dāng)提交表單時(shí)發(fā)送到web服務(wù)器的字符串
表單和元素的事件處理程序
每個(gè)form元素都有一個(gè)onsubmit事件處理程序用來(lái)檢測(cè)表單提交蝗蛙。還有一個(gè)onreset事件處理程序來(lái)檢測(cè)表單的重置。表單提交前將會(huì)調(diào)用onsubmit程序为狸，如果回調(diào)函數(shù)的返回值為false則會(huì)取消表單的提交動(dòng)作歼郭。這是js程序一個(gè)用來(lái)檢查用戶的輸入錯(cuò)誤。目的是避免不完整或者無(wú)效的數(shù)據(jù)通過(guò)網(wǎng)絡(luò)提交到服務(wù)端程序辐棒。onsubmit事件只能通過(guò)單擊提交按鈕觸發(fā)病曾。（通過(guò)回車(chē)也能觸發(fā)該事件）如果直接調(diào)用表單的submit()方法將不會(huì)觸發(fā)onsubmit事件處理程序。onreset事件處理程序和onsubmit是類(lèi)似的漾根。也是會(huì)在表單重置之前觸發(fā)該事件泰涂。同樣onreset也是只能通過(guò)單擊重置按鈕來(lái)觸發(fā)，直接調(diào)用表單的reset()方法不會(huì)觸發(fā)onreset事件處理程序
用戶與表單元素交互時(shí)它們往往會(huì)觸發(fā)click或change事件辐怕，通過(guò)定義onclick或者onchange事件處理程序可以處理這些事件（h5中逼蒙，可以直接在表單中添加type類(lèi)型達(dá)到表單過(guò)濾的效果）
用戶與表單元素交互時(shí)它們往往會(huì)觸發(fā)click或change事件，通過(guò)定義onclick或onchange事件處理程序可以處理這些事件寄疏。表單每發(fā)生一個(gè)改變的時(shí)候是牢，都會(huì)觸發(fā)一個(gè)事件僵井，從而可以通過(guò)事件調(diào)用回調(diào)函數(shù)。
一般來(lái)說(shuō)驳棱，當(dāng)按鈕表單元素激活（甚至當(dāng)通過(guò)鍵盤(pán)而不是鼠標(biāo)）都會(huì)觸發(fā)click事件批什。當(dāng)用戶改變其他表單元素所代表的值時(shí)會(huì)觸發(fā)change事件。當(dāng)用戶在一個(gè)文本域輸入文本或從下拉列表中選擇一個(gè)選項(xiàng)后就觸發(fā)change事件社搅，當(dāng)用戶在一個(gè)文本域中該數(shù)據(jù)不是每次用戶輸入一個(gè)鍵值時(shí)都會(huì)觸發(fā)該事件驻债。它僅僅當(dāng)用戶改變了值才會(huì)觸發(fā)該事件。單選框和復(fù)選框共用一個(gè)狀態(tài)標(biāo)識(shí)形葬，它們的click和change事件都會(huì)被觸發(fā)合呐，相比一下change事件更加有用。
表單元素在收到鍵盤(pán)的焦點(diǎn)時(shí)也會(huì)觸發(fā)focus事件笙以。失去焦點(diǎn)觸發(fā)blur事件
在事件處理程序代碼中關(guān)鍵字this將會(huì)觸發(fā)該事件的文檔元素的一個(gè)引用淌实，或者通過(guò)this.form.x得到該表單中以x命名的元素
事件總結(jié)
提交觸發(fā)的事件
當(dāng)用戶單擊按鈕（或者回車(chē)的時(shí)候）進(jìn)行提交，將會(huì)在提交前觸發(fā)onsubmit事件猖腕。如果返回false將會(huì)取消提交翩伪。直接調(diào)用submit()方法的時(shí)候，不會(huì)驗(yàn)證該過(guò)程谈息，將會(huì)直接提交給服務(wù)器缘屹，所以服務(wù)器端也要做一遍驗(yàn)證。
正話：window對(duì)象的submit事件的一個(gè)句柄侠仇。
使用場(chǎng)景：對(duì)用戶表單進(jìn)行輸入的驗(yàn)證
具體的后面有事件轻姿，繼續(xù)寫(xiě)。
其過(guò)程如下 先觸發(fā)onsubmit事件 → 接著調(diào)用submit()方法完成提交逻炊。
重置觸發(fā)的事件
當(dāng)用戶單擊重置按鈕互亮，將會(huì)觸發(fā)onreset事件。
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onreset
同樣也是在表單重置之前觸發(fā)該事件余素，如果該事件返回的是false豹休，則不會(huì)重置
同樣，如果使用表單的onreset()方法也不會(huì)觸發(fā)該事件桨吊，將會(huì)直接進(jìn)行重置威根。
click事件
當(dāng)按鈕表單元素激活的時(shí)候，將會(huì)觸發(fā)click事件视乐。（即使是通過(guò)鍵盤(pán)而不是通過(guò)鼠標(biāo)洛搀，該事件都會(huì)觸發(fā)）。單選框和復(fù)選框也具有click事件佑淀。
通過(guò)定義onclick事件處理程序能達(dá)到處理click事件留美。
過(guò)程： 先觸發(fā)事件onclick → 調(diào)用對(duì)象的方法click
區(qū)別 方法能夠直接調(diào)用，事件只能等待被觸發(fā)
change事件
當(dāng)用戶該表表單元素的值，然后觸發(fā)一個(gè)click事件的時(shí)候谎砾，將會(huì)觸發(fā)上一個(gè)表單的change事件逢倍。即要發(fā)生一次完整的改變才會(huì)觸發(fā)一次change事件。
focus事件
收到鍵盤(pán)的焦點(diǎn)將會(huì)觸發(fā)focus事件景图，即每次輸出一次都會(huì)觸發(fā)一次focus事件瓶堕。
this的問(wèn)題
this是觸發(fā)該事件的文檔元素的一個(gè)引用。即觸發(fā)該事件的對(duì)象
在form元素中的元素?fù)碛幸粋€(gè)form引用了其父級(jí)的form症歇。通過(guò)this.form會(huì)得到form對(duì)象的引用。即使用this.form.x
按鈕
<button>
<input type="submit">
擁有兩種方式谭梗，該兩種方式都會(huì)生成按鈕忘晤。
超鏈接與按鈕一樣提供了onclick事件處理程序。當(dāng)onclick事件處理程序能概念化為跟隨此鏈接時(shí)用一個(gè)鏈接激捏，否則用按鈕设塔。
提交和重置元素本就是按鈕，不同的是它們有與之相關(guān)聯(lián)的默認(rèn)動(dòng)作远舅。
即闰蛔，按鈕和超鏈接類(lèi)似，都具有共同的作用图柏。
開(kāi)關(guān)按鈕
復(fù)選框和單選元素為開(kāi)關(guān)按鈕序六，或稱之為有兩種視覺(jué)狀態(tài)的按鈕。即選中或未選中蚤吹。通過(guò)對(duì)其單擊例诀，用戶可以改變其開(kāi)關(guān)狀態(tài)。單選元素為整組有相關(guān)性的元素而設(shè)計(jì)的裁着，組內(nèi)所有按鈕的HTML屬性name值都相同繁涂。按照這種方式創(chuàng)建的按鈕為互斥的。利用表單屬性的名字選中元素時(shí)二驰，它返回的一個(gè)類(lèi)數(shù)組對(duì)象而不是單個(gè)元素扔罪。
單選和復(fù)選框都定義了checked屬性，指定了元素當(dāng)前是否選中桶雀。defaultChecked屬性也為布爾值矿酵，為html的checked值，指定了元素在第一次加載頁(yè)面時(shí)是否選中矗积。
單選和復(fù)選框本身不顯示任何的文本坏瘩，它們通常和相鄰的html文本一起顯示（于label元素相關(guān)聯(lián)）。
當(dāng)用戶單擊按鈕漠魏，會(huì)觸發(fā)onclick事件倔矾，由于改變狀態(tài)會(huì)觸發(fā)onchange事件，但是，當(dāng)用戶單擊其他單選按鈕而導(dǎo)致這個(gè)單選按鈕狀態(tài)的改變哪自，后者不觸發(fā)onchange事件丰包。
文本域
placeholder能顯示用戶輸入前在輸入域中顯示的提示信息。
<label><input type="text" value="" name="text" placeholder="hello word!"></label>
文本輸入域的onchange事件處理程序是在用戶輸入新的文本或編輯已存在的文本時(shí)觸發(fā)壤巷。
<textarea> 該標(biāo)簽將會(huì)運(yùn)行用戶輸入多行文本邑彪。
對(duì)于該元素，依舊可以使用value和onchange事件處理程序胧华。
選擇框和選項(xiàng)元素
當(dāng)用戶選取或取消選擇一個(gè)選項(xiàng)時(shí)寄症，select元素將會(huì)觸發(fā)onchange事件處理程序。
js添加一個(gè)選項(xiàng)
依舊操作節(jié)點(diǎn)添加一個(gè)選項(xiàng)
// 添加一個(gè)select選項(xiàng)
var node = document.getElementsByTagName("select")[0];
var addNode = document.createElement("option");
addNode.setAttribute("name", "4stName");
addNode.setAttribute("value", "4st");
addNode.textContent = "4st";
node.appendChild(addNode);
下面是如果選擇了第三個(gè)選項(xiàng)將會(huì)進(jìn)行操作
var selectNode = document.createElement("select"); // 創(chuàng)建一個(gè)select節(jié)點(diǎn)
var optionNode = document.createElement("option"); // 創(chuàng)建一個(gè)option節(jié)點(diǎn)
// 獲得第一個(gè)選項(xiàng)的選擇
var selectOne = node.selectedIndex;
if (selectOne === 2) {
optionNode.setAttribute("name", "oneName");
optionNode.setAttribute("value", "one");
optionNode.textContent = "one";
selectNode.appendChild(optionNode);
}
當(dāng)然啦矩动，這僅僅不完全有巧，還應(yīng)該有事件觸發(fā)，這個(gè)是執(zhí)行不了的悲没。
其他文檔特征
document 屬性
一些看文檔吧
document.write()方法
這個(gè)之前也說(shuō)過(guò)篮迎。注意是在頁(yè)面加載的時(shí)候渲染，這點(diǎn)很容易迷
查詢選取的文檔
這個(gè)用來(lái)判斷用戶選擇了那些文本
windw.getSelection().tostring();
可編輯的內(nèi)容
設(shè)置標(biāo)簽的contenteditable屬性為true將會(huì)運(yùn)行內(nèi)容的編輯示姿，甚至為全局
設(shè)置js的屬性為contentedistable屬性
var e = document.getElementsByTagName("p")[0];
e.setAttribute("contenteditable", "true");
