文檔和元素的幾何滾動

08-21

文檔和元素的幾何滾動

來自專欄前端的集散地

文檔和元素的幾何滾動

當瀏覽器在窗口中渲染文檔時，它將會創建文檔一個視覺表現層，在哪裡每個元素都有自己的位置和尺寸。通常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表單

下面是腳本化的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如下

<!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>

接著下面在控制台輸入如下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/zh-CN/docs/Web/API/GlobalEventHandlers/onreset

同樣也是在表單重置之前觸發該事件，如果該事件返回的是false，則不會重置

同樣，如果使用表單的onreset()方法也不會觸發該事件，將會直接進行重置。

click事件

當按鈕表單元素激活的時候，將會觸發click事件。（即使是通過鍵盤而不是通過滑鼠，該事件都會觸發）。單選框和複選框也具有click事件。

通過定義onclick事件處理程序能達到處理click事件。

過程：先觸發事件onclick → 調用對象的方法click

區別方法能夠直接調用，事件只能等待被觸發

change事件

當用戶該表表單元素的值，然後觸發一個click事件的時候，將會觸發上一個表單的change事件。即要發生一次完整的改變才會觸發一次change事件。

focus事件

收到鍵盤的焦點將會觸發focus事件，即每次輸出一次都會觸發一次focus事件。

this的問題

this是觸發該事件的文檔元素的一個引用。即觸發該事件的對象

在form元素中的元素擁有一個form引用了其父級的form。通過this.form會得到form對象的引用。即使用this.form.x

按鈕

<button>
<input type="submit">

擁有兩種方式，該兩種方式都會生成按鈕。

超鏈接與按鈕一樣提供了onclick事件處理程序。當onclick事件處理程序能概念化為跟隨此鏈接時用一個鏈接，否則用按鈕。

提交和重置元素本就是按鈕，不同的是它們有與之相關聯的默認動作。

即，按鈕和超鏈接類似，都具有共同的作用。

開關按鈕

複選框和單選元素為開關按鈕，或稱之為有兩種視覺狀態的按鈕。即選中或未選中。通過對其單擊，用戶可以改變其開關狀態。單選元素為整組有相關性的元素而設計的，組內所有按鈕的HTML屬性name值都相同。按照這種方式創建的按鈕為互斥的。利用表單屬性的名字選中元素時，它返回的一個類數組對象而不是單個元素。

單選和複選框都定義了checked屬性，指定了元素當前是否選中。defaultChecked屬性也為布爾值，為html的checked值，指定了元素在第一次載入頁面時是否選中。

單選和複選框本身不顯示任何的文本，它們通常和相鄰的html文本一起顯示（於label元素相關聯）。

當用戶單擊按鈕，會觸發onclick事件，由於改變狀態會觸發onchange事件，但是，當用戶單擊其他單選按鈕而導致這個單選按鈕狀態的改變，後者不觸發onchange事件。

文本域

placeholder能顯示用戶輸入前在輸入域中顯示的提示信息。

<label><input type="text" value="" name="text" placeholder="hello word!"></label>

文本輸入域的onchange事件處理程序是在用戶輸入新的文本或編輯已存在的文本時觸發。

<textarea> 該標籤將會運行用戶輸入多行文本。

對於該元素，依舊可以使用value和onchange事件處理程序。

選擇框和選項元素

當用戶選取或取消選擇一個選項時，select元素將會觸發onchange事件處理程序。

js添加一個選項

依舊操作節點添加一個選項

// 添加一個select選項
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);

下面是如果選擇了第三個選項將會進行操作

var selectNode = document.createElement("select"); // 創建一個select節點
var optionNode = document.createElement("option"); // 創建一個option節點
// 獲得第一個選項的選擇
var selectOne = node.selectedIndex;
if (selectOne === 2) {
optionNode.setAttribute("name", "oneName");
optionNode.setAttribute("value", "one");
optionNode.textContent = "one";
selectNode.appendChild(optionNode);
}

當然啦，這僅僅不完全，還應該有事件觸發，這個是執行不了的。

其他文檔特徵

document 屬性

一些看文檔吧

document.write()方法

這個之前也說過。注意是在頁面載入的時候渲染，這點很容易迷

查詢選取的文檔

這個用來判斷用戶選擇了那些文本

windw.getSelection().tostring();

可編輯的內容

設置標籤的contenteditable屬性為true將會運行內容的編輯，甚至為全局

設置js的屬性為contentedistable屬性

var e = document.getElementsByTagName("p")[0];
e.setAttribute("contenteditable", "true");