Element is always empty in IE 8

Question

I have the following code:

 if (document.querySelectorAll('[id$=":maindiv:usernametext::content"]')[0].value == null || document.querySelectorAll('[id$="maindiv:usernametext::content"]')[0].value.trim() == "") {
        console.log("maindiv:usernametext::content IS EMPTY !!!);
    }

Inside IE 8, this element always says that the value is empty, even if it is not. When working inside the browser> IE 8, as well as Chrome and Firefox, it works. Why does it return null every time. I work in IE 8 standards mode.

UPDATE

So, I am simple , and it returns a value, but does this condition not work? So it seems that the selector captures the value, but this if statement is executed when it shouldn't, because is there a value? This field is a text field. console.log(document.querySelectorAll('[id$=":maindiv:usernametext::content"]')[‌​0].value)

Answer 1

, IE 8, , !