JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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)
}