前端知识合集

一 JavaScript

1 原生DOM操作

原生DOM操作

• documen节点
  • document.createElement(‘div’) 创建元素节点
  • document.createAttribute()
  • document.getElementsByTagName() 根据标签名拿到为该标签的所有元素，返回一个HTMLCollection实例的数组对象
  • document.getElementsByClassName() 同上 拿到有该Class名的所有元素，返回一个HTMLCollection实例的数组对象
  • document.getElementsByName() 同上有name属性的所有元素、document.getElementById()
• Element节点
  • Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码
  • Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点
  • Element.getAttribute()
  • Element.getAttributeNames()
  • Element.setAttribute()
  • Element.hasAttribute()
  • Element.hasAttributes()
  • Element.removeAttribute()

二 html

三 CSS

1 css 选择器及选择器优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

2 伪类和伪元素的区别

伪类和伪元素的区别

• CSS2 中伪类、伪元素都是以单冒号:表示，CSS2.1 后规定伪类用单冒号表示，伪元素用双冒号::表示，但浏览器仍支持伪元素但冒号表示
• 伪类就是一个选择处于特定状态的元素的选择器，比如某一个cass的第一个元素，某个被hover的元素等等…，我们可以理解成一个特定的CSS类，但与普通的类不一样，它只有处于DOM树无法描述的状态下才能为元素添加样式，所以将其称为伪类
• 伪元素和伪类很像，但是伪元素类似于增添一个新的DOM节点到DOM树中，而不是改变元素的状态。注意了，这里是类似，而不是真的增加一个节点，这也是其被称为伪元素的原因（实质上，元素被创建在文档外）。

3 Flex 布局居中

Flex 布局居中

• 父元素 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。
• 子元素横向排列：flex-direction: row；使子元素竖向排列：flex-direction: column

4 盒模型

盒模型分为IE盒模型和W3C标准盒模型。

• W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding，border和padding改变，其width,height不改变
• IE 盒模型：属性width,height包含border和padding，指的是content+padding+border，border和padding改变，其width,height要加上它们

5 可继承性

• 所有元素可继承： visibility、cursor
• 内联元素的继承