前端经典面试题
以下是一些经典的前端面试题及其答案：
1. 什么是闭包？
闭包（Closure）是指有权访问另一个函数作用域中变量的函数。简单来说，闭包就是一个函数能够访问它声明时所处的作用域以外的变量。
2. null 和 undefined 有什么区别？
null 表示一个空对象指针，可以将其赋给一个对象来释放该对象的引用。undefined 表示一个声明的变量未被赋值，也可以将其作为函数参数来指示该参数未传递。
3. 如何判断一个变量是数组？
可以使用 Array.isArray() 方法来判断一个变量是否是数组。
Array.isArray([]); // true
Array.isArray({}); // false
4. 如何判断一个变量是对象？
可以使用 typeof 运算符，当类型为 object 并且不为 null 时，这个变量就是对象。
typeof {}; // object
typeof null; // object
5. 如何判断一个变量是字符串？
可以使用 typeof 运算符判断一个变量是否为字符串。
typeof "hello"; // string
6. 如何将字符串转换成数字？
可以使用 parseInt() 函数或 parseFloat() 函数将字符串转换成数字。
parseInt("123"); // 123
parseFloat("123.45"); // 123.45
7. 如何将数字转换成字符串？
可以使用 toString() 方法将数字转换成字符串。
var num = 123;
num.toString(); // "123"
8. 什么是事件冒泡？
事件冒泡是指事件在触发元素后，会依次向上冒泡触发父元素的同类型事件。例如，当一个按钮被点击时，按钮的 click 事件会被触发，然后会冒泡到按钮的父元素，父元素也会触发一个 click 事件，然后依次冒泡到更上层的祖先元素。
9. 如何阻止事件冒泡？
可以使用 event.stopPropagation() 方法来阻止事件冒泡。
element.addEventListener('click', function (event) {
event.stopPropagation();
}, false);
10. 如何阻止默认事件行为？
可以使用 event.preventDefault() 方法来阻止默认事件行为。
element.addEventListener('click', function (event) {
event.preventDefault();
}, false);
11. 如何判断一个元素是否包含某个 class？
可以使用 element.classList.contains() 方法来判断一个元素是否包含某个 class。
var element = document.getElementById("myDiv");
if (element.classList.contains("myClass")) {
// ...
}
12. 如何添加一个 class？
可以使用 element.classList.add() 方法来添加一个 class。
var element = document.getElementById("myDiv");
element.classList.add("myClass");
13. 如何移除一个 class？
可以使用 element.classList.remove() 方法来移除一个 class。
var element = document.getElementById("myDiv");
element.classList.remove("myClass");
14. 如何在两个元素之间插入一个元素？
可以使用 element.insertBefore() 方法来在一个元素之前插入一个元素。
var parent = document.getElementById("parent");
var referenceNode = document.getElementById("reference");
var newNode = document.createElement("div");
parent.insertBefore(newNode, referenceNode);
15. 如何移除一个元素？
可以使用 element.parentNode.removeChild(element) 方法来移除一个元素。
var element = document.getElementById("myDiv");
element.parentNode.removeChild(element);
16. 如何获取元素的属性？
可以使用 element.getAttribute() 方法来获取元素的属性。
<div id="myDiv" title="This is a title">div>
var element = document.getElementById("myDiv");
var title = element.getAttribute("title");
17. 如何设置元素的属性？
可以使用 element.setAttribute() 方法来设置元素的属性。
<div id="myDiv">div>
var element = document.getElementById("myDiv");
element.setAttribute("title", "This is a title");
18. 如何获取元素的样式？
可以使用 element.style 对象来获取或设置元素的样式。
<div id="myDiv" style="color: red;">div>
var element = document.getElementById("myDiv");
var color = element.style.color;
19. 如何设置元素的样式？
可以使用 element.style 对象来获取或设置元素的样式。
<div id="myDiv">div>
var element = document.getElementById("myDiv");
element.style.color = "red";
20. 如何获得元素的文本内容？
可以使用 element.innerHTML 属性来获取或设置元素的文本内容。
<div id="myDiv">This is some textdiv>
var element = document.getElementById("myDiv");
var text = element.innerHTML;
21. 如何设置元素的文本内容？
可以使用 element.innerHTML 属性来获取或设置元素的文本内容。
<div id="myDiv">div>
var element = document.getElementById("myDiv");
element.innerHTML = "This is some text";
22. 如何创建一个元素？
可以使用 document.createElement() 方法来创建一个元素。
var element = document.createElement("div");
23. 如何向一个元素添加子元素？
可以使用 element.appendChild() 方法来向一个元素添加子元素。
var parent = document.getElementById("parent");
var child = document.createElement("div");
parent.appendChild(child);
24. 如何获取浏览器窗口大小？
可以使用 window.innerWidth 和 window.innerHeight 属性来获取浏览器窗口的宽度和高度。
var width = window.innerWidth;
var height = window.innerHeight;
25. 如何获取元素在文档中的位置？
可以使用 element.getBoundingClientRect() 方法来获取元素在文档中的位置。
<div id="myDiv">div>
var element = document.getElementById("myDiv");
var rect = element.getBoundingClientRect();
console.log(rect.left, rect.top);
26. 如何在 URL 中获取查询字符串参数？
可以使用 URLSearchParams 对象来获取查询字符串参数。
var params = new URLSearchParams(window.location.search);
var value = params.get("name");
27. 什么是跨域请求？如何解决跨域问题？
跨域请求是指请求一个不同于当前页面的域，跨域问题是由于浏览器的同源策略导致的。可以通过以下方式来解决跨域问题：
- JSONP：利用