文檔和元素的幾何滾動

時間 2021-05-22

標籤 html node web 數組瀏覽器服務器網絡 app 函數 this 欄目 HTML 简体版

原文原文鏈接

文檔和元素的幾何滾動

當瀏覽器在窗口中渲染文檔時，它將會建立文檔一個視覺表現層，在哪裏每一個元素都有本身的位置和尺寸。一般web應用程序將文檔看作元素的樹。html

文檔座標和窗口座標

元素位置以像素來進行度量，向右爲x座標的增長，向下爲y座標的增長。有兩個座標，一個座標爲文檔的原點，一個爲窗口的原點，這兩個原點相互輔助。
文檔包含滾動的內容，而窗口僅僅是當前用戶所看到的內容。
文檔座標在用戶滾動的時候不會發生改變。node

innerWidth 以及 innerHeight 這兩個參數能夠判斷當前窗口的大小

pageYOffset 將會判斷垂直滾動條所在的位置
pageXOffset 將會判斷水平滾動條所在的位置

查詢元素的幾何尺寸

getBoundingClientRect() 將會返回相對於左上角的內容，注意是左上角的。包括bottom以及left和right都是相對於左上角和元素的距離，其中width和height都是相對於自身的。而且返回的不是實時的，屬於一個快照web

滾動

設置一個垂直滾動的數組

// 得到文檔和窗口的高度
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的一些屬性值，由於有些時候會出現重疊的問題。app

一個栗子

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獲取表單元素的數組this

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事件。（即便是經過鍵盤而不是經過鼠標，該事件都會觸發）。單選框和複選框也具備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");

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。