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头信息内容相同。
网友评论