Javascript 通过jQuery访问DOM元素

假设我的代码中有以下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>

假设我想遍历divt2的内容

$t2.children给我和标签

因此，我应该如何访问它以获取包含Hi I am，…，和am 20岁的数组的值。，…

？

使用本机DOM：

为您提供所需的阵列

由于实际的文本节点包含HTML中的所有空白，您可能需要在使用前对条目进行修剪。

您可以使用该方法获得该结果

如果你检查小提琴，你会发现.contents返回一个由

文本和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>

所以，如果你使用。内容，请记住这一点

若要获取修剪过的数据，请使用$.map like

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();

 });

---

.孩子们不会选择文本节点。是的，谢谢。。我不知道内容。现在就很容易了。@Joy谢谢，但我如何修剪数据呢？$。trim$t2。内容[0]给出的[object Text]不是其中的文本值it@Joy现在您删除了复制的元素并进行了更新，这也不是什么更好的东西，以前的更重要better@thecodeparadox，我从你的回答中学习了这一点，并在那里发表了评论，并在我的回答中补充道，我问了PaulP.R.O。同时为了一个办法，他给了一个，发现更好，并补充说。我的意思是无意冒犯，我是个新手，不像你们这些专家。如果需要，我可以删除答案。$.trim$t2[0]。childNodes[0]返回[object Text]，而不是经过修剪的html。除了手动删除开头和结尾的空白之外，还有其他解决方案吗？@gopi1410文本节点本身不是字符串，但它们在nodeValue中包含一个字符串。尝试以下操作：$.trim$t2[0].childNodes[0]。nodeValue@PaulP.R.O. 有没有办法获取HTML节点的整个字符串，innerHTML省略节点名并给出其内部html。OP也需要节点名。@要获得outerHTML，可以将当前元素添加到新的div中，然后获得其innerHTML。它有点粗糙，但可以工作：$.appendChild$t2[0].childNodes[1]。html@PaulP.R.O. 谢谢，我正在寻找一种比直接检查更简单的方法。@gopi1410检查我的答案和演示。我想你会得到你想要的。这里也有节点，也必须添加检查。谢谢你的主意。我正在寻找一种方法来完成这项工作。@thecodeparadox，但在这种情况下，我必须手动检查所有标记？上面的例子只有b&p标签，所以很简单。。

 [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>

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

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();

 });

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>');            
        }
   }
});