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：

parentNode是div
previousSibling是标签
NodeType是文本

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

编辑这不是JQuery：

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

Answer 1

previousSibling是标签

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

undefined将成为标签。

对于标签，$("text0").parentNode.previousSibling.previousSibling为nodeName（与label相同），tagName为nodeType，即元素节点。

实际文字在哪里？

标签文本是1元素的第一个子节点（文本节点）。你可以得到：

label

或

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

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

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

1 个答案: