element 方法返回的boolean被当成字符串了_Element 和 Node的关系是个啥

大家好，我是老皮； 说起这个话题要从一个面试题开始，前两天一个朋友发给我的(某团面试题)，这个题简单的很，但是估计很多人不能自信的说出结果和原因。

先看下题目：

                Document        .box{        width: 400px;        border:solid 1px #000;    }    img{        width: 50%;    }    

请说出上面代码的显示结果，然后说下原因。 emm..... 其实这个布局的最终目的是想让图片并排显示，但是这样写并不能达到我们想要的结果，还是从细节中考查我们对 DOM 的理解和应用。 01

问题分析

当然做题是次要的，我们来分析下原因。 先看下效果，下面这个结果应该和你想的差不多吧。

这是什么原因呢？我们都知道 img标签默认是内联元素，除非剩余宽度不足才会换行，代码中我们都设置成为50%,宽度也没有超出呀。 这是因为html中标签后的每个换行也会被当做是一个节点，会进行渲染，也会占用空间，这个节点就是text节点，他不像标签那么形象，可以有具体的表示，他就是换行和空字符串的组合。 既然他是存在的，那我们使用 js 拿到这些节点。

document.getElementsByClassName('box')[0].children

上面的代码应该没什么问题，但是结果里没有我们所说的 text节点。

请看下MDN 里这个方法的说明

ParentNode.children 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。

也就是说children属性返回的是elements,然而 text node属于Node，所以没有返回。 所以我们需要使用另外一个方法得到

document.getElementsByClassName('box')[0].childNodes

上面的结果的确得到了text node，但是同时也把 img返回了。 02

element 和 node 关系

可能你会问 element和node到底什么区别呢？ 一图胜千言

从上图中可以很清晰的看到他们的关系，越往上越抽象，越往下越具体，从继承的角度来说Element继承自Node,具有node的方法，同时扩展了很多自己的独有的方法。 所以在Element的一些方法里，是明确区分了Node和Element的，比如说：childNodes, children, parentNode, parentElement等方法。 另外Node表示的是DOM树的结构，在html中，节点与节点之间是可以插入文本的，这个插入的空隙就是TEXT_NODE，也就是我们上题中的情景。 所以总结来说，我们可以把所有的element看作是 node，但是所有的 node 并不是 element。 回到题中，我们让 text node显示出来。 给所有的 text node 设置文本

document.getElementsByClassName('box')[0].childNodes.forEach(item=>{item.nodeType===3?item.appendData('text node'):null})

03

处理问题

说到这里，我觉得如何解决问题已经不重要了，如果能分析出来，自然就有了解决方法。 最直接的手段就是删除掉 text node。

搞定！但这可读性太差了，看着多别扭，设置字号为0.font-size:0。最后也不一定能过。 如果你的回答只说会换行显示，这个也不能说是100%对，因为还少说了一项。 这个空隙呢？

很熟悉吧。 到这里可能面试官就会给过了。好难...ಥ_ಥ 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Node https://developer.mozilla.org/zh-CN/docs/Web/API/Element