Firefox中firstElementChild正常工作，Webkit却返回null的原因

场景：设置了contenteditable="true"的div中包含<strong>test</strong>文本，选中"test"后调用cloneContents()，Firefox能正确返回<strong>作为firstElementChild，但Webkit内核浏览器（Chrome、Safari等）返回null。

复现代码 #

HTML

<div id="texteditor" contenteditable="true">
    This is a <strong>test</strong>
</div>
<button onclick="test()">Test</button>

JavaScript

function test() {
    if (window.getSelection) {
        const selection = window.getSelection();
        if (selection.type == 'Range') {
            const selRange = selection.getRangeAt(0);
            const clone = selRange.cloneContents();
            const firstelement = clone.firstElementChild;
            console.log(firstelement);
        }
    }
}

原因分析 #

这是Webkit（Chrome、Safari）和Gecko（Firefox）内核对Selection API的实现差异导致的：

• Firefox在选中元素内的文本时，会将整个包含文本的元素（这里是<strong>）纳入选区范围，调用cloneContents()会直接克隆整个<strong>元素，因此firstElementChild能拿到该元素。
• Webkit则会精确选中文本节点本身，而非包含它的元素。此时cloneContents()克隆的是文本节点（而非<strong>元素），而firstElementChild只返回元素节点，文本节点不属于元素节点范畴，因此返回null。

解决方案 #

可以通过选区的起始/结束节点的父元素来获取目标元素，避免依赖cloneContents()的返回结构：

function test() {
    if (window.getSelection) {
        const selection = window.getSelection();
        if (selection.type === 'Range') {
            const selRange = selection.getRangeAt(0);
            // 判断选区的起始和结束节点是否同属一个父元素
            const startParent = selRange.startContainer.parentElement;
            const endParent = selRange.endContainer.parentElement;
            
            let targetElement;
            if (startParent === endParent) {
                // 选中的文本完全在同一个元素内，直接取父元素
                targetElement = startParent;
            } else {
                // 处理跨元素选区的情况， fallback到cloneContents
                const clone = selRange.cloneContents();
                targetElement = clone.firstElementChild || clone.firstChild?.parentElement;
            }
            console.log(targetElement);
        }
    }
}

补充说明 #

contenteditable场景下的选区处理需要注意浏览器内核的实现差异，尽量避免直接依赖cloneContents()返回的片段结构，而是通过选区的节点上下文（如startContainer、endContainer）来定位目标元素，这样能获得更好的兼容性。

内容的提问来源于stack exchange，提问作者Pål Bergström