JavaScript 检索 span 元素的内容

Question

我的任务是在格式化的矩形中输出我的 div ID 的内容。我的 'p' 元素一切正常，但似乎无法弄清楚如何获取 'span' 元素。我知道这应该很容易，但我运行没有想法（可能是因为现在是凌晨 3 点）。下面的代码对我有用，但我不知道在哪里添加 'span'.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 >DOM Example</h1>

        <div id="weekday"> weekdays
            <p>Monday</p>
            <p>Tuesday</p>
            <p>Wednesday</p>
            <p>Thursday</p>
            <p>Friday</p>
        </div>
        <div id="weekend"> weekends
            <p>Saturday</p>
            <p>Sunday</p>
        </div>
        <div id="summer"> summer
            <span> June</span>
            <span> July</span>
            <span> August</span>
        </div>
            <p>Thank you</p>
            <p>Have a nice day</p>
        <div id="rectangleDiv"> 

        </div>
        <script>

        var input = prompt("Input weekend, weekday, or summer");

        var matches = [];
        var searchEles = document.getElementById(input).children;
        for(var i = 0; i < searchEles.length; i++) {
                if(searchEles[i].tagName == 'p' || searchEles[i].tagName == 'P') {
                    matches.push(searchEles[i].innerText);
                }
            }

         var rectangle = document.getElementById("rectangleDiv");
        rectangle.setAttribute("style","width:250px;height:200px;background-color:cyan;color:blue;border-color:red;border-size:3px;border-style:solid;");
        var i;
        for(i=0;i<matches.length;i++) {
            rectangle.innerHTML +=matches[i]+"<br>";
        }

        </script>
</body>
</html>

Answer 1

尝试使用 document.getElementsByTagName('span)`

或者 querySelectorAll('span')

但请注意，您不会得到 return

的字符串

Answer 2

只需检查 span 标签名称，因为您可以将 p 或 span 作为 children:

if (searchEles[i].tagName == 'P' || searchEles[i].tagName == 'SPAN') {
    matches.push(searchEles[i].innerText);
}

顺便说一句，Element.tagName 始终是大写字符串，因此无需检查小写 p 和 span.

演示： http://jsfiddle.net/ax5pn09L/

Answer 3

您可以按照从 "p" 元素中获取文本的方式执行此操作，添加对 "span" 的检查。

jsfiddle代码： http://jsfiddle.net/fxatn8kv/

if(searchEles[i].tagName == 'p' || searchEles[i].tagName == 'P' || searchEles[i].tagName.toLowerCase() == 'span')

Answer 4

您需要像这样使用 .querySelectorAll('p, span')：

JSfiddle Demo

var input = document.getElementById(prompt("Input weekend, weekday, or summer"));

var spans = input.querySelectorAll('p, span');

for(var i = 0, l = spans.length; i < l; i++){
    console.log(spans[i].textContent || spans[i].innerText);
}

Answer 5

通用解决方案是通过class

查找元素

if(searchEles[i].className == 'elementToFind')

然后根据需要处理结果。它将立即找到所有结果，夏季将是："June July August"

<div id="summer"> summer
  <strong class="elementToFind"> June</span>
  <h2 class="elementToFind"> July</span>
  <span class="elementToFind"> August</span>
</div>

JavaScript 检索 span 元素的内容

JavaScript to retrieve contents of span element

html

javascript

dom

getelementbyid