Question

在控制台中输入以下命令：

document.querySelectorAll('div.information div.contact div ')[1]

我采取的结果是

<span class="information">
<call>number 1</call>
<call>number 2</call>
</span>

如何获取call元素的innerHTML？我应该使用nth孩子吗？结果：

number 1

并在另一个命令之后

number 2

Answer 1

试试这个，

<强> HTML

<span class="information">
  <call>number 1</call>
  <call>number 2</call>
</span>

<强>的JavaScript

var values = [];
var elements = document.getElementsByTagName('call');

for (var i = 0; i < elements.length; i++) {
  values.push(elements[i].innerHTML);
}

/** ["number 1", "number 2"] **/
console.log(values);

示例

JSFiddle

Answer 2

没有＆＃34;电话＆＃34;元件。

在这种情况下，

document.getElementsByClassName()可能更合适，但使用ID会更容易。

＆＃13;

window.onload = function() {
  var information = document.getElementsByClassName('information')[0]
  var calls = document.getElementsByClassName('call');
  var numbers = [];

  for (var i = 0; i < calls.length; i++) {
    numbers.push(calls[i].innerHTML);
  }

  for (var i = 0; i < numbers.length; i++) {
    document.getElementById('numbers').value += numbers[i] + '\n';
  }

}

＆＃13;

<span class="information">
<span class="call">number 1</span>
<span class="call">number 2</span>
</span>


<h2>Added so we can see something without looking at the console:</h2>
<form name="form" id="form">
  <textarea id="numbers"></textarea>
</form>

＆＃13;

Answer 3

<html>
<head>
    <title>
        Practice
    </title>
</head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var data = document.getElementsByTagName("call");
        for(var i=0;i<data.length;++i)
        {
            var scope = $(data[i]).html();
            console.log(scope);
        }
    });
</script>
<body>
    <span class="information">
        <call>number 1</call>
        <call>number 2</call>
    </span>
</body>

取两个相同元素的值

3 个答案: