innerHTML, innerText childNodes[].value arasındaki fark javascript özellikleri nedir?

Aşağıdaki örnekler aşağıdaki HTML parçacığını bakın:

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

Düğüm aşağıdaki JavaScript tarafından okunacak:

var x = document.getElementById('test');

< / ^ br .

element.innerHTML

Sets or gets the HTML syntax describing the element's descendants

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

Bu W3C DOM Parsing and Serialization Specification parçası.

< / ^ br .

element.innerText (Standart Değil)

Sets or gets the text between the start and end tags of the object

x.innerText
// => "Warning: This element contains code and strong language."

• innerText Microsoft tarafından tanıtıldıdeğil W3C standardı; uygulanması en IE davranış çoğaltmak, ancak tarayıcılar arasında değişir; özellikle, Firefox innerText hiç desteklemiyor
• innerText stili ile uyumlu ve gizli öğeleri metin döndürmez
• innerText bir yeniden tetikleyecektir
• innerText <script> <style> öğelerinin içeriğinin dönüş olmaz YANİ uygulamaları
• innerText çevreleyen boşluk şeritler

< / ^ br .

node.textContent

Gets or sets the text content of a node and its descendants.

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

Bu W3C standard, YANİ < tarafından desteklenmiyor bir süre; 9.

• Stil farkında değildir ve bu nedenle içeriği CSS ile gizli dönecektir
• Bir yeniden (bu nedenle daha fazla) ölçülebilir tetiklemez
• innerText, textContent aksine alır tüm elemanları, <script> <style> unsurlar da dahil olmak üzere içerik

< / ^ br .

node.value

Bu hedeflediğiniz bu isteğe bağlıdır. Yukarıdaki örnek için, x döndürür HTMLDivElement value bir özellik tanımlanmış olan nesne.

x.value // => null

Giriş etiketleri (<input />), örneğin, anlamına gelir define a value property, "denetimin geçerli değer".

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

docs:

Not: bazı veri türleri için döndürülen değeri aynı olmayabilir değer kullanıcı girdi. Eğer bir kullanıcı girerse örneğin, sayısal olmayan bir değer , dönen değer boş bir dize yerine.

< / ^ br .

Örnek Komut Dosyası

İşte HTML yukarıda sunulmuştur: çıkış gösteren bir örnek

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue   '\n' : '')   obj; 
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('['   property   ']'     value   '[/'   property   ']');
}

// Main
log('=============== '   properties.join(' ')   ' ===============');
for (var i = 0; i < properties.length; i  ) {
  logProperty(document.getElementById('test'), properties[i]);
}

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>