如何使用JavaScript将中的特定元素作为目标？

我需要使用js访问文本区域，并在引导模式中填充一个输入字段。 我可以通过写这行来访问标题：

event.target.parentNode.parentNode.childNodes[1].textContent;

event.target.parentNode.parentNode.childNodes[2].textContent;

但是当涉及到帖子正文时，我无法通过这行访问它：

event.target.parentNode.parentNode.childNodes[1].textContent;

event.target.parentNode.parentNode.childNodes[2].textContent;

以下是我正在使用的html：

<article class="post col-md-6 ">
        <div class="media postforeach postborderleft">
            <div class="media-left media-top">

            </div>
            <div class="media-body">
                <header><h5 class="media-heading">{{ $post->title }}<i class="fa fa-angle-down pull-right " aria-hidden="true"></i></h5> </header>
                <p><i>{{ $post->body }}</i></p>
                <div class="info">
                    Posted by {{ $post->user->name }} on {{ $post->created_at }}
                </div>
              @if (Auth::check())
                <div class="interaction">
                      <a href="#" class="like">Like</a> |
                      <a href="#" class="like">Dislike</a>
                @if (Auth::user() == $post->user)
                        |
                      <a href="#" class="edit">Edit</a> |
                      <a href="{{ route('post.delete', ['post_id' => $post->id]) }}" class="like">Delete</a>
                 @endif
                </div>
              @else
                <a href="{{ route('registeration') }}" class="like" style="color: red">Login to interract with posts!</a>
              @endif
            </div>
        </div>
        <br>
    </article>

---

非常感谢您的帮助。

这是由于.media主体的子节点之间存在空格，解析后这些子节点将成为DOM中的文本节点

你应该使用其中一种

var postBody = event.target.parentNode.parentNode.children[1].textContent;

或

或者更好的方法是，重写标记，使其具有一个可正确选择的{{$post->body}}容器，例如，向该容器添加一个类，并使用来自公共祖先的选择，例如.media body，而不是硬编码的节点遍历

编辑： 另外，既然您已经在使用jQuery，为什么不使用jQuery正确的DOM遍历语法：

var $mediaBody = $(this).parents('.media-body'),
    postTitle = $mediaBody.find('.media-heading').text(),
    postBody = $mediaBody.find('p:first').text();

---

考虑使用类别标记标题和正文，例如

<header class="post-title">...</header>
<p class="post-body>...</p>

---

请尝试event.target.parentNode.parentNode.childNodes[0]。textContent和event.target.parentNode.parentNode.childNodes[1]。TextContentWhiteSpaceWell的精彩解释绝对有效！谢谢你的帮助伙计：你好。我已经用了一段时间了，当我试图用ajax更新一些标题和正文时遇到了一个问题，jason这里是我用来更新的代码：$postTitleElement.textmsg['new_title'；我知道我不应该用。这里的文字，但我不知道我应该用什么。你能帮我做点什么吗？感谢确保您正在更新正确的DOM元素——在您的例子中，它可能是您最初放置文本的元素。postTitleElement指向什么元素？它就像您所说的那样指向。但是我应该在js代码中更改什么呢？很抱歉我缺乏js知识，我建议打开一个新问题，详细描述这个问题。请注意，如果替换整个图元的文本，则可以替换其他子图元，例如图元。如果您确实提出了一个新问题，请在此处的评论中链接到该问题

$('.post .edit').on('click', function(event) {
  var post = $(event.target).closest('.post');
  var postTitle = post.find('.post-title').text();
  var postBody = post.find('.post-body').text();
  // ...
});