第15章 脚本化文档

15.2 选取文档元素

• 按id属性查找：getElementById()
• 按name属性查找：getElementByName()
  • name属性类似id，但不唯一。
  • name属性只在少数元素（表单、表单元素、iframe、img）中有效。
• 按标签名查找：getElementByTagName()
  • document.body即body元素，document.head即head元素。
  • document.images/forms/links对应img元素、form元素、a元素（有href属性）的HTMLCollection对象
  • HTMLCollection类似NodeList，但可以用元素的id或name来索引。
  • HTMLCollection和NodeList都是实时的，会随着文档变化而变化。
    • 对NodeList生成静态副本的快捷方法：var snapshot=Array.prototype.slice(nodeList,0);
• 按class查找：getElementByClassName()
• 按css选择器查找： querySelectorAll()/querySelector()
  • 返回的NodeList对象不是实时的。
  • 匹配伪元素的兼容性很差。
  • jQuery的CSS选择器代码独立出标准库Sizzle

15.3 文档结构和遍历

15.3.1 作为节点树的文档

• 对文档文本的变化很敏感（包括空格、换行）
• parentNode、childNodes、firstChild、lastChild等属性
• nodeType（可用于判断节点类型）、nodeValue、nodeName（大写的标签名）。

15.3.2 作为元素树的文档

• children属性只包含element对象，可代替Node.childNodes。
• firstElementChild、lastElementChild等属性。

15.4 属性

15.4.1 HTML属性作为Element的属性

• class属性变为className
• for属性（label元素）变为htmlFor

15.4.2 获取和设置非标准HTML属性

• 读写 getAttribute() setAttribute()
• 判断存在和删除 hasAttribute() removeAttribute()

15.4.3 数据集属性

• 浏览器兼容性不好
• 例如data-xmin属性变成element的dataset属性的xmin属性

15.4.4 作为Attr节点的属性

• attributes属性代表元素的所有属性。
• 类似NodeList是实时的。

15.5 元素的内容

15.5.1 作为HTML的元素内容 innerHTML

• 避免对innerHTML做“+=”，效率低下
• outerHTML 返回内容包括被查询元素的前后标签（除Firefox外均支持）
• insertAdjacentHTML() 在指定元素相邻位置插入html

15.5.2 作为纯文本的元素内容 textContent

• innerText和textContent非常类似，支持除了Firefox以外的浏览器。
• innerText不返回script元素里的内容。

15.5.3 作为Text节点的元素内容 nodeValue

• nodeValue保存text节点的内容。

15.6 创建、插入和删除节点

15.6.1 创建节点

• createElement()
• Node.cloneNode(true/false)
  • true:深复制，包括所有后代节点
  • false:浅复制

15.6.2 插入节点

• appendChild()
• insertBefore()

15.6.3 删除和替换节点

• removeChild() 在待移除元素的父元素处调用
• replaceChild(新元素,旧元素)

15.6.4 使用DocumentFragment

• 传递一个documentfragment时，插入的是其子节点，而不是其本身。

15.8 文档和元素的几何形状和滚动

15.8.1 文档坐标和视口坐标

• 文档坐标不会随着用户滚动而变化。
• 鼠标事件返回的是视口坐标（窗口坐标）
• 滚动条的位置：pageXOffset pageYOffset或者scrollLeft scrollTop

15.8.2 查询元素的几何尺寸

• getBoundingClientRect() 返回带有left、right、top、bottom的对象，代表元素在视口坐标系的位置（包含边框和内边距，不含外边距）。
• getClientRect() 获得内联元素每个独立的矩形组成的类数组对象 。
• 上面两种方法返回的矩形对象不是实时的，只是静态快照。

15.8.3 判定元素在某点

• elementFromPoint() 传递视口坐标，返回z-index最大和最小的元素。
• 鼠标事件更常用。

15.8.4 滚动

• window.scrollTo() 接受文档坐标，设置为滚动条的偏移量。
• scrollBy()、scroll() 参数是相对坐标，在当前滚动条的偏移量上增加。
• 在html元素上调用scrollIntoView() 使指定元素在视口可见。

15.8.5 关于元素尺寸、位置和溢出

• offsetWidth、offsetHeight（包含边框、内容和内边距） 老浏览器可用（getBoundingClientRect方法返回的height、width相同）
• offsetTop、offsetLeft 相对于offsetParent的坐标（offsetParent为null，即等于文档坐标）
• clientWidth、clientHeight（包含内容和内边距）
• scrollWidth、scrollHeight（包含内容、内边距和溢出部分）

15.9 HTML表单

15.9.1 选取表单和表单元素

• 对于表单元素，利用name来查询比使用id更常用。

15.9.2 表单和元素的属性

• form属性：action、encoding、method、target
• 表单元素属性：form（对包含元素的表单的引用）、type、name、value

15.9.3 表单和元素的事件处理程序

• form的onsubmit事件通过表单里的“提交”按钮触发。
• form的onreset事件通过表单里的“重置”按钮触发。
• 单选按钮和复选框的change事件比click事件更有价值。

15.9.4 按钮

• 常用表单的onsubmit事件来执行表单校验

15.9.7 选择框和选项元素

• 单选的select元素的selectIndex属性显示当前选中的选项。
• multiple属性的select元素需要遍历option的selected属性来判定哪些选项被选中。
• option元素没有表单事件处理功能。

15.10 其他文档特性

15.10.1 Document的属性

• cookie
• domain 用于在特定情况中放宽同源策略安全限制
• lastModified 文档修改时间的字符串
• referrer 跳转到当前链接的上一个文档，和HTTP的referer头信息内容相同。