今年早些时候碰到了一个需求:获取一个页面中所有的元素的坐标信息,除此之外还需要获取页面中的所有文本的坐标和尺寸。
前半部分的需求比较常规,可以通过遍历整个文档来获取所有的元素,再通过元素的 getBoundingClientRect() 方法即可取得。后半部分的文本的获取则有些困难,因为文本本身是通过: <tag>text<tag> 的方式存在的,而文本自身则不是一个 DOM 元素。
text-in-paragraph
假设我们有一个元素 p,其中放置了一段文本,如果通过 p 元素的 getBoundingClientRect() 方法则只能获取 p 元素的坐标和尺寸,并且这个尺寸还会受到 CSS 属性的影响,比如 width,height,padding 等等。
至此,问题就分成了两个部分:
- 如何从元素中找到文本
- 如何获取文本的尺寸和坐标
突然灵光一闪,依稀记得元素中似乎有个 childNodes 属性,打印出来一看果然没错,文本确实就在 childNodes 里,体现为一个文本 node,并且文本类型是特殊的,表现为 nodeType 为 3。这个思路有了之后,第一个问题基本解决。
既然已经得到了文本 node,那么是不是直接使用 getBoundingClientRect() 就可以得到文本的尺寸和坐标了呢?答案是否定的。查了一下 MDN 中关于 getBoundingClientRect() 的解释,发现只有 Range 和 Element 可以使用,但文本 node 既不是 Element 也不是 Range。别急,Range?那我为这个文本 node 创建一个 Range 可不可以?我按照这个思路继续尝试。
先创建一个 Range
| |
然后让这个 Range 选中已经找到的文本 node
| |
这个时候再通过 range 的 getBoundingClientRect() 获取坐标和尺寸
| |
不出所料,果然获取到了文本的坐标和尺寸。
测试的页面看起来是这样:
text-in-page
实际获取的所有文本结果:
measure-result
可以访问 DEMO 查看实际运行结果,查看页面源代码即可了解实现方法。