1
我有一個div一個節點內:JS TreeWalker和/或document.createRange()不拾取單個元素
<section id="Source" class="source">
<div>
test
</div>
</section>
,我想獲得它的內容與document.createRange()
和document.createTreeWalker()
按以下:
function findEndNode(source, maxHeight) {
const range = document.createRange();
range.selectNodeContents(source);
var nodes = document.createTreeWalker(
source,
NodeFilter.SHOW_ELEMENT,
null,
null
);
while (node = nodes.nextNode()) {
range.setEndBefore(nodes.currentNode);
const {
height
} = range.getBoundingClientRect();
const rangeHeight = height;
if (maxHeight <= rangeHeight) {
console.log('out of bounds');
const newNode = nodes.previousNode();
range.setEndBefore(nodes.currentNode);
break;
} else {
console.log('within bounds');
continue;
}
}
return range;
};
但是在某個地方,最內層的節點會丟失。如您在完整代碼(包含在代碼段中)中看到的,「測試」跨度保持在源內部,而它應該移動到克隆。
const source = document.getElementById('Source');
const target = document.getElementById('Target');
const wrapper = document.getElementById('Wrapper');
wordWrap(source);
splitContent(source, target, wrapper);
//splitContent(source, target, wrapper);
function splitContent(source, target, wrapper) {
const {
height
} = target.getBoundingClientRect();
const maxHeight = height;
const range = document.createRange();
const endNode = findEndNode(source, maxHeight);
range.setStart(source, 0);
range.setEnd(endNode.endContainer, endNode.endOffset);
const content = range.extractContents();
const clone = target.cloneNode(false);
clone.id = 'Clone';
clone.appendChild(content);
wrapper.appendChild(clone);
const hasChildren = source.hasChildNodes();
};
function findEndNode(source, maxHeight) {
const range = document.createRange();
range.selectNodeContents(source);
var nodes = document.createTreeWalker(
source,
NodeFilter.SHOW_ELEMENT,
null,
null
);
while (node = nodes.nextNode()) {
range.setEndBefore(nodes.currentNode);
const {
height
} = range.getBoundingClientRect();
const rangeHeight = height;
if (maxHeight <= rangeHeight) {
console.log('out of bounds');
const newNode = nodes.previousNode();
range.setEndBefore(nodes.currentNode);
break;
} else {
console.log('within bounds');
continue;
}
}
return range;
};
function wordWrap(element) {
var nodes = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
null,
null
);
var node;
while (node = nodes.nextNode()) {
var p = node.parentNode;
var text = node.nodeValue;
var m;
while (m = text.match(/^(\s*)(\S+)/)) {
text = text.slice(m[0].length);
p.insertBefore(document.createTextNode(m[1]), node);
var word = p.insertBefore(document.createElement('span'), node);
word.appendChild(document.createTextNode(m[2]));
word.className = 'word';
}
node.nodeValue = text;
}
}
section {
font-family: arial;
font-size: 11pt;
}
.target {
height: 400px;
width: 400px;
border: 2px dashed green;
margin: 20px;
}
.source {
border: 2px dashed blue;
width: 400px;
margin: 20px;
}
#Clone {
border-color: red;
}
<section id="Source" class="source">
<div>
test
</div>
</section>
<div id="Target" class="target">
</div>
<section id="Wrapper">
</section>