用于检索span元素内容的JavaScript

JavaScript to retrieve contents of span element

本文关键字：JavaScript 元素 检索 span 用于      更新时间：2023-09-26

我的任务是在格式化的矩形中输出我的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>

也只需检查span标记名，因为您可以将p或span作为子级：

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

顺便说一句，Element.tagName总是大写字符串，所以不需要检查较低的p和span。

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

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

或者querySelectorAll('span')

但请注意，您不会得到字符串作为返回

您可以使用与从"p"元素中获取文本相同的方法，在"span"上添加一个复选框。

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

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

通用解决方案是按类查找元素

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

然后根据需要处理结果。它将发现夏季的所有结果将是："六月-七月-八月"

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

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

JSfiddle演示

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);
}
相关文章：