javascript - 通过 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()给了我<b>和<p>标签。

那么我应该如何Hi I am访问它以将值作为包含“ ”、“ <b>....</b>”、“ and am 20 years old.”、“的数组来获取<p>.....</p> ？

Answer 1

使用本机 DOM节点：

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

给你你想要的数组。

由于实际的文本节点包含 HTML 中的所有空格，因此您可能还想在使用它们之前修剪条目。

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

 });

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

演示