Question

我的任务是以格式化的矩形输出div div的内容。我有一切正常工作，我的＆＃39; p＆＃39;元素，但似乎无法弄清楚如何获得＆＃39; span＆＃39;元素。我知道它应该很容易，但我已经没有想法了（也许是因为它是凌晨3点）。下面的代码对我有用，但我无法确定在哪里添加＆＃39; span＆＃39;。

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

也可以检查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/

Answer 2

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

或者 querySelectorAll('span')

但要注意，你不会得到一个字符串作为返回

Answer 3

你可以像获得＆＃34; p＆＃34;中的文字一样。元素，添加检查＆＃34; span＆＃34;。

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

通用解决方案是按类

查找元素

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

然后根据需要处理结果。它将在夏季一次性找到所有结果：＆＃34; 6月7月8月＆＃34;

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

用于检索span元素内容的JavaScript

5 个答案: