面经集合
一 JavaScript
1 原生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 布局居中
- 父元素 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
- 内联元素的继承&#