相关面试题7
面试题7
- 1.说说你对盒子模型的理解
- 2.css选择器有哪些？优先级？哪些属性可以继承？
-
- 一、选择器
- 3.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
-
- 实现方式
-
- 1、利用定位 + margin:auto
- 2、利用定位 + margin:负值
- 3、利用定位 + transform
- 4、table布局
- 5、flex弹性布局
- 6、grid网格布局
- 4.怎么理解回流跟重绘？什么场景下会触发？
-
- 一、是什么？
- 5.什么是响应式设计？响应式设计的基本原理是什么？如何做？
-
- 一、什么是响应式设计？
- 二、原理？
- 三、如何做？
- 6.如果要做优化，CSS提高性能的方法有哪些？
- 7. 对前端工程师这个职位是怎么样理解的？它的前景会怎么样？
- 8. 说说JavaScript中的数据类型？存储上的差别？
- 9. typeof 与 instanceof 区别
- 10. 说说你对闭包的理解？闭包使用场景
-
- 闭包
- 内存泄漏的理解？情况有哪些？
- 11. bind、call、apply 区别？如何实现一个bind?
- 12. 说说你对事件循环的理解
- 13. DOM常见的操作有哪些？
-
- 什么是DOM？
- 常见的dom操作：
- 14. 说说你对BOM的理解，常见的BOM对象你了解哪些？
- 15. Javascript本地存储的方式有哪些？区别及应用场景？
-
- 一、方式
- 二、区别
- 三、应用场景
- 16. 什么是防抖和节流？有什么区别？如何实现？
-
- 二、区别
- 三、如何实现？
- 四、应用场景
- 17. 如何通过JS判断一个数组
- 18. 说说你对作用域链的理解
- 19. JavaScript原型，原型链 ? 有什么特点？
- 20. 请解释什么是事件代理？
-
-
- 一、什么是事件委托
- 二、原理
- 三、使用事件代理的好处？
- 四、应用场景？
-
- 21. 谈谈This对象的理解
- 22. new操作符具体干了什么
- 23. null，undefined 的区别
-
-
- 一、概念
- 二、区别
- 三、null 和 undefined分别在实际项目中出现的场景有哪些
-
- 24. javascript 代码中的"use strict";是什么意思
- 25. 同步和异步的区别
- 26. 谈一谈箭头函数与普通函数的区别
- 27. JS 数组和对象的遍历方式，以及几种方式的比较
- 28. 如何解决跨域问题
- 29. XML和JSON的区别
- 30. 谈谈你对webpack的看法
-
-
- webpack理解
- 优势：
- **说一说Loader和Plugin的区别**
-
- 31. webpack的打包原理
- 32. 如何优化webpack打包速度
- 33. 说说webpack中常见的Loader？解决了什么问题？
- 34. 说说webpack中常见的Plugin？解决了什么问题？
- 35. 说说你对promise的了解
- 36. async函数是什么，有什么作用？
- 37. 有使用过vue吗？说说你对vue的理解？
-
-
- 一、vue是什么：
-
- 38. 你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢
- 39. SPA首屏加载速度慢的怎么解决？
- 40. VUE路由的原理
- 41. Vue中组件和插件有什么区别？
- 42. Vue组件之间的通信方式都有哪些
- 43. 你了解vue的diff算法吗？说说看
-
- 一、是什么diff算法
- 二、特点：
- 三、Diff算法的步骤：
- 四、比较方式
- 44. 为什么需要 Virtual Dom
- 45. Vue3.0的设计目标是什么？做了哪些优化
- 46. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？
- 47. 说一下Vue数据响应式的原理
- 48.说说对 React 的理解?有哪些特性?
-
- 一、是什么？
- 二、react特性？
- 49. 说说 Real DOM 和 Virtual DOM 的区别？优缺点？
- 50. 说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?
- 51. 说说 React 中的 setState 执行机制
- 52.说说对 React 中类组件和函数组件的理解?有什么区别?
-
- 一、理解
- 二、区别：
- 53. 说说对React Hooks的理解？解决了什么问题？
-
- 理解
- 解决的问题？
- 54. 说说你对Redux的理解？其工作原理？
- 55. 说说 React 性能优化的手段有哪些
- 56. vue、react、angular 区别
- 57. 说说你对 TypeScript 的理解？与 JavaScript 的区别
1.说说你对盒子模型的理解
当我们对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础框盒模型，将所有的元素表示为一个个矩形的盒子。这个盒子是由四个部分组成：内容区(content)、内边距(padding)、外边距 (margin)和边框 (border) 。
内容区域（Content）：盒子内部用来显示实际内容的区域，比如文字、图片、嵌套元素等。
内边距（Padding）：内容区域和边框之间的区域，用于设置内部内容与边框之间的间距。可以通过设置padding属性来指定。
边框（Border）：包围内容及其内边距的边界线，可以设置边框的样式、粗细和颜色等。使用border属性进行设置。
外边距（Margin）：盒子与周围元素之间的空白区域，用于设置盒子与其他元素之间的间距。可以通过设置margin属性来定义。
盒模型分为标准盒模型 和 IE怪异盒模型。
在标准的盒模型中一个盒子的宽度是：margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width).
而在怪异盒模型中：一个块的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）。
2.css选择器有哪些？优先级？哪些属性可以继承？
一、选择器
CSS选择器是CSS规则的第一部分
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”
<div id="box">
<div class="one">
<p class="one_1">
</p>
<p class="one_1">
</p>
</div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>
css属性选择器常用的有(如上代码所展示)：
- id选择器（#box），选择id为box的元素
- 类选择器（.one），选择类名为one的所有元素
- 标签选择器（div），选择标签为div的所有元素
- 后代选择器（#box div），选择id为box元素内部所有的div元素
- 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
- 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
- 群组选择器（div,p），选择div、p的所有元素。
- 通配符选择器（*）
- 属性选择器（a[rel=“external”]）
- 伪类选择器（a:hover, li:nth-child）
- 可继承的属性：font-size, font-family, color
- 不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > id > class > 标签选择器
可以继承的属性：
可继承的属性：字体系列继承，文本系列继承，元素可见性，表格布局属性，列表属性，引用，光标属性
继承中比较特殊的点：a标签的字体颜色不能继承 h1-h6字体大小也不能继承
没有继承的属性：文本属性，display，盒子模型属性，背景属性，生成内容属性，轮廓样式属性，页面样式属性
3.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
实现方式
- 利用定位 + margin:auto
- 利用定位 + margin:负值
- 利用定位 + transform
- table布局
- flex布局
- grid布局
1、利用定位 + margin:auto
父级设置为相对定位，子级设置为绝对定位，并且四个定位属性（top、left、bottom、right）的值都设置为0。
如果子级没有设置宽高，则会被拉开到和父级一样的宽高
如果子级设置宽高，则会按照设置的宽高来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候在给它一个 margin:auto 它就可以上下左右都居中了
<style>
.father{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.son{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<div class="father">
<div class="son"></div>
</div>
2、利用定位 + margin:负值
父级元素设置为相对定位，子级元素移动自身50%实现水平垂直居中
不要求父元素的高度，即使父元素的高度变化了，仍然可以保持在父元素的垂直居中的位置，水平方向上操作一样 但是需要知道子元素自身的宽高
可以通过transform属性进行移动 ）
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-left:-50px;
margin-top:-50px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
3、利用定位 + transform
transform(-50%，-50%) 会将元素位移自己宽度和高度的 -50%
这种方法和margin负值用法一样，可以说是margin负值的替代方案 不需要知道自身元素的宽高
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
4、table布局
设置父元素为 display:table-cell ，子元素设置为 display:inline-block 。
利用 vertical 和 text-align 可以让所有的行内块级元素水平垂直居中
<style>
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
5、flex弹性布局
flex布局可以非常简单的实现垂直水平居中
flex布局的关键属性作用：
display:flex 时，表示该容器内部的元素将按照flex进行布局
align-items:center 表示这些元素将相对于本容器水平居中
justify-content:center 表示这些元素将相对于本容器垂直居中
<style>
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
6、grid网格布局
跟flex相似
<style>
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}
</style>
<div class="father">
<div class="son"></div>
</div>
不知道元素宽高大小仍能实现水平垂直居中的方法有：
- 利用定位 + margin:auto
- 利用定位 + transform
- flex布局
- grid布局
4.怎么理解回流跟重绘？什么场景下会触发？
一、是什么？
在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，就会设计到回流和重绘。
回流：布局引擎会根据各种样式计算每个盒子在页面上大小与位置
重绘：当计算好盒模型的大小位置以及其他属性之后，浏览器会根据标每个盒子的特性进行绘制
回流的触发时机：
1. DOM结构发生改变 （添加新的节点或者移除节点）
2. 布局发生改变（修改了width、height、padding、font-size等值）
3. 窗口大小发生改变
4. 调用getComputedStyle方法获取尺寸、位置信息
5. 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所代替
6. 页面一开始渲染的时候
重绘触发时机：
修改网页内容的样式时，比如文字颜色，背景颜色，边框颜色，文本方向的修改等。
触发回流就一定会触发重绘，但是有重绘不一定有回流。
（2）触发回流一定会触发重绘
5.什么是响应式设计？响应式设计的基本原理是什么？如何做？
一、什么是响应式设计？
响应式设计是指基于一种网页设计和开发的技术，可以在多端运行，一站适配多端。
二、原理？
流式布局：使用相对单位(%)设计网格系统，以适应不同屏幕大小
弹性图片：使用相对单位(%)设计图片大小，以适应不同屏幕大小
媒体查询： 使用css媒体查询技术，检测不同设备的屏幕大小，以调用整网布局和样式
三、如何做？
规划设计：考虑用户和设备的特点，确定设计目标和要素
设计布局：根据设计目标和要素，设计具有弹性布局
编写css：使用相对单位和媒体查询技术，编写适应不同屏幕大小的css样式
测试和验证：在不同设备和浏览器上测试和验证网站的响应式效果
6.如果要做优化，CSS提高性能的方法有哪些？
-
减少选择器复杂性：复杂的CSS选择器会增加解析和匹配的时间，尽量使用简单的选择器，避免使用通配符、后代选择器和标签选择器等。具体而言，减少嵌套层级、避免使用通用选择器，尽量针对具体的元素进行选择，可以提高选择器的性能。
-
进行CSS合并和压缩：将多个CSS文件合并成一个文件，并进行压缩，可以减少HTTP请求次数和文件大小，提高页面加载速度。可以使用CSS预处理工具（如Sass、Less）来处理和合并CSS文件，同时使用压缩工具（如CSS Nano、UglifyCSS）来压缩CSS代码。
-
避免使用@import：@import指令会导致浏览器发起多次的HTTP请求来加载外部样式表，可以考虑使用标签替代@import，这样浏览器可以并行加载多个样式表，提高加载速度。
-
尽量使用内联样式和内部样式表：内联样式和内部样式表可以减少HTTP请求，具有更高的加载优先级，适用于少量的样式规则或者页面的独特样式。
-
使用缓存：配置适当的HTTP缓存策略，使浏览器能够缓存CSS文件，减少重复的加载和下载。
-
避免使用昂贵的CSS属性和效果：某些CSS属性和效果（如阴影、渐变、动画等）会对性能产生较大的影响，特别是在移动设备上。在使用这些效果时，要注意它们对渲染和绘制的影响，并考虑是否值得牺牲性能来实现特定的效果。
-
使用CSS Sprites：将多个小图标合并成一个大图，并通过background-position属性来显示不同的图标，可以减少HTTP请求次数，提高加载速度。
-
提取共享样式：将重复使用的样式抽取到公共的样式表中，通过类和ID进行复用，减少重复的样式定义。
-
使用媒体查询：根据设备的特性和不同的屏幕尺寸，使用媒体查询来适配不同的样式规则，减少不必要的样式加载和渲染。
-
使用异步加载CSS：对于不影响页面渲染的部分，可以将其异步加载，以提高首次渲染速度。可以使用defer属性或通过JavaScript动态加载样式表。
以上是一些常见的CSS性能优化方法，根据具体的场景和需求，可以结合实际情况选择适合的优化策略。
7. 对前端工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
实现界面交互，提升用户体验，基于nodejs可跨平台开发
前景：
前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
参与项目，快速高质量完成实现效果图，精确到1px；
与团队成员，UI设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
处理hack，兼容、写出优美的代码格式；
针对服务器的优化、拥抱最新前端技术
8. 说说JavaScript中的数据类型？存储上的差别？
JavaScript中有多种数据类型，包括基本数据类型和引用数据类型。
-
基本数据类型（Primitive Data Types）：
- Number（数字类型）：用于存储数字，可以是整数或浮点数。
- String（字符串类型）：用于存储文本字符串。
- Boolean（布尔类型）：用于存储逻辑值，即true（真）或false（假）。
- Null（空类型）：用于表示一个空值。
- Undefined（未定义类型）：用于表示未定义的值。
这些基本数据类型在存储上通常被直接存储在变量的栈内存中，因为它们的值比较简单且固定，占用的空间较小。
-
引用数据类型（Reference Data Types）：
- Object（对象类型）：用于存储键值对集合，或者可以说是一组相关数据和功能的集合。
- Array（数组类型）：用于存储任意类型的值的有序列表。
- Function（函数类型）：用于存储一组可执行的代码。
这些引用数据类型在存储上与基本数据类型不同，它们的值实际上是存储在堆内存中的对象。变量中存储的是对象的引用地址，通过这个地址可以找到实际的对象。
值得注意的是，基本数据类型在赋值时是按值传递的，即复制一份值给新的变量；而引用数据类型在赋值时是按引用传递的，即复制一份引用给新的变量，这样两个变量将指向同一个对象。
9. typeof 与 instanceof 区别
Typeof： Typeof操作符返回是一个字符串，表示未经计算的操作数的类型
Instanceof： Instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上
Typeof和instanceof都是用来判断数据类型的方法，区别：
- Typeof会返回一个变量的基本类型
- Instanceof返回的是一个布尔值，可以准确的判断复杂引用数据类型，但是不能正确判断基本数据类型
- Typeof也存在弊端，他虽然可以判断基础数据类型，但是引用类型中，除了function类型以外，其他的也无法判断
- 如果想要通用检测数据类型，可以采用object.prototype.tostring调用该方法，统一返回格式”[onject Xxx]”的字符串
10. 说说你对闭包的理解？闭包使用场景
闭包
闭包是指在一个函数内部，能够访问到外部函数作用域的变量的函数。简而言之，闭包就是一个函数加上该函数能够访问的所有变量的组合。
使用场景包括：
- 封装私有变量：通过闭包可以创建私有变量，防止变量被外部访问或修改。
- 模块化开发：使用闭包可以将一段代码封装成一个模块，避免和全局作用域发生命名冲突，提高了代码的可重用性
- 创建局部作用域：通过闭包可以创建独立的作用域，避免变量冲突。
- 实现函数柯里化：通过闭包可以将一个函数转化为多个函数的链式调用，每次返回一个新的函数处理部分参数。
- 延迟执行：通过闭包可以实现函数的延迟执行，将函数放在闭包中，根据需求进行调用。
- 回调函数：通过闭包可以讲一个函数作为参数传递给另一个函数，实现回调函数的功能
优点：闭包因为长期驻扎在内存中。可以重复使用变量，不会造成变量污染
缺点：闭包会使函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，可能会导致内存泄露。解决方法是在退出函数之前，将不使用的变量全部删除。
需要注意的是，闭包在使用不当的情况下可能会导致内存泄漏，因为它会长时间的保持对外部函数作用域的引用。因此，在使用闭包时要注意避免过度使用或者滥用闭包，以避免潜在的性能和内存问题。
内存泄漏的理解？情况有哪些？
理解：内存泄漏指程序中的一块内存分配出去之后，因为某种原因没有得到释放，无法再次被系统或程序使用，导致内存使用率不断上升的问题。
情况：
- 以意外的全局变量
- 被遗忘的定时器和回调函数
- 循环引用
- DOM元素未正确回收
- 大量数据存储在缓存中
11. bind、call、apply 区别？如何实现一个bind?
bind、call、apply 都是 JavaScript 中用于改变函数执行上下文（即 this 指向）的方法。
区别：
- call 和 apply 方法都是立即调用函数，并且可以传递一个对象作为函数执行的上下文（this 指向），以及其他参数。区别在于 call 方法接受一系列参数，而 apply 方法接受一个参数数组。
- bind 方法不会立即调用函数，而是返回一个新的函数，并可以预先指定函数执行时的上下文（this 指向），以及部分参数。bind 方法返回的新函数可以在稍后被调用。
// 自定义 bind 实现
Function.prototype.myBind = function (context, ...args) {
const fn = this; // 原函数
return function (...innerArgs) {
return fn.apply(context, [...args, ...innerArgs]); // 使用 apply 将上下文和参数传递给原函数
};
};
// 示例使用
const obj = {
name: 'Alice',
};
function sayHello(greeting) {
console.log(`${greeting}, ${this.name}!`);
}
const boundFn = sayHello.myBind(obj, 'Hello');
boundFn('Good morning');
我们给 Function.prototype 添加了一个名为 myBind 的方法。myBind 方法接受一个上下文对象 context
和一系列参数 …args。它返回一个新函数，在新函数内部使用 apply 方法将上下文和参数传递给原函数 fn。通过 myBind
方法可以创建一个新的函数 boundFn，该函数的执行上下文被绑定到了 obj 对象，并且在调用时可以传递额外的参数。
12. 说说你对事件循环的理解
事件循环是 JavaScript 中处理异步操作的一种机制。它负责管理和调度代码执行的顺序，以确保正确处理异步任务和用户交互。
JavaScript 是单线程的，即一次只能执行一段代码。然而，JavaScript 通过事件循环来处理异步任务，使得在执行异步任务时不会阻塞主线程的执行。
事件循环的过程如下：
- 执行同步代码：首先，JavaScript 会执行当前的同步代码块。
- 处理微任务（Promise 和 MutationObserver）：在同步代码执行完后，会检查并执行微任务队列中的所有任务。微任务通常是由 Promise、MutationObserver 等 API 添加的。
- 执行宏任务（例如 setTimeout、setInterval）：检查并执行宏任务队列中的一个任务。宏任务可以看作是消息队列中的一个事件。
- 更新渲染：如果浏览器需要重新渲染页面，会执行必要的渲染操作。
- 循环：重复上述步骤，不断处理微任务和宏任务，直到没有可执行的任务。
在事件循环中，微任务优先于宏任务执行。这意味着微任务会在下一个宏任务之前执行完毕。这种机制确保了异步任务的执行顺序，同时也允许开发人员在合适的时机插入任务并及时更新页面。
事件循环机制的理解对于编写高效的异步 JavaScript 代码非常重要。它可以帮助我们理解事件的触发和处理顺序，从而更好地处理异步操作、优化性能，并提供更好的用户体验。
13. DOM常见的操作有哪些？
什么是DOM？
Dom的全称是Document Object MOdel，是为html和xml提供的api，虽然他们用来标记的标签不同，但是他们的本质的结构是相同的，换句话说，按照dom的标准，html和xml都是以标签为节点构造的树结构，dom将html和xml的相同的结构本质抽象出来，然后通过脚本语言，如js，按照dom里的模型标准访问个操作文档内容
Dom是由三部分进行组成的，包括核心，html接口和xml接口，核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何html和xml中的文档中的数据了，html接口和xml接口两部分则是专门为操作具体html文档和xml文档所提供的高级接口
常见的dom操作：
- 创建节点
- 查询节点
- 更新节点
- 添加节点
- 删除节点
创建节点
createElement
创建新元素，接受一个参数，即要创建元素的标签名
const divEl = document.createElement("div");
createTextNode
创建一个文本节点
const textEl = document.createTextNode("content");
createDocumentFragment
用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中
const fragment = document.createDocumentFragment();
当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment自身，而是它的所有子孙节点
createAttribute
创建属性节点，可以是自定义属性
const dataAttribute = document.createAttribute('custom');
consle.log(dataAttribute);
获取节点
- querySelector
传入任何有效的css 选择器，即可选中单个 DOM元素（首个）：
document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')
如果页面上没有指定的元素时，返回 null
- querySelectorAll
返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表
const notLive = document.querySelectorAll("p");
需要注意的是，该方法返回的是一个 NodeList的静态实例，它是一个静态的“快照”，而非“实时”的查询
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素
document.documentElement; 获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all['']; 获取页面中的所有元素节点的对象集合型
更新节点
- innerHTML
不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
// 获取...
var p = document.getElementById('p');
// 设置文本为abc:
p.innerHTML = 'ABC'; // ABC
// 设置HTML:
p.innerHTML = 'ABC RED XYZ';
// ...
的内部结构已修改
- innerText、textContent
自动对字符串进行HTML编码，保证无法设置任何HTML标签
// 获取...
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '';
// HTML被自动编码，无法设置一个