十道前端面试题（5）

1. 行内元素和块级元素有哪些，img属于什么元素
2. 写一下DOM节点的增删改
3. 讲讲304
4. 如何让一个元素消失
5. 事件监听
6. 数组常用的方法有哪些
7. 遍历数组处理用for循环还有什么方法吗
8. 给你一个乱序数组，你怎么样排序
9. 介绍一下盒子模型
10. 讲讲JS的语言特性

---

1.行内元素和块级元素有哪些，img属于什么元素

行内元素又叫内联元素，有：

1. <a>标签可定义锚
2. <abbr>表示一个缩写形式
3. <acronym>定义只取首字母缩写
4. <b>字体加粗
5. <bdo>可覆盖默认的文本方向
6. <big>大号字体加粗
7. <br>换行
8. <cite>引用进行定义
9. <code>定义计算机代码文本
10. <dfn>定义一个定义项目
11. <em>定义为强调的内容
12. <i>斜体文本效果
13. <img>向网页中嵌入一幅图像
14. <input>输入框
15. <kbd>定义键盘文本
16. <label>标签 为<input>元素定义标注（标记）
17. <q>定义短的引用
18. <samp>定义样本文本
19. <select>创建单选或多选菜单
20. <small>呈现小号字体效果
21. <span>组合文档中的行内元素
22. <strong>语气更强的强调的内容
23. <sub>_{定义下标文本}
24. <sup>^{定义上标文本}
25. <textarea>多行的文本输入控件
26. <tt>打字机或者等宽的文本效果
27. <var>定义变量

块级元素有：

1. <address>定义地址
2. <caption>定义表格标题
3. <dd>定义列表中定义条目
4. <div>定义文档中的分区或节
5. <dl>定义列表
6. <dt>定义列表中的项目
7. <fieldset>定义一个框架集
8. <form>创建 HTML表单
9. <h1>定义最大的标题
10. <h2>定义副标题
11. <h3>定义标题
12. <h4>定义标题
13. <h5>定义标题
14. <h6>定义最小的标题
15. <hr>创建一条水平线
16. <legend>元素为<fieldset>元素定义标题
17. <li>标签定义列表项目
18. <noframes>为那些不支持框架的浏览器显示文本，于 frameset元素内部
19. <noscript>定义在脚本未被执行时的替代内容
20. <ol>定义有序列表
21. <ul>定义无序列表
22. <p>标签定义段落
23. <pre>定义预格式化的文本
24. <table>标签定义HTML表格
25. <tbody>标签表格主体（正文）
26. <td>表格中的标准单元格
27. <tfoot>定义表格的页脚（脚注或表注）
28. <th>定义表头单元格
29. <thead>标签定义表格的表头
30. <tr>定义表格中的行

点击查看行内元素和块级元素区别>>

---

2. 写一下DOM节点的增删改

1. 查找
   DOM1：getElementById(),getElementsByTagName()
   DOM扩展：querySelector()（返回第一个匹配的元素）,querySelectorAll()（返回全部匹配的元素）
   HTML5：getElementsByClassName()
2. 插入
   appendChild()：末尾插入
   insertBefore()：特定位置插入
3. 替换
   replaceChild()：接受两个参数，第一个为要插入的节点，第二个为要替换的节点
4. 删除
   removeChild()
5. 创建
   createElement()

---

3. 讲讲304

304状态码是告诉浏览器可以从缓存中获取所请求的资源。

当浏览器请求某一文件时，发现自己缓存的文件有Last-Modified，就会在httpRequest里面添加消息头If-Modified-Since和If-Non-Match，服务器在收到reqeust时，和服务器本地文件对比，如果没有更新，则仅仅返回一个响应头Head（状态码304，而没有响应体），客户端在收到这个响应时，就会从本地缓存加载请求的资源。

点击了解更多HTTP状态码>>

---

4. 如何让一个元素消失

隐藏元素的几种方法：

1. 该元素样式设置：display:none;
2. 该元素样式设置：visibility:hidden;
3. 该元素样式设置高宽为0
4. 隐藏其祖先元素
5. 该元素样式设置：opacity:0;

---

5. 事件监听

1. 传统事件绑定

• 在事件名称前加on如：onclick，onload
• 兼容性好
• 同一个元素绑定多个事件时只有最后一个会被触发

2. addEventListener()

• 语法element.addEventListener(type, function, useCapture)第三个参数指定事件是否在捕获阶段执行，默认false（冒泡阶段执行），true（捕获阶段执行）
• 可以给同一个元素绑定多个事件，且不会覆盖。先绑定的事件先执行
• IE低版本不兼容
• removeEventListener()方法移除绑定事件

3. attachEvent()

• 语法：element.attachEvent('on+type',function）
• IE的方法，不遵循W3C标准
• 后绑定，先执行

---

6. 数组常用的方法有哪些（点击查看）>>

---

7. 遍历数组处理用for循环还有什么方法吗

遍历数组的方法：

1. for循环
2. for...of循环
3. forEach()
4. map()
5. filter()
6. every()
7. some()
8. reduce()
9. reduceRight()
10. find()
11. findIndex()
12. keys()，values()，entries()

点击查看更多数组方法>>

---

8. 给你一个乱序数组，你怎么样排序

排序的方法：

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 插入排序
5. 归并排序
6. 希尔排序
7. 堆排序

数组排序：除了上诉算法排序还可以使用sort()方法

点击查看常见排序算法实现>>

---

9. 介绍一下盒子模型（点击查看）>>

---

10. 讲讲JS的语言特性

1. 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2. 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3. 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4. 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
5. 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。