Почему element.value! = Attribute.nodeValue - PullRequest
Новая
       39

Почему element.value! = Attribute.nodeValue

0 голосов
/ 05 мая 2020

Я обнаружил странный эффект, который я не могу понять. Вам нужна консоль @ jsfiddle, чтобы увидеть текст

Сначала проверьте это (используя класс): https://jsfiddle.net/ojg1Lzrk/1/ установить / получить с помощью element.value или attribute.nodeValue is без разницы. 

<input id="i" value="" class="A">

document.addEventListener('DOMContentLoaded', function(event) {
    //1) OK - should display A in console
    console.log('1)should be A:', i.className)

  //2) OK - input field should have B class
    i.className = 'B'

    //3) OK - should display B in console
    console.log('3)should be B:', i.attributes.class.nodeValue)

  //4) OK - input field should have C class
    i.attributes.value.nodeValue = 'C'
})

Следующий тест (с использованием значения): https://jsfiddle.net/6ya98njL/2/ Теперь это не синхронный элемент. значение имеет «текущее» значение и атрибут. nodeValue «заморожен», и соединение потеряно 

<input id="i" value="A" oninput="inp()">

document.addEventListener('DOMContentLoaded', function(event) {
    //1) OK - should display A in console
    console.log('1)should be A:', i.value)

  //2) OK - input field should be B
    i.value = 'B'

    //3) !!! - should display B in console
    console.log('3)should be B:', i.attributes.value.nodeValue)

  //4) !!! - input field should be C
    i.attributes.value.nodeValue = 'C'
})

function inp() {
    //5) !!! - different values
    console.log('5)inp start', i.value, i.attributes.value.nodeValue)

  //6) !!! no change to input field:
  i.attributes.value.nodeValue = 'Z'

    //7) !!! - different values
    console.log('7)inp end', i.value, i.attributes.value.nodeValue)
}

Я обнаружил, что element.value и attribute.nodeValue синхронизированы c, пока вы не устанавливаете element.value или не вводите значение. После этого он теряется. Но изменение с помощью attribute.nodeValue раньше не вызывает проблем.

Почему здесь такая разница между классом и значением? Даже если я меняю класс в браузере / инспекторе, он синхронизируется c и работает всегда.

Я нашел этот ответ о значении: Разница между Element.value и Element.getAttribute ("value" )

Итак, вопрос: ПОЧЕМУ ??? !!!

...