重学前端
程劭非(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
返回
顶部