通过 jQuery 访问 DOM 元素答案

【问题标题】：accessing DOM elements by jQuery通过 jQuery 访问 DOM 元素
【发布时间】：2012-06-05 02:58:15
【问题描述】：

假设我的代码中有以下 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.”、“.....”的数组形式的值/em> ??

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

使用原生 DOM Node:

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

给你你想要的数组。

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

【讨论】：

$.trim($("#t2")[0].childNodes[0]) 返回“[object Text]”，而不是修剪后的 html。除了手动从开头和结尾删除空格之外的任何解决方案？
@gopi1410 文本节点本身不是字符串，但它们在nodeValue 中包含一个字符串。试试这个：$.trim($("#t2")[0].childNodes[0].nodeValue)
@PaulP.R.O.有没有办法获取 HTML 节点的整个字符串？ , innerHTML 省略节点名称并给出inner html。 OP 也需要 nodeName。
@Joy 要获取outerHTML，您可以将当前元素添加到新的div，然后获取它的innerHTML。这有点hacky，但它有效：$('<div>').appendChild($("#t2")[0].childNodes[1]).html()
@PaulP.R.O.谢谢你，我正在寻找一种比直接检查更简单的方法。

【解决方案2】：

您可以使用.get() 方法得到它

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

Working Fiddle

如果您检查小提琴，您会发现 .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 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();

 });

【讨论】：

.children() 不会选择文本节点。
是的，谢谢.. 不知道contents()。现在会很容易。
@Joy 谢谢，但我如何修剪数据？ $.trim($("#t2").contents()[0]) 给出“[object Text]”而不是其中的文本值
@Joy 现在你删除了复制的元素并更新了，这也不是更好，以前更好
@thecodeparadox，我从你的回答中借鉴了那个东西并在那里发表了评论并在我的回答中添加了，我问 PaulP.R.O.同时换了一个方法，他给了一个，发现更好并补充说。我无意冒犯，我是新手，不像你们这样的专家。如果你愿意，我可以删除答案。

【解决方案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>');            
        }
   }
});

DEMO

【讨论】：

@gopi1410 检查我的答案和演示。我想你会得到你想要的
也有 节点，也必须添加检查。谢谢你的主意。我正在寻找一种方法来做到这一点。
@thecodeparadox 但在这种情况下，我必须手动检查所有标签？上面的例子只有 b & p 标签，所以很简单..