文档和元素的几何滚动

时间 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");