返回

纵横交错，这道字节跳动面试题令我目不暇接

前端

当我在字节跳动的面试中遇到这道题时，我着实吃了一惊。它并不是传统的笔试题，而是要求我在浏览器控制台中直接编写代码并运行，现场考察我的编码能力和对浏览器的理解。题目的具体内容如下：

<div id="container">
  <p>Hello, world!</p>
</div>

<script>
  var div = document.getElementById("container");
  console.log(div.innerHTML);
  console.log(div.outerHTML);
  console.log(div.textContent);
</script>

乍一看，这道题似乎很简单，只需要输出 div 元素的 innerHTML、outerHTML 和 textContent 属性即可。然而，当我在控制台中运行代码时，却得到了意料之外的结果：

<p>Hello, world!</p>
<div id="container"><p>Hello, world!</p></div>
Hello, world!

这与我的预期大相径庭。按我的理解，innerHTML 应该输出 <div id="container"><p>Hello, world!</p></div>，而 outerHTML 应该输出 <p>Hello, world!</p> 才对。那么，问题出在哪里呢？

经过一番思考，我意识到这道题考察的其实是浏览器对 HTML 代码的解析和渲染过程。当浏览器解析 HTML 代码时，它会将 <div> 元素和 <p> 元素分别解析成两个独立的节点，并按照一定的规则将它们渲染到页面上。而 innerHTML、outerHTML 和 textContent 这三个属性正是用来获取这些节点的 HTML 代码的。

innerHTML 属性获取的是当前元素内部所有子元素的 HTML 代码，包括子元素本身的标签名和属性。因此，div.innerHTML 的输出结果是 <p>Hello, world!</p>。

outerHTML 属性获取的是当前元素本身的 HTML 代码，包括元素的标签名、属性和子元素的 HTML 代码。因此，div.outerHTML 的输出结果是 <div id="container"><p>Hello, world!</p></div>。

textContent 属性获取的是当前元素及其所有子元素的文本内容，不包括 HTML 代码。因此，div.textContent 的输出结果是 Hello, world!。

这道题不仅考察了对 HTML 代码的理解，还考察了对浏览器解析和渲染过程的理解。通过这道题，我深刻地认识到，前端开发并不仅仅是编写代码，更重要的是理解代码背后的原理和机制。

希望这篇文章对您有所帮助。如果您有任何问题，请随时留言。