Question

这是我单击的按钮：

<a href="#" id="toggle|313746669218847_314159322510915" class="comment-reply comment-reply-default" role="button">
  <i class="fa fa-reply" aria-hidden="true"></i>
  <span>Reply</span>
</a>

我有这个HTML代码段

const replyElement = document.getElementById("toggle|313746669218847_314159322510915").parentElement.parentElement;

运行以上行后，在replyElement中的

结果HTML代码段：

<div class="parent-comment-chat-box comment-box">
  <div class="chat-user-name">
    <p><strong>A Dummy Page</strong></p>
    <p class="created-on">2018-11-28 07:17 PM</p>
  </div>

  <div class="parent_reply_block reply_block retry_block">
    <a href="#" id="toggle|313746669218847_314159322510915" class="comment-reply comment-reply-default" role="button">
      <i class="fa fa-reply" aria-hidden="true"></i>
      <span>Reply</span>
    </a>
    <div class="reply_text_area">
      <div class="comment-chatbox"><textarea placeholder="Reply…" id="comment-textarea" maxlength="7500" rows="2"></textarea></div>
      <div class="comment-menu"><input type="file" id="img_upload" class="hide" accept=".png, .jpg, .jpeg, .tiff">

        <div class="messages-btn">
          <span class="comment-indicator hide">
        <i aria-hidden="true" class="fa fa-spinner fa-spin"></i>
        </span>
          <button id="active|main|0|-1|313746669218847_314159322510915" type="button" class="btn btn_darkblue messages_reply btn btn_darkblue messages_reply-default">
        <span>Send</span>
        </button>
        </div>
      </div>
    </div>
  </div>
</div>

现在，当我replyElement.querySelector('.reply_text_area')时，我得到null 如果使用替代项replyElement.document.getElementsByClassName('.reply_text_area')，我会得到undefined

Answer 1

您的replyElement最有可能不在那儿，因为使用querySelector查找文本区域是可行的：

我只能猜出您的ID应该是什么，但这可行：

const replyElement = document.getElementById('toggle|313746669218847_314159322510915').parentElement.parentElement;
var myElement = replyElement.querySelector('.reply_text_area');

console.log(myElement)

<div class="parent-comment-chat-box comment-box">
  <div class="chat-user-name">
    <p><strong>A Dummy Page</strong></p>
    <p class="created-on">2018-11-28 07:17 PM</p>
  </div>
  <div class="fb_external_link"><a href="#" id="active|main|0|-1|313746669218847_314159322510915" title="Delete" class="action_button action_button-default" role="button"><i class="fa fa-trash"></i></a><span>|</span>
    <a class="external-target-link" target="_blank" href="https://www.facebook.com/313746669218847_314159322510915"><i class="fa fa-external-link"></i></a>
  </div>
  <div class="clear"></div>
  <p>hello T
  </p>
  <div class="parent_reply_block reply_block retry_block"><a href="#" id="toggle|313746669218847_314159322510915" class="comment-reply comment-reply-default" role="button"><i class="fa fa-reply" aria-hidden="true"></i><span>Reply</span></a>
    <div class="reply_text_area" id="active|main|0|-1|313746669218847_314159322510915">
      <div class="comment-chatbox"><textarea placeholder="Reply…" id="comment-textarea" maxlength="7500" rows="2"></textarea></div>
      <div class="clear"></div>
      <div class="comment-menu"><input type="file" id="img_upload" class="hide" accept=".png, .jpg, .jpeg, .tiff">
        <a href="#" class="comment_camera comment_camera-default" role="button"><img title="Add Media" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAllBMVEUAAACBlq2Bla2AmKqClKyAlaqClauAkq2ClayClayClayClK2BlquClayDla2AgICClauClayClKuAmaaDlq2ClayClquClqyDlauBla2Alq2ClayDkq+ClauHlqWBlKuBlKuDlKyClquClqyDlqqClayClayClayElbCClayClauClqyClayDlayClKqClquClawAAAAvK0goAAAAMHRSTlMAS5gqgTDlHJ33yHxJ+HMCtPBkFE79PbhSVyL1I3QRhkNKg6wnbLbOHfFq3OlxOY9YHw+yAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EMGQwZB/VTUkwAAADISURBVCjPnZJfF0JAFMRHEisRKqFCFPrD/f6fLs4u2qOn5uXOzO/uyz0L/CtlIaTIvUqjVAksJ7D87rXVBFYa73SD0UzM0GEMwVxb1tockgGxv7Gd/r1jb7qwdYlBbHiAv9v5gEe0P2yJBAiAo0vkHoGgIzSCEFHczzhCyBsBTjhzY+MkgQsSbhJcJJAi4yZDKoErkPczB64SYAWc2/1+c1AwCVBZ8QtVJcmA6ofeHe5RDxnP6XSv1+SfeNNPvYGmXczUNn/8jg9gmDuNHBGGCwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0xMi0yNVQxMjoyNTowNyswMTowMJ4bbroAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMTItMjVUMTI6MjU6MDcrMDE6MDDvRtYGAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg=="
            alt="upload_button"></a>
        <div class="dropdown gif-block"><button id="menu1" type="button" class="btn feature_drowdownv2 dropdown-toggle gif-dropdown btn feature_drowdownv2 dropdown-toggle gif-dropdown-default"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA2FBMVEUAAACCla2ClayClayBlquClqyDk6uClayClayCl6yClayAmaqClKyAj6+ClqyAqqqClayBlayAkq2Elq2ClauAgL+BlayDlauClKyClK2ClKyDlKyClayDlq2GkqqFma2Dla2ClqyClayClayBlK6Bla2ClauBlqyClayClayClayClayClqyBlayClauClayDlayDlayAk6yClayAmKqBlauClqyClayAlaqClayClayDlKyAn5+AmaaClauClayClKyCla2Dla6ClKuAlaqClayClawAAAAwjR65AAAARnRSTlMAdvD3SbhA4PMx5h7VEL8G2I4cOGoETWeNcPmg720VGapo+P5FY66W3bDpyFxl6P2cqCjKKlvQ+wzCn0oIFF7yK8xIZDD8Rnq9egAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhDBkMJC+qDrIIAAAA1ElEQVQoz53Q1w6CMBSA4VMVXDhR3HsvVNwbB+f9H8mOCJKAF/4htOFLTkkBAEjAKRgCJ0l29uFI1AcwFvcBVBI+gMmUB6QpYMYDsqqq5iQPYMkC8pqSKbgqKlqeQgl5ZfyuRKFC12qtDo0mQqvNRyNWBHS6qV5/MOSgjUZjGyYw5QMYzHR9bsMClmiA/Bml2yBBAVdrAZvtdmdD0NiTgyFA/CSDI12HpzNccl9wpHDlu86Nvto79rCu7CzzTh6uyN38eVd/wfPl6vkBYrluFi1CP74ByoE2vS6ksZIAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMTItMjVUMTI6MzY6NDcrMDE6MDAw6ASDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTEyLTI1VDEyOjM2OjQ3KzAxOjAwQbW8PwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=" alt="gif_button"><i class="fa fa-angle-down" aria-hidden="true"></i></button></div>
        <div
          class="messages-btn"><span class="comment-indicator hide"><i aria-hidden="true" class="fa fa-spinner fa-spin"></i></span><button id="active|main|0|-1|313746669218847_314159322510915" type="button" class="btn btn_darkblue messages_reply btn btn_darkblue messages_reply-default"><span>Send</span></button></div>
    </div>
  </div>
</div>
</div>

在元素上使用querySelector时为undefined或null

1 个答案: