文档和元素的几何滚动

当浏览器在窗口中渲染文档时，它将会创建文档一个视觉表现层，在哪里每个元素都有自己的位置和尺寸。通常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");
复制代码