如何在JavaScript中获取父元素的子元素的值

Question

当我点击"下载"按钮时，我想获取标签的值，该标签的值为bullet01.png。

我尝试过parent()->child()和siblings()方法，但效果不佳。

我需要使用onclick函数，因为jquery在我的代码中无法工作，但是当我将其放置在onclick中时，它可以正常工作。

因此，我像这样使用：

onclick="downloadClick(fileList0)"

还有更多的标记和更多的标记ID值

我从JavaScript中创建了一个列表。

我将此函数设置为window.onload

function showOk() {
  $.ajax({
    url: 'http://localhost:8090/curriculum1.4/login_controller.jspx?cmd=fileList',
    type: 'get',
    dataType: 'json',
    success: function(resp) {

      var obj = JSON.parse(resp.file.result);

      var list4;
      var a4;
      var node;
      var element;

      for (i = 0; i < Object.keys(obj.univ).length; i++) {
      //  console.log(obj.univ[i].file);
        list4 = document.createElement("li");
        a4 = document.createElement("a");
        node = document.createTextNode(obj.univ[i].file);
        a4.setAttribute('href', obj.univ[i].file);
        list4.appendChild(a4);
        a4.appendChild(node);

                var num=i;
                var inte='fileList'+num;
                console.log(inte);

                element = document.getElementById(inte);
        element.appendChild(list4);

      }

    },
    error: function(xhr, status, error) {
      alert("오류입니다.");
    }
  });
}

JS文件

function downloadClick(val) {
    var id = val;
    //var id= $(this +".selected li a").attr("href");
    console.log(id);
}

JavaScript 日志

这是一个简单的 .html 文件。

    <table width="500" cellpadding="0" cellspacing="0" border="1" class="blueone">

        <tr>
          <td><input type="checkbox" id="a2" name="전체동의" /></td>
          <td id="fileList0" class="selected">
            <li>
              <a href="bullet01.png">bullet01.png</a>
            </li>
          </td>
          <td><a class="checkBtn" onclick="downloadClick(fileList0)">download</a></td>
        </tr>
  <tr>
      <td><input type="checkbox" id="a3" name="전체동의" /></td>
          <td id="fileList1">
                <li>
                  <a href="bullet011.png">bullet011.png</a>
                </li>
      </td>
      <td><a class="checkBtn" onclick="downloadClick()">다운로드</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="a4" name="전체동의" /></td>
      <td id="fileList2"></td>
      <td><a class="checkBtn" onclick="downloadClick()">다운로드</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="a5" name="전체동의" /></td>
      <td id="fileList3"></td>
      <td><a class="checkBtn" onclick="downloadClick()">다운로드</a></td>
    </tr>
      </table>

- user10481445

Answer 1

有许多方法可以实现这个功能-其中一种方法是将保留的event对象添加到您的downloadClick()绑定和方法签名中：

HTML：

<a class="checkBtn" onclick="downloadClick(event, fileList0)">download</a>

"Javascript"翻译成中文是"JavaScript"。

function downloadClick(event, val) { 

这样做可以轻松确定用户当前点击的元素（即通过event对象的currentTarget字段）。从那里，您可以通过parentElement和querySelector（如下所述）遍历DOM以定位和提取所需的href数据：

/*  
  Add event parameter to function, allowing us to 
  determine the current element being clicked 
*/
function downloadClick(event, val) {

  /*
  Traverse up the tree via parentElement field. I've
  broken this into steps for clarity
  */
  var a = event.currentTarget;
  var td = a.parentElement;
  var tr = td.parentElement;

  /*
  User querySelector with selector matching DOM to access 
  the anchor element with data that you want to extract
  */
  var id = tr.querySelector('td li a').getAttribute('href');

  console.log(id);
}

<table width="500" cellpadding="0" cellspacing="0" border="1" class="blueone">
  <tr>
    <td><input type="checkbox" id="a2" name="전체동의" /></td>
    <td id="fileList0" class="selected">
      <li>
        <a href="bullet01.png">bullet01.png</a>
      </li>
    </td>
    <!-- Add event parameter to call -->
    <td><a class="checkBtn" onclick="downloadClick(event, fileList0)">download</a></td>
  </tr>
</table>

- Dacre Denny

Answer 2

因为jQuery在我的代码中不起作用，但当我在onclick内部使用时，它可以工作。

听起来你已经包含了jQuery，但它没有起作用。

这是因为你的DOM元素是动态加载的。你不能在元素存在之前绑定事件。

然而，你可以将一个元素绑定到HTML的，然后筛选出你的元素：

$("body").on("click", ".checkBtn", function(){
 var id = $(this).closest("tr").find(".selected li a").attr("href");
  
 console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="500" cellpadding="0" cellspacing="0" border="1" class="blueone">
    <tr>
      <td><input type="checkbox" id="a2" name="전체동의" /></td>
      <td id="fileList0" class="selected">
        <li>
          <a href="bullet01.png">bullet01.png</a>
        </li>
      </td>
      <td><a class="checkBtn">download</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="a2" name="전체동의" /></td>
      <td id="fileList0" class="selected">
        <li>
          <a href="bullet02.png">bullet02.png</a>
        </li>
      </td>
      <td><a class="checkBtn">download</a></td>
    </tr>
</table>

你不需要使用jQuery来实现这个功能（正如其他答案所指出的那样），但是如果你已经加载了jQuery，可以考虑使用它。 :D

请注意，在这种方法中，你不需要在HTML中使用“onclick”属性。

- Skeets

Answer 3

@DacreDenny的答案如果你没有父元素的id的话，肯定会更可靠、更灵活、不那么脆弱。所以我会考虑完全删除id并替换为一个共同的类，然后再实施他的解决方案。

但是...

如果你已经有了id，那么从目标元素遍历DOM就有点无意义了，因为在文档中只应该有1个具有该id的元素。如果有id，你可以直接使用...

function downloadClick(id) {
    var parent  = document.getElementById(id);
        links = parent.querySelectorAll("li:nth-of-type(1) a:nth-of-type(1)"),
        firstHref = links[0].href;

    return firstHref;
}

<table width="500" cellpadding="0" cellspacing="0" border="1" class="blueone">

    <tr>
      <td><input type="checkbox" id="a2" name="sino" /></td>
      <td id="fileList0" class="selected">
        <li>
          <a href="bullet01.png">bullet01.png</a>
        </li>
      </td>
      <td><a class="checkBtn" onclick="downloadClick('fileList0')">download</a></td>
    </tr>
  </table>

@DacreDenny的解决方案可能更加高效，因为它仅查询了有限的DOM节点，但我认为查询ID已经相当优化了。

无论如何，您应该注意，您的代码中还有另一个错误，以及我看到的其他解决方案...

downloadClick(fileList0)

需要将id名称作为字符串而不是JS变量传入...

downloadClick('fileList0')

- cantuket

Answer 4

获取具有子元素 a 的 id 为 fileList0 的元素，然后获取其 textContent。

function downloadClick() {
    const value = document.querySelector('#fileList0 a').textContent;
    console.log(value);
}

<table width="500" cellpadding="0" cellspacing="0" border="1" class="blueone">
    <tr>
      <td><input type="checkbox" id="a2" name="전체동의" /></td>
      <td id="fileList0" class="selected">
        <li>
          <a href="bullet01.png">bullet01.png</a>
        </li>
      </td>
      <td><a class="checkBtn" onclick="downloadClick(fileList0)">download</a></td>
    </tr>
</table>

- random