［javascript权威指南］［阅读笔记］脚本化文档

最新推荐文章于 2021-12-05 19:00:58 发布

buptlyz

最新推荐文章于 2021-12-05 19:00:58 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/buptlyz/article/details/52013207

版权

第十五章脚本化文档

选取文档元素

TIP1：不能直接在NodeList和HTML集合上直接调用数组方法，但可以间接调用。eg. Array.prototype.map.call(NodeList, function(){});

TIP2：NodeList和HTMLCollection对象是实时动态的，当文档结构发生变化，它们也会改变。

TIP3：querySelectorAll()和Sizzel。

文档结构和遍历

作为元素树的文档

自定义Element的方法

属性

数据集属性

作为Attr节点但属性

元素的内容

创建、插入和删除节点

创建：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>标签顶层代码中调用，因为它们是文档解析流程到一部分。将其放入函数中，在事件处理程序中调用，它会擦出当前文档及脚本
查询选取的文本
```
function getSelectedText() {
    if(window.getSelection)
        return window.getSelection().toString();
    else if(document.selection) 
        return document.selection.createRange().text;
}
```
标准的window.getSelection()返回一个Selection对象，后者描述了当前选取的一系列一个或多个Range对象。toString()是Selection对象中最重要的广泛的实现，返回选取的纯文本内容
可编辑的内容？

关注