Question

尝试从document.getElementById（）响应中访问元素的值

已经尝试

$(this).data("data-username")

document.getElementById("user-options")的响应是

<li id = "user-options" >
   <a id="header-details-user-fullname" class="aui-dropdown2-trigger aui-dropdown2-trigger-arrowless aui-alignment-target aui-alignment-element-attached-top aui-alignment-element-attached-right aui-alignment-target-attached-bottom aui-alignment-target-attached-right" aria-haspopup="true" data-username="userName123" data-displayname="username" href="/secure/ViewProfile.jspa" title="User profile for user" resolved="" aria-controls="user-options-content" aria-expanded="false">
   <span class="aui-avatar aui-avatar-small">
   <span class="aui-avatar-inner">
   <img src="https://www.gravatar.com/avatar/3b9c686ef2a52547e0e6dd891f130b1e?d=mm&amp;s=24" alt="User profile for user">
   </span>
   </span>
   </a>
</li>

需要从data-username="userName123"响应中访问document.getElementById("user-options")

Answer 1

需要从document.getElementById（“ user-options”）响应中访问data-username =“ userName123”

数据属性位于该a中的第一个li上，因此：

var username = document.getElementById("user-options").querySelector("a").getAttribute("data-username");

或者作为user7290573 pointed out，选择器可以引用数据属性：

var username = document.getElementById("user-options").querySelector("[data-username]").getAttribute("data-username");

您具体说过，您想使用document.getElementById("user-options")的结果，但是您也可以这样做：

var username = document.querySelector("#user-options a").getAttribute("data-username");
// or
var username = document.querySelector("#user-options [data-username]").getAttribute("data-username");

实时示例（带有getElementById）：

var username = document.getElementById("user-options").querySelector("[data-username]").getAttribute("data-username");
console.log(username);

<li id = "user-options" >
   <a id="header-details-user-fullname" class="aui-dropdown2-trigger aui-dropdown2-trigger-arrowless aui-alignment-target aui-alignment-element-attached-top aui-alignment-element-attached-right aui-alignment-target-attached-bottom aui-alignment-target-attached-right" aria-haspopup="true" data-username="userName123" data-displayname="username" href="/secure/ViewProfile.jspa" title="User profile for user" resolved="" aria-controls="user-options-content" aria-expanded="false">
   <span class="aui-avatar aui-avatar-small">
   <span class="aui-avatar-inner">
   <img src="https://www.gravatar.com/avatar/3b9c686ef2a52547e0e6dd891f130b1e?d=mm&amp;s=24" alt="User profile for user">
   </span>
   </span>
   </a>
</li>

或者如果您使用的是jQuery（您的问题似乎暗示您可能会或可能不会）：

var username = $("#user-options a").attr("data-username");
// or
var username = $("#user-options [data-username]").attr("data-username");

实时示例：

var username = $("#user-options [data-username]").attr("data-username");
console.log(username);

<li id = "user-options" >
   <a id="header-details-user-fullname" class="aui-dropdown2-trigger aui-dropdown2-trigger-arrowless aui-alignment-target aui-alignment-element-attached-top aui-alignment-element-attached-right aui-alignment-target-attached-bottom aui-alignment-target-attached-right" aria-haspopup="true" data-username="userName123" data-displayname="username" href="/secure/ViewProfile.jspa" title="User profile for user" resolved="" aria-controls="user-options-content" aria-expanded="false">
   <span class="aui-avatar aui-avatar-small">
   <span class="aui-avatar-inner">
   <img src="https://www.gravatar.com/avatar/3b9c686ef2a52547e0e6dd891f130b1e?d=mm&amp;s=24" alt="User profile for user">
   </span>
   </span>
   </a>
</li>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您会在这里引起人们说要使用data，但是如果您只是想获取价值，data就是过分的了。（data 并非仅仅是data-*属性的访问器，它是both more and less than that。）尽管如此，为了完整起见，它是：var username = $("#user-options a").data("username"); < / p>

Answer 2

从参数中删除 data 部分，因为data()已经这样做了。试试

$('#user-options a').data('username')

console.log($('#user-options a').data('username'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<li id = "user-options" >
  <a id="header-details-user-fullname" class="aui-dropdown2-trigger aui-dropdown2-trigger-arrowless aui-alignment-target aui-alignment-element-attached-top aui-alignment-element-attached-right aui-alignment-target-attached-bottom aui-alignment-target-attached-right" aria-haspopup="true" data-username="userName123" data-displayname="username" href="/secure/ViewProfile.jspa" title="User profile for user" resolved="" aria-controls="user-options-content" aria-expanded="false">
  <span class="aui-avatar aui-avatar-small">
    <span class="aui-avatar-inner">
      <img src="https://www.gravatar.com/avatar/3b9c686ef2a52547e0e6dd891f130b1e?d=mm&amp;s=24" alt="User profile for user">
      </span>
  </span>
  </a>
</li>

Answer 3

使用document.querySelector和getAttribute

console.log(document.querySelector('#user-options a').getAttribute("data-username"))

<li id = "user-options" >
<a id="header-details-user-fullname" class="aui-dropdown2-trigger aui-dropdown2-trigger-arrowless aui-alignment-target aui-alignment-element-attached-top aui-alignment-element-attached-right aui-alignment-target-attached-bottom aui-alignment-target-attached-right" aria-haspopup="true" data-username="userName123" data-displayname="username" href="/secure/ViewProfile.jspa" title="User profile for user" resolved="" aria-controls="user-options-content" aria-expanded="false">
                    <span class="aui-avatar aui-avatar-small">
                <span class="aui-avatar-inner">
                    <img src="https://www.gravatar.com/avatar/3b9c686ef2a52547e0e6dd891f130b1e?d=mm&amp;s=24" alt="User profile for user">
                </span>
            </span>
        </a>
</li>

访问<li>标记内的element的值

3 个答案: