重学前端
程劭非（winter）
前手机淘宝前端负责人
立即订阅
32941 人已学习
课程目录
已完结 58 讲
0/4登录后，你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起，重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一：JavaScript (15讲)
JavaScript类型：关于类型，有哪些你不知道的细节？
JavaScript对象：面向对象还是基于对象？
JavaScript对象：我们真的需要模拟类吗？
JavaScript对象：你知道全部的对象分类吗？
JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？
JavaScript执行（二）：闭包和执行上下文到底是怎么回事？
JavaScript执行（三）：你知道现在有多少种函数吗？
JavaScript执行（四）：try里面放return，finally还会执行吗？
JavaScript词法：为什么12.toString会报错？
（小实验）理解编译原理：一个四则运算的解释器
JavaScript语法（预备篇）：到底要不要写分号呢？
JavaScript语法（一）：在script标签写export为什么会抛错？
JavaScript语法（二）：你知道哪些JavaScript语句？
JavaScript语法（三）：什么是表达式语句？
JavaScript语法（四）：新加入的**运算符，哪里有些不一样呢？
模块二：HTML和CSS (16讲)
HTML语义：div和span不是够用了吗？
HTML语义：如何运用语义类标签来呈现Wiki网页？
CSS语法：除了属性和选择器，你还需要知道这些带@的规则
HTML元信息类标签：你知道head里一共能写哪几种标签吗？
CSS 选择器：如何选中svg里的a元素？
CSS选择器：伪元素是怎么回事儿？
HTML链接：除了a标签，还有哪些标签叫链接？
CSS排版：从毕升开始，我们就开始用正常流了
HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？
HTML小实验：用代码分析HTML标准
CSS Flex排版：为什么垂直居中这么难？
CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？
HTML语言：DTD到底是什么？
CSS渲染：CSS是如何绘制颜色的？
CSS小实验：动手做，用代码挖掘CSS属性
HTML·ARIA：可访问性是只给盲人用的特性么？
模块三：浏览器实现原理与API (9讲)
浏览器：一个浏览器是如何工作的？（阶段一）
浏览器：一个浏览器是如何工作的？（阶段二）
浏览器：一个浏览器是如何工作的（阶段三）
浏览器：一个浏览器是如何工作的？（阶段四）
浏览器：一个浏览器是如何工作的？（阶段五）
浏览器DOM：你知道HTML的节点有哪几种吗？
浏览器CSSOM：如何获取一个元素的准确位置
浏览器事件：为什么会有捕获过程和冒泡过程？
浏览器API（小实验）：动手整理全部API
模块四：前端综合应用 (5讲)
性能：前端的性能到底对业务数据有多大的影响？
工具链：什么样的工具链才能提升团队效率？
持续集成：几十个前端一起工作，如何保证工作质量？
搭建系统：大量的低价值需求应该如何应对？
前端架构：前端架构有哪些核心问题？
特别加餐 (9讲)
新年彩蛋 | 2019，有哪些前端技术值得关注？
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {}，两种写法有什么区别吗？
答疑加餐 | 学了这么多前端的“小众”知识，到底对我有什么帮助？
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑（一）：前端代码单元测试怎么做？
期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？
加餐 | 一个前端工程师到底需要掌握哪些技能？
尾声 (1讲)
尾声 | 长风破浪会有时，直挂云帆济沧海
重学前端
登录|注册

浏览器CSSOM：如何获取一个元素的准确位置

