JSFiddle - React, Tailwind, and code Playground

HTML

<span class="xforms-value  xforms-control xforms-input xforms-appearance xforms-optional xforms-enabled xforms-readonly xforms-valid " id="pName">
    <span class="focus">&nbsp;</span>
    <label class="xforms-label" id="xsltforms-mainform-label-2_2_4_3_">Name:</label>
    <span class="value">
        <input readonly="" class="xforms-value" type="text">
    </span>
    <span class="xforms-required-icon">*</span>
    <span class="xforms-alert">
        <span class="xforms-alert-icon">&nbsp;</span>
    </span>
</span>

JavaScript

function changeControlValue(){
    try{
        var elem01 = document.getElementById("pName"); 
        console.log("getElementById: " + elem01);
        
        var elem02 = document.evaluate(".//*[@id='pName']" ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
        console.log("evaluate: " + elem02);        
        console.log(elem02.singleNodeValue);   
        
        var elem03 = document.querySelector("#pName"); 
        console.log("querySelector: " + elem03);
        
        
    }catch(err){alert(err.message)}
}
changeControlValue();