BFC和DOM初级认知总结

DOM

• 最近看了JavaScript DOM编程艺术这本书的DOM章节，下面就总结下DOM这个章节关于DOM的知识点
  • HTML是个树结构，其中涉及到的概念有：节点node，元素节点element node ,文本节点text node，属性节点attribute node
  • 涉及到的方法有五个：getElementById()/getElementByTagName()/getElementByClassName()/getAttribute()/setAttribute()
  • 这些方法中前三种是document的方法，返回的都是一个对象，其中第一个返回一个特定的元素对象，后两个返回一个对象数组，第三个在应用的时候需要注意浏览器的兼容性
  • 后两种是元素节点的方法
  • getElementById()得到的是一个文本中仅有的一个包含某个Id属性值得元素
  • getElementByTagName()/getElementByClassName()得到是一个元素数组结果，当然我们可以使用数组的特性再进行方法操作，其中这个方法的参数可以是一个list，在匹配值时参数没有先后循序的限制
  • getAttribute()/setAttribute()两个方法元素的某个属性的属性值，并进行相应属性值的设置

BFC总结来至于

• 什么是BFC？
• 如何得到BFC
• BFC的issue
• 得到BFC没有一点副作用的方法，和浏览器对其的支持
• 首先说下本人的技术原则：讲证据、看场景、脚踏实地、忌炫技，技术态度是：谦虚和敬畏，说这些并不是说我做到了，而是我用这个来要求自己。
• 什么是BFC？
  • 如果一个网页没有css的话，整个网页是按照正常的流布局，按照元素本身是内联元素还是块级元素进行流布局，而我们使用css正是为了改变这种流布局方式，让网页更具备可读性，块级元素为我们提供了一个可能就是在块级元素中添加适当的块级元素和内联元素，整个块可以达到一种整块显示在网页中的目的，而BFC我的理解就是为了满足这个目的，同时管理好浮动元素脱离文档流、外边距刺穿、脱离文档流的元素出现的问题
• 得到BFC的方法：
  • overflow:auto...(!default=visible),
  • position:fixed/absolute
  • display:table-cell/table-caption/inline-block
  • column-span:all
• BFC的问题
  • 某些场景中会出现：in certain scenarios you might find that you get an unwanted scrollbar, or that shadows are clipped.
• 得到BFC没有一点副作用的方法，和浏览器对其的支持
  • display:flow-root