Text Property In Script Tags - Clarification?
Solution 1:
Here's a fork of your jsbin where you can see the difference: http://jsbin.com/tovipiruce/1/edit?html,js,output
Or, if you're a snippets fan:
var scriptElem = document.getElementById('a');
var child = document.createElement('b');
child.textContent = 'Look at me! I am irrelevant!';
var comment = document.createComment('I contain a lot of wisdom');
var justText = document.createTextNode('just your average text node');
scriptElem.appendChild(child);
scriptElem.appendChild(comment);
scriptElem.appendChild(justText);
console.log(scriptElem);
console.log('textContent:', scriptElem.textContent);
console.log('innerText:', scriptElem.innerText);
console.log('text:', scriptElem.text);<!DOCTYPE html><html><body><p>Open your console</p><scriptid="a"type="blabla">
foo
<b>bar</b>
baz
</script></body></html>The Big Difference here is how child elements are handled: textContent includes the child elements, so that the output will contain Look at me! I am irrelevant!, while textwill not.
I'll repeat that in code:
scriptElem.textContent.includes('Look at me!'); //true
scriptElem.text.includes('Look at me!'); //falseThe Getter
Let's look at a very naive implementing of the getters of textContent and text:
functiontextContent(elem) {
returnArray.from(elem.childNodes).map(node => {
// recurse into element nodesif (node.type === Node.ELEMENT_NODE) {
returntextContent(elem);
}
// return the value of text nodesif (node.type === Node.TEXT_NODE) {
return node.nodeValue;
}
// and ignore everything elsereturn'';
}).join('');
}
functiontext(elem) {
returnArray.from(elem.childNodes).map(node => {
// return the value of text nodesif (node.type === Node.TEXT_NODE) {
return node.nodeValue;
}
// and ignore everything elsereturn'';
}).join('');
}
As you can see (and as the specification says and the example shows), only text nodes are handled when getting an element's text property, while textContent also throws into the mix the textContent of its element children.
innerText is a more complex beast which won't be explained in this answer; it's like a normalized textContent. You can read more about it in this fabulous blog post by Kagnax.
The Setter
Now let's talk about the setter. The specification says it should behave the same way as setting textContent, but mdn says the following bizarre thing:
Unlike the textContent attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.
There're two ways to interpret this sentence: Either that setting a script's textContent before injecting it into the page has no effect while setting text does, or that after injecting it into the page setting textContent has no effect but setting text does.
Testing on latest Chrome (47) and Firefox (43) shows that both interpretations are false: setting a textContent before injection works, and setting text after injection has no effect. If someone has an IE lying around and wishes to test this, I'd appreciate if you edit this answer.
...but why?
So we've gone through the setter and the getter. Now let's ask why is text useful? That's an open question. Frankly, I don't really know. As you've seen in your original code, you can't just insert markup in a script tag, it's not parsed as html. So the only way to see a difference is when you dynamically inject nodes inside a script tag.
I ran git blame on that file, and saw that it came from this commit:
fix(script): Incorrectly reading script text on ie
IE deals with script tags in special way and .text() does not work. Reading the .text property directly fixes the issue.
The added test case does a binding inside the script tag. I don't know angular so I don't know what that entails, nor do I have IE so I can't check what happens in the test case when you use textContent instead of text.
But I couldn't help but smile when I saw that IE was still alive and kickin'.
Post a Comment for "Text Property In Script Tags - Clarification?"