JavaScript 表单 DOM 遍历——标签文本在哪里？

Question

这是源代码 HTML:

   <li class="box">
       <label for="text0">Career Objectives:</label>
       <div>
           <textarea id="text0" 
                     name="text0" 
                     cols="55" 
                     rows="6">
           </textarea>
       </div>
   </li>

这是我试过的遍历代码:

console.log($("text0").parentNode.previousSibling.nodeName);
console.log($("text0").parentNode.previousSibling.nodeType);
console.log($("text0").parentNode.previousSibling.nodeValue);
console.log($("text0").parentNode.previousSibling.innerText);
console.log($("text0").parentNode.previousSibling.innerHTML);
console.log($("text0").parentNode.previousSibling.value);

这是输出:

#text     projectJS.js:84
3         projectJS.js:85

          projectJS.js:86 <--- 2 lines of blank output
undefined projectJS.js:87
undefined projectJS.js:88
undefined projectJS.js:89

据我了解 DOM:

• 父节点是div
• previousSibling是标签
• NodeType 是文本

请问我错过了什么？实际文本在哪里？

编辑这不是 JQuery:

var $ = function(id) { return document.getElementById(id); }

Answer 1

The previousSibling is the label

不，正如节点类型和名称已经表明的那样，前一个兄弟节点是 label 之间的下一个节点和 div ，包含所有空白字符(</label> 之后的换行符和 <div> 之前的几个空格)。
这也是 .innerHTML 的原因, .innerText和 .value输出 undefined ，文本节点没有这样的属性。

$("text0").parentNode.previousSibling.previousSibling将是标签。

对于标签，nodeName将是 label (与 tagName 相同)和 nodeType将是 1 , 一个元素节点。

Where is the actual text?

标签文本是label的第一个子节点(文本节点)元素。你可以得到:

$("text0").parentNode.previousSibling.previousSibling.childNodes[0].nodeValue

或

$("text0").parentNode.previousSibling.previousSibling.innerHTML

根据您拥有的库，可以简化选择或遍历标签元素。