在jQuery中查找DOM對象的節點名稱

Question

我正嘗試從HTML頁面中的表單元素構建JSON。

因爲Javascript是新的，我做了一些挖掘，發現nodeName屬性可以用來獲取DOM節點的HTML標籤名稱。我試圖編譯代碼來使用警報打印標籤名稱，這是我設法提出的，但是我無法使它工作：

我在做什麼錯了？

$(function() { 
 
     $('#submit').click(function() { 
 
     var button = $(this); 
 
     var frm = button.parentNode; // or button.parent(); 
 
     alert(button.nodeName); // should print INPUT 
 
     alert(frm.nodeName); //should print FORM 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <form> 
 
    <input type="text" /> 
 
    <input id="submit" type="Submit" /> 
 
    </form> 
 
</div>

Answer 1

您需要使用this不$(this)，$(this)是jQuery對象不是DOM對象

更新：要想從jQuery對象的DOM對象，你可以使用$(this)[0]或$(this).get(0)。訪問https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/

$(function() { 
 
    $('#submit').click(function() { 
 
     var btn = this; 
 
     var frm = btn.parentNode;   
 
     alert(btn.nodeName);  
 
     alert(frm.nodeName); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <form> 
 
    <input type="text" /> 
 
    <input id="submit" type="Submit" /> 
 
    </form> 
 
</div>

Answer 2

它btn.get(0).nodeName

$('#submit').click(function() { 
    var button = $(this); 
    var frm = button.parentNode; // or button.parent(); 
    alert(button.get(0).nodeName); // should print INPUT 
    alert(frm.get(0).nodeName); //should print FORM 
}); 

Answer 3

看到你正在使用jQuery，您btn對象不是一個別節點，但它是一個jQuery對象。因此，您必須使用jQuery方法，例如.prop()。在這種情況下，.prop("tagName")。

工作例如：

$(function() { 
 
    $('#submit').click(function() { 
 
    var btn = $(this); 
 
    var frm = btn.parent(); 
 

 
    alert(btn.prop("tagName")); 
 
    alert(frm.prop("tagName")); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <form> 
 
    <input type="text" /> 
 
    <input id="submit" type="Submit" /> 
 
    </form> 
 
</div>

注意，jQuery的版本比1.6更低，你有attr()更換prop()。

來源：

• jQuery API: prop()（注意頁面開始後右鍵屬性的列表）