1

这是源 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); }
4

1 回答 1

2

previousSibling 是标签

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

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

对于标签，nodeName将是label（与 相同tagName），而nodeType将是1元素节点。

真正的文字在哪里？

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

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

或者

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

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

于 2013-04-29T20:45:27.920 回答