Reputation: 1

How to Capture Value in DIV Element in Javascript

A section of a webpage has the following DIV element:

<div class="nodePedigree node male focus silhouette nodePedigreeNoFather" id="0:0" style="height:0.57em; width:2.95em; left:0em; top:3.1918em;" T:NodeId="0:0" T:Pid=36512609282 T:Name="Jon Armstrong" T:LTText="Living" T:Lt="1" T:IsLiving="True" T:Oid=>

There are many DIV elements like this in the webpage. They can be differentiated by the value of T:NodeId. In this case it is "0:0", but in other cases it is "0:1", "0:2", etc.

I would like to capture some of the values in the DIV statement (for example T:Name) for a specific T:Node (in this case "0:0") via Javascript.

Here is a sample HTML page that I have written that tries to do that, but I haven't figured out the function to capture the value of T:Name yet. The idea of the sample HTML page is to press a button, which will then find the DIV element, read the T:Name, and then display it at the top of the sample HTML page.

<html>
<head>
<title>TEST</title>
</head>

<body>
    <button type="button" onclick="document.getElementById('demo').innerHTML = document.getElementById('0:0').T:Name.value">Submit</button>
    <p id="demo">SAMPLE</p>

    <div class="nodePedigree node male focus silhouette  nodePedigreeNoFather" id="0:0" style="height:0.57em; width:2.95em; left:0em; top:3.1918em;" T:NodeId="0:0" T:Pid=36512609282 T:Name="Jon Doe" T:LTText="Living" T:Lt="1" T:IsLiving="True" T:Oid=>
    <div class="node-bdy">
        <div class="bdyWrap">
            <input type="hidden" id="nd_0:0" value="False" />
            <div class=" icon iconMale nodePhoto"></div>
            <div class="nodeContent">
                <div class="vAlignContent">
                    <h6 class="nodeTitle">Jon Doe</h6>
                    <div class="nodeInfo"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>

Upvotes: 0

Answers (4)

Anonymous0day

Reputation: 3042

You have to use Element.getAttribute method, as one possibility.

// First, we get the Element we need
var myDiv = document.getElementById('0:0');

// From element we get the attribute we need.
var myValue = myDiv.getAttribute('T:Name');

document.body.insertAdjacentHTML('beforeend', '<br><hr>T:Name = ' + myValue ) ;

<html>
<head>
<title>TEST</title>
</head>

<body>
  
<!-- 

We change here your way to access the T:Name with 
document.getElementById('0:0').getAttribute('T:Name')
-->
    <button type="button" onclick="document.getElementById('demo').innerHTML = document.getElementById('0:0').getAttribute('T:Name')">Submit</button>
    <p id="demo">SAMPLE</p>

    <div class="nodePedigree node male focus silhouette  nodePedigreeNoFather" id="0:0" style="height:0.57em; width:2.95em; left:0em; top:3.1918em;" T:NodeId="0:0" T:Pid=36512609282 T:Name="Jon Doe" T:LTText="Living" T:Lt="1" T:IsLiving="True" T:Oid=>
    <div class="node-bdy">
        <div class="bdyWrap">
            <input type="hidden" id="nd_0:0" value="False" />
            <div class=" icon iconMale nodePhoto"></div>
            <div class="nodeContent">
                <div class="vAlignContent">
                    <h6 class="nodeTitle">Jon Doe</h6>
                    <div class="nodeInfo"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>

Upvotes: 1

T.J. Crowder

Reputation: 1075735

To read an attribute's value, you use getAttribute.

If you can really use the id, as you have in the question, then it's fairly simple:

var element = document.getElementById("0:0");
var value = element.getAttribute("T:Name");

Live Example:

document.querySelector("button").onclick = function() {
  var element = document.getElementById("0:0");
  var value = element.getAttribute("T:Name");
  document.getElementById('demo').innerHTML = value;
};

<button type="button">Submit</button>
<p id="demo">SAMPLE</p>

<div class="nodePedigree node male focus silhouette  nodePedigreeNoFather" id="0:0" style="height:0.57em; width:2.95em; left:0em; top:3.1918em;" T:NodeId="0:0" T:Pid=36512609282 T:Name="Jon Doe" T:LTText="Living" T:Lt="1" T:IsLiving="True" T:Oid=>
  <div class="node-bdy">
    <div class="bdyWrap">
      <input type="hidden" id="nd_0:0" value="False" />
      <div class=" icon iconMale nodePhoto"></div>
      <div class="nodeContent">
        <div class="vAlignContent">
          <h6 class="nodeTitle">Jon Doe</h6>
          <div class="nodeInfo"></div>
        </div>
      </div>
    </div>
  </div>

But in your question, you said you needed to use T:NodeId, and so in case you really do have to do that and can't use id: You can use querySelector with any CSS selector, and then getAttribute to get the attribute. It's a bit tricky, because:

You have to escape the : in the attribute name in the selector, and
You have to use lower case for the attribute, because that's how it will be interpreted by the browser (Chrome and Firefox were happy with either mixed-case or lower-case, but IE11 wanted lower case)

The escape for : is \3a, which in a string literal we have to write as \\3a (more below), so:

var element = document.querySelector('[t\\3anodeid="0:0"]');
var value = element.getAttribute("T:Name");

Live Example:

document.querySelector("button").onclick = function() {
  var element = document.querySelector('[t\\3anodeid="0:0"]');
  var value = element.getAttribute("T:Name");
  document.getElementById('demo').innerHTML = value;
};

<button type="button">Submit</button>
<p id="demo">SAMPLE</p>

<div class="nodePedigree node male focus silhouette  nodePedigreeNoFather" id="0:0" style="height:0.57em; width:2.95em; left:0em; top:3.1918em;" T:NodeId="0:0" T:Pid=36512609282 T:Name="Jon Doe" T:LTText="Living" T:Lt="1" T:IsLiving="True" T:Oid=>
  <div class="node-bdy">
    <div class="bdyWrap">
      <input type="hidden" id="nd_0:0" value="False" />
      <div class=" icon iconMale nodePhoto"></div>
      <div class="nodeContent">
        <div class="vAlignContent">
          <h6 class="nodeTitle">Jon Doe</h6>
          <div class="nodeInfo"></div>
        </div>
      </div>
    </div>
  </div>

More about CSS escapes: In CSS, to escape a character, you use \ followed by the hex code for the character. The hex code for : is 3A. And of course, since the selector is in a string literal, \ would have special meaning in the string literal, and we have to escape it with another \.

You can get the CSS escape value for any character by doing "x".charCodeAt(0).toString(16) in the JavaScript console, replacing x with the character in question.

Upvotes: 1