nodeValue vs innerHTML e textContent. Como escolher?
estou a usar js simples para alterar o texto interno de um elemento do rótulo, e não tinha a certeza com que fundamentos deveria usar innerHTML ou nodeValue ou textContent. Eu não preciso criar um novo nó ou alterar os elementos HTML ou qualquer coisa - basta substituir o texto. Aqui está um exemplo do Código:
var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works
myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.
myLabel.textContent = "Some new label text!"; // this also works.
Se for o primeiro filho.o nodeValue é muito mais rápido, Qual é a contrapartida? Não é amplamente apoiado? Há mais algum problema?
4 answers
Diferenças entre textContent/innerText / innerHTML no MDN.
E uma resposta de Stackoverflow sobre innerText/nodeValue.
Resumo
- nodeValue é um pouco mais confuso de usar, mas mais rápido do que innerHTML.
- innerHTML analisa o conteúdo como HTML e leva mais tempo.
- textContent usa texto direito, não processa HTML, e é mais rápido.
- texto inerte Leva styles em consideração. Não vai receber texto escondido, por exemplo.
innerText não existia no firefox até FireFox 45 De acordo com caniuse mas agora é suportado em todos os navegadores principais.
.textContent saídas text/plain enquanto .innerHTML saídas text/html.
Exemplo rápido:
var example = document.getElementById('exampleId');
example.textContent = '<a href="https://google.com">google</a>';
Saída: google
example.innerHTML = '<a href="https://google.com">google</a>';
Resultado: google
Você pode ver a partir do primeiro exemplo que o resultado do tipo text/plain não é processado pelo navegador e resulta na apresentação completa do conteúdo. O resultado do tipo text/html diz ao navegador para o analisar antes de o mostrar.
Os dois que conheço bem e com quem trabalho são innerHTML e conteúdo de texto .
Eu uso o conteúdo do texto Quando só quero alterar o texto de um parágrafo ou título assim:
var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')
setTimeout(function () {
heading.textContent = 'My New Title!'
paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)em { font-style: italic; }<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>Assim, textContent {[9] } apenas muda o texto, mas ele não processa HTML, como podemos dizer a partir das marcas visíveis em texto simples no resultado lá.
Se queremos processar HTML, usamos innerHTML como isto:
var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')
setTimeout(function () {
heading.innerHTML = 'My <em>New</em> Title!'
paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)em { font-style: italic; }<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>Então, esse segundo exemplo analisa a cadeia que atribuo à propriedade do elemento DOM innerHTML como HTML.
Isto é incrível e uma grande vulnerabilidade de segurança.(procure XSS se quiser saber sobre segurança para isto)
InnerText é mais ou menos o que receberia se seleccionasse o texto e o copiasse. Elementos que não são renderizados não estão presentes no texto interno.
TextContent é uma concatenação dos valores de all TextNodes na sub-árvore. Seja renderizado ou não.
Aqui está um Grande post detalhando as diferenças
InnerHTML não deve ser incluído numa comparação com o texto inerte ou o conteúdo de texto, Uma vez que é totalmente difreente., e você deve realmente saber por que:-) procure separadamente