第十五章 脚本化文档
- 如何在文档中查询或选取单独的元素
- 如何将文档作为节点树来遍历,如何找到任何文档元素的祖先、兄弟和后代元素
- 如何查询和设置文档元素的属性
- 如何查询、设置和修改文档内容
- 如何通过创建、插入和删除节点来修改文档结构
- 如何于HTML表单一起工作
选取文档元素
- 用指定的id属性
- 用指定的name属性 document.getElementsByName()
- 用指定的标签名字
- 用指定的css类
- 匹配指定的css选择器 document.querySelectorAll()
TIP1:不能直接在NodeList和HTML集合上直接调用数组方法,但可以间接调用。eg. Array.prototype.map.call(NodeList, function(){});
TIP2:NodeList和HTMLCollection对象是实时动态的,当文档结构发生变化,它们也会改变。
TIP3:querySelectorAll()和Sizzel。
文档结构和遍历
- parentNode
- childNodes
- firstChild lastChild
- nextSibling previousSibling
- nodeType
- nodeValue
- nodeName
作为元素树的文档
- children
- firstElementChild lastElementChild
- nextElementSibling previousElementSibling
- childElementCount
自定义Element的方法
- Element和HTMLDocument等类型都像String和Array一样是类。他们不是构造函数,但他们有原型对象,可以用自定义方法扩展它
属性
- HTML属性作为Element属性
- 通过getAttribute()和setAttribute()方法,hasAttribute()和removeAttribute()
数据集属性
- data-x
作为Attr节点但属性
元素的内容
- 作为HTML的元素内容:innerHTML、outerHTML
- 作为纯文本的元素内容:textContent/innerText
- script元素中的文本
- 作为Text节点的元素内容:nodeValue
创建、插入和删除节点
- 创建:createElement()
- 插入:insertBefore()和appendChild()
- TIP1:插入一个文档中已存在的节点,则节点从原位置删除,插入新位置,不需要显式删除节点
- 删除和替换节点:removeChild()和replaceChild()
- DocumentFragment:createDocumentFragment()。它不存在于文档中,父节点为null,可以拥有子节点,插入时将所有节点视为一个节点一起插入
文档和元素的几何形状和滚动
- 文档坐标和视口坐标
- 滚动条的位置:[window.]pageXOffset/[window.]pageYOffset,[window.document.documentElement.]([window.document.body.])scrollLeft/[window.document.documentElement.]([window.document.body.])scrollTop
- 当前窗口的大小:[window.]innerWidth/[window.]innerHeight,[window.document.documentElement.]([window.document.body.])clientWidht/[window.document.documentElement.]([window.document.body.])clientHeight
- 查询元素的几何尺寸:视口坐标(块状元素) getBoundingClientRect() (内联元素)getClientRect()
- 上面方法不能得到外边距的信息,可以得到 left,top,width,height,right,bottom
- 滚动:window.scrollTo(x, y) [window.scrollIntoView()]
- 关于元素尺寸、位置和溢出的更多信息
- 尺寸:offsetWidth,offsetHeight 不包括外边距,offsetLeft,offsetTop,
- TIP1:对于已定位元素的后代元素和一些其他元素(如表格元素),上面方法获得的值是相对于父元素的定位,offsetParent属性指定这些属性所相对的父元素,若为null,则为相对文档定位
- TIP2:每个HTML元素都有这些属性 [offset/client/scroll][Left/Top/Width/Height],offsetParent,因为HTML元素的内容可能比盒子大,造成溢出,拥有滚动条
HTML表单
其他文档特性
- Document的属性
- document.write()方法:只有在解析文档时才能调用write()方法输出HTML到当前位置。即能够在<script>标签顶层代码中调用,因为它们是文档解析流程到一部分。将其放入函数中,在事件处理程序中调用,它会擦出当前文档及脚本
- 查询选取的文本
标准的window.getSelection()返回一个Selection对象,后者描述了当前选取的一系列一个或多个Range对象。toString()是Selection对象中最重要的广泛的实现,返回选取的纯文本内容function getSelectedText() { if(window.getSelection) return window.getSelection().toString(); else if(document.selection) return document.selection.createRange().text; }
- 可编辑的内容?
- 查询选取的文本
标准的window.getSelection()返回一个Selection对象,后者描述了当前选取的一系列一个或多个Range对象。toString()是Selection对象中最重要的广泛的实现,返回选取的纯文本内容function getSelectedText() { if(window.getSelection) return window.getSelection().toString(); else if(document.selection) return document.selection.createRange().text; }
- 可编辑的内容?