用jQuery访问DOM元素

Question

假设我的代码中有以下DOM元素：

<div id="test">
    <div id="t2">
       Hi I am
       <b>Gopi</b>
       and am 20 years old.
       <p id="div2">
         <button onclick="alert('lol')">Check</button>
       </p>
    </div>
</div>

假设我想遍历div#t2的内容。 $("#t2").children()会给我返回和

标签。

那么如何来获取值并以包含“Hi I am”，“....”，“and am 20 years old.”，“

.....

”的数组形式呢？

- gopi1410

Answer 1

使用本地 DOM 节点：

$('#t2')[0].childNodes

给你想要的数组。

在使用之前，您可能需要使用$.trim修剪条目，因为实际文本节点包含HTML中的所有空格。

- Paul

---

$.trim($("#t2")[0].childNodes[0]) 返回的是 "[object Text]"，而不是已经去除空格的 HTML。除了手动从开头和结尾删除空格之外，还有其他解决方案吗？ - gopi1410

文本节点本身不是字符串，但它们包含一个nodeValue字符串。尝试这样做：$.trim($("#t2")[0].childNodes[0].nodeValue) - Paul

@PaulP.R.O. 有没有办法获取 HTML 节点的整个字符串？innerHTML会省略节点名称，只返回它的内部 HTML。原帖作者需要同时获得节点名称。 - Prasenjit Kumar Nag

@Joy 要获取 outerHTML，您可以将当前元素添加到一个新的 div 中，然后获取其 innerHTML。这有点 hacky，但它可以工作：$('<div>').appendChild($("#t2")[0].childNodes[1]).html() - Paul

@PaulP.R.O. 谢谢你，我一直在寻找比直接检查更简单的方法。 - Prasenjit Kumar Nag

@PaulP.R.O.，再次感谢您，我在我的回答中使用了您的想法，希望您不介意。 - Prasenjit Kumar Nag

Answer 2

您可以使用.get()方法来获取该内容。

var arr = $("#t2").contents().get();

工作示例

如果您检查这个示例，您会发现.contents()返回一个由

text和html元素组成的数组，例如

 [text1,html1,text2,html2,text3]

 //Where
 text1 == Hi I am
 html1 == <b>Gopi</b>
 text2 == and am 20 years old. 
 html2 == <p id="div2"><button onclick="alert('lol')">Check</button></p>

这很有道理，但最后的text3是从哪里来的呢。

<p>标签末尾还有另一个文本节点。

 <p id="div2">....</p> <-- Here, newline is 
                           another text node(the last one)

如果您使用.contents，请注意。

要获取修剪过的数据，请使用$.map，例如：

var arr = $("#t2").contents().map(function(){
 if (this.nodeType == 3)
     return $.trim(this.nodeValue) || null; 
                                     // this null to omit last textnode
 else
     return $('<div />').append(this).html();

 });

- Prasenjit Kumar Nag

---

.children() 不会选择文本节点。 - Kevin B

是的，谢谢..我不知道contents()。现在应该很容易了。 - gopi1410

@Joy 谢谢，但是我怎么截取数据呢？$.trim($("#t2").contents()[0]) 返回的是 "[object Text]" 而不是它里面的文本值。 - gopi1410

@Joy，现在你已经删除了复制的元素并进行了更新，但这并不是更好的做法，之前的更好。 - thecodeparadox

@thecodeparadox，我从你的回答中学到了那个东西，并在那里进行了评论并添加到我的回答中。同时，我也向PaulP.R.O.询问了一种方法，他给出了一个更好的方案，于是我也加入了它。我的意思并不是冒犯，我只是一个新手，不像你们这些专家。如果你想的话，我可以删除这个回答。 - Prasenjit Kumar Nag

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/12124/discussion-between-joy-and-thecodeparadox - Prasenjit Kumar Nag

Answer 3

var result = [];

$("#t2").contents().map(function(index, el) {
    console.log(el);
    if(el.nodeType == 3) {
        result.push($.trim( $(el).text() ));
    } else {
        if(el.tagName.toLowerCase() == 'b') {
          result.push('<b>' + el.innerHTML + '</b>');
        } else if(el.tagName.toLowerCase() == 'p') {
          result.push('<p>' + el.innerHTML + '</p>');            
        }
   }
});

演示

- thecodeparadox

---

@gopi1410，请检查我的答案和演示。我认为你会得到你想要的。 - thecodeparadox

还有 <p> 节点，也必须添加检查。谢谢你的建议。我一直在寻找一种方法来做到这一点。 - Prasenjit Kumar Nag

@thecodeparadox 但是在这种情况下，我必须手动检查所有标签吗？上面的示例只有<b>和<p>标签，因此很容易处理。 - gopi1410