winter 2019-03-16
你好，我是 winter。
在前面的课程中，我们已经学习了 DOM 相关的 API，狭义的 DOM API 仅仅包含 DOM 树形结构相关的内容。今天，我们再来学习一类新的 API：CSSOM。
我想，你在最初接触浏览器 API 的时候，应该都有跟我类似的想法：“好想要 element.width、element.height 这样的 API 啊”。
这样的 API 可以直接获取元素的显示相关信息，它们是非常符合人的第一印象直觉的设计，但是，偏偏 DOM API 中没有这样的内容。
随着学习的深入，我才知道，这样的设计是有背后的逻辑的，正如 HTML 和 CSS 分别承担了语义和表现的分工，DOM 和 CSSOM 也有语义和表现的分工。
DOM 中的所有的属性都是用来表现语义的属性，CSSOM 的则都是表现的属性，width 和 height 这类显示相关的属性，都属于我们今天要讲的 CSSOM。
顾名思义，CSSOM 是 CSS 的对象模型，在 W3C 标准中，它包含两个部分：描述样式表和规则等 CSS 的模型部分（CSSOM），和跟元素视图相关的 View 部分（CSSOM View）。
在实际使用中，CSSOM View 比 CSSOM 更常用一些，因为我们很少需要用代码去动态地管理样式表。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》，如需阅读全部文章，
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(10)

  • 阿成
    Look via gist: https://gist.github.com/aimergenge/2bcf41ac4c4d2586e48ccd5cec5c9768

    void function () {
      const canvas = document.createElement('canvas')

      canvas.width = document.documentElement.offsetWidth
      canvas.height = document.documentElement.offsetHeight

      canvas.style.position = 'absolute'
      canvas.style.left = '0'
      canvas.style.right = '0'
      canvas.style.top = '0'
      canvas.style.bottom = '0'
      canvas.style.zIndex = '99999'

      document.body.appendChild(canvas)

      const ctx = canvas.getContext('2d')
      draw(ctx, getAllRects())

      function draw (ctx, rects) {
        let i = 0
        ctx.strokeStyle = 'red'
        window.requestAnimationFrame(_draw)

        function _draw () {
          let {x, y, width, height} = rects[i++]
          ctx.strokeRect(x, y, width, height)
          if (i < rects.length) {
            window.requestAnimationFrame(_draw)
          } else {
            console.log('%cDONE', 'background-color: green; color: white; padding: 0.3em 0.5em;')
          }
        }
      }

      function getAllRects () {
        const allElements = document.querySelectorAll('*')
        const rects = []
        const {x: htmlX, y: htmlY} = document.documentElement.getBoundingClientRect()
        allElements.forEach(element => {
          const eachElRects = Array.from(element.getClientRects()).filter(rect => {
            return rect.width || rect.height
          }).map(rect => {
            return {
              x: rect.x - htmlX,
              y: rect.y - htmlY,
              width: rect.width,
              height: rect.height
            }
          })
          rects.push(...eachElRects)
        })
        return rects
      }
    }()
    2019-03-16
    36
  • welkin
    希望作者能讲一下虚拟dom
    还有浏览器的重绘和重排
    以及性能优化，跨域的常用操作(希望细致一点)
    包括一些漏洞和攻击，比如xss，sql注入
    还有一些技术栈，和一些对于前端需要了解的方案，比如离线方案等
    2019-03-25
    1
    8
  • 痕近痕远
    请问老师，如何解决UI自动化测试，定位标签显示元素不可见的问题
    2019-03-17
    3
  • 热心网友好宅💫
    一直忍着没问，哪来这么多猫片🤣
    2019-04-25
    1
  • 周飞
    <body>
     <canvas id="rect"></canvas>
    <script type="text/javascript">
                 const canvas = document.getElementById('rect');
                 canvas.width =document.documentElement.getBoundingClientRect().width;
                 canvas.height = document.documentElement.getBoundingClientRect().height;
                 canvas.style.position="absolute";
                 canvas.style.top=0;
                 canvas.style.left=0;
                 canvas.style.border='1px solid red';
                 const ctx = canvas.getContext('2d');
                 function travaldom(root){
                   if(root.tagName && root.tagName !=='text' && root.tagName!=='canvas'){
                      const startX = root.getBoundingClientRect().x;
                      const startY = root.getBoundingClientRect().y;
                      const width = root.getBoundingClientRect().width;
                      const height = root.getBoundingClientRect().height;
                      ctx.beginPath();
                      ctx.lineWidth="1";
                      ctx.strokeStyle="blue";
                      ctx.rect(startX,startY,width,height);
                      ctx.stroke();
                   }
                   root.childNodes.forEach(node=>{
                       travaldom(node);
                   });
                 }
                 travaldom(document);
            </script>
    </body>
    2019-04-07
    1
  • Russell
    emm~~ 我又读了一遍文档，发现了对我来说很关键词，“狭义的”。 那我现在的理解是酱紫的。 广义的理解，就是BOM+DOM，CSSOM是DOM扩展的一部分；如果狭义的认为DOM就是树形结构的话，就可以分出来DOM、CSSOM两部分内容了。 我这样想对么？
    2019-04-03
    1
  • 宋宋
    前面讲浏览器渲染时有讲到，CSS经过词法分析和语法分析被解析成一颗抽象语法树。
    这个抽象语法树和CSSOM有什么关联么？因为很多文章都讲CSS经过词法分析和语法分析被解析成CSSOM，感觉很疑惑。
    2019-03-16
    1
  • 。。。
    display:inline;的元素会不会产生盒？

    作者回复: 会，而且会产生多个盒

    2019-10-09
  • Russell
    不对，我觉得我这么理解不对。。。
    2019-04-03
  • Russell
    这个咋换行啊。。。 不好意思，老师好，我想咨询浏览器API的种类。 我可以认为是，DOM，BOM，CSSOM这几类么？

    作者回复: 这是几个大类，还有好多游离的

    2019-04-03
收起评论
10
下载
客户端
返回
顶部