access the value of element within <li> tag

Question

Trying to access a value of element from document.getElementById() response

already tried

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

response of document.getElementById("user-options") is

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

need to access data-username="userName123" from the document.getElementById("user-options") response

Answer 1

need to access data-username="userName123" from the document.getElementById("user-options") response

The data attribute is on the first a within that li, so:

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

Or as user7290573 pointed out, the selector could reference the data attribute:

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

You said specifically you wanted to work with the result of document.getElementById("user-options"), but you could also do this instead:

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

Live Example (with the 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>

Or if you're using jQuery (your question seems to suggest you might or might not be):

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

Live Example:

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>

You'll get people saying to use data here, but if you're just trying to get the value, data is overkill. (data is not just an accessor for data-* attributes, it's both more and less than that.) Still, just for completeness, it would be: var username = $("#user-options a").data("username");

Answer 2

Using document.querySelector and 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>

Answer 3

Remove the data part from the parameter as data() is already doing that. Try

$('#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>