Question

网页的某个部分包含以下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：节点（在本例中为“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>

Answer 1

您必须使用Element.getAttribute方法作为一种可能性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

您必须转义选择器中属性名称中的getAttribute，
您必须对该属性使用小写字母，因为它是如何被浏览器解释的（Chrome和Firefox对混合大小写或小写字母感到满意，但IE11要求较低情况下）

:的转义为:，在字符串文字中我们必须写为\3a（更多信息如下），所以：

\\3a

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

有关CSS转义的更多信息：在CSS中，要转义字符，可以使用<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>后跟字符的十六进制代码。 \的十六进制代码为3A。当然，由于选择器是字符串文字，:在字符串文字中具有特殊含义，我们必须使用另一个\来转义它。

您可以在JavaScript控制台中执行\，将"x".charCodeAt(0).toString(16)替换为相关字符，从而获取任何字符的CSS转义值。

Answer 3

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

Answer 4

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

a.T:name.value

而不是这样，你可以尝试

a["T:name"].value

但是，在这种情况下，这不起作用，因为T是命名空间。尝试DOM getAttributeNS：

a.getAttributeNS( "T", "NAME" )

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

4 个答案: