在脚本标记文本属性 - 澄清？

本文介绍了在脚本标记文本属性 - 澄清？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在阅读角的指示code，我看到的：

  VAR scriptDirective = ['$ templateCache'，函数（$ templateCache）{
  返回{
    限制：'E'，
    终端：真实，
    编译：功能（元素，属性）{
      如果（attr.type =='文/ NG-模板'）{
        VAR templateUrl = attr.id，
            文=元素[0]的.text; //＆LT;  - 看这里        $ templateCache.put（templateUrl，文字）;
      }
    }
  };
}];

但我不知道那是什么文本属性（我的意思是 - ？为什么不使用的innerText）

有人告诉我说：

的这就像刚才的textContent只抓住元素中的文本节点，没有递归或者喜欢的

也期待在：

Wasn't clear for me.

Mdn's :

So I created a test :

<script id="a"   type="blabla">
 foo
   <b>bar</b>
   baz
</script>


<script >
 console.log(document.getElementById('a').text)
 console.log(document.getElementById('a').textContent)
</script>

But both shows the exact content :

"
 foo
   <b>bar</b>
   baz
"

Question:

Why does angular uses text and not textContent ? if it's a template - then they do need to consider tags....no ?
What is the difference (in script tags) between innerText/text/textContent ?

解决方案

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>

<script id="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 text will not.

I'll repeat that in code:

scriptElem.textContent.includes('Look at me!'); // true
scriptElem.text.includes('Look at me!'); // false

The Getter

Let's look at a very naive implementing of the getters of textContent and text:

function textContent(elem) {
    return Array.from(elem.childNodes).map(node => {
        // recurse into element nodes
        if (node.type === Node.ELEMENT_NODE) {
            return textContent(elem);
        }

        // return the value of text nodes
        if (node.type === Node.TEXT_NODE) {
            return node.nodeValue;
        }

        // and ignore everything else
        return '';
    }).join('');
}

function text(elem) {
    return Array.from(elem.childNodes).map(node => {
        // return the value of text nodes
        if (node.type === Node.TEXT_NODE) {
            return node.nodeValue;
        }

        // and ignore everything else
        return '';
    }).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:

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:

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'.

这篇关于在脚本标记文本属性 - 澄清？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！