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对象不是don节点，但它是一个jQuery对象。因此，您必须使用jQuery方法，例如.prop()。在这种情况下，.prop("tagName")。

工作示例：

＆＃13;

$(function() {
  $('#submit').click(function() {
    var btn = $(this);
    var frm = btn.parent();

    alert(btn.prop("tagName"));
    alert(frm.prop("tagName"));

  });
});

＆＃13;

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

＆＃13;

请注意，对于低于1.6的jQuery版本，您必须将prop()替换为attr()。

来源：

jQuery API: prop()（请注意页面开头后的属性列表。）

在jQuery中查找DOM对象的节点名称

3 个答案: