如何在Javascript中捕获DIV元素中的值

How to Capture Value in DIV Element in Javascript

本文关键字：DIV 元素 Javascript      更新时间：2023-09-26

网页的一个部分具有以下div元素：

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

网页中有许多类似的DIV元素。它们可以通过T:NodeId的值来区分。在这种情况下，它是"0:0"，但在其他情况下是"0:1"、"0:2"等。

我想通过Javascript捕获特定T:Node（在本例中为"0:0"）的DIV语句中的一些值（例如T:Name）。

下面是我编写的一个示例HTML页面，它试图做到这一点，但我还没有找到捕获t:Name值的函数。示例HTML页面的想法是按下一个按钮，该按钮将找到DIV元素，读取T:Name，然后将其显示在示例HTML页面顶部。

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

若要读取属性的值，请使用getAttribute。

如果你真的可以使用id，就像你在问题中所做的那样，那么它相当简单：

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

实时示例：

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>

但在你的问题中，你说你需要使用T:NodeId，所以如果你真的必须这样做，并且不能使用id：你可以将querySelector与任何CSS选择器一起使用，然后使用getAttribute来获取属性。这有点棘手，因为：

  1. 您必须在选择器的属性名称中转义:，然后

  2. 属性必须使用小写，因为浏览器就是这样解释的（Chrome和Firefox对混合大小写或小写都很满意，但IE11想要小写）

:的转义符是'3a，在字符串文字中，我们必须将其写为''3a（详见下文），因此：

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

实时示例：

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>

关于CSS转义的更多信息：在CSS中，要对字符进行转义，可以使用'，后跟该字符的十六进制代码。:的十六进制代码为3A。当然，由于选择器位于字符串文字中，因此'在字符串文字中具有特殊含义，我们必须用另一个'来转义它。

通过在JavaScript控制台中执行"x".charCodeAt(0).toString(16)，将x替换为有问题的字符，可以获得任何字符的CSS转义值。

您必须使用Element.getAttribute方法，这是一种可能性。

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

你试过了吗。getAttribute("T:name")？我认为这会有所帮助。

在JavaScript中，没有这样的表达式：

a.T:name.value

相反，你可以尝试

a["T:name"].value

但是，在这种情况下这将不起作用，因为T是一个名称空间。尝试DOM getAttributeNS:

a.getAttributeNS( "T", "NAME" )
相关文章：