如何获取子元素

Question

我正在尝试验证以下 html：

<div class="project-counts-nav-wrapper" style="">
    <ul id="project-counts" class="project-counts-nav" style="">
        <li style="">0 active projects</li>
        <li style="">0 draft projects</li>
        <li style="">
        0 archived projects (
        <a href="/projects_archived">View</a>
        )
        </li>
    </ul>
</div>

如何获取每个 'li' 标记元素的文本值？

我有以下 Intern js 代码：

            .findByCssSelector('#project-counts')
            .findAllByTagName('li')
              .then(function(children){
                console.info('Show children length: ' + children.length);
                console.info('children: ' + children);
                for(var i=0; i<3; i++){
                    // how do I get text for each element
                    console.info('Show children: ' + children[i];
                }

              }).end();

我从输出中看到以下内容：

Show children length: 3
children: [object Object],[object Object],[object Object]
Show children: [object Object]
Show children: [object Object]
Show children: [object Object]

我想得到：

0 active projects
0 draft projects
0 archived projects

谢谢，布拉德

Answer 1

以下应该适合您：-

var liElements = document.getElementsByTagName('li'),
i;
for (i = 0; i < liElements.length; i++) {
    console.info(liElements[i].textContent);   
}

上面应该只打印所需的文本内容。注意 - 你会想要继续在你的 li 上输入 class 名称并使用它获取元素，这样你就不会拉出页面上的所有 li。

Codepen link

Answer 2

这是解决方案。我在 findAllByTagName 命令之后添加了链接命令 getVisableText：

            .findByCssSelector('#project-counts')
            .findAllByTagName('li')
            .getVisibleText()
              .then(function(children){
                console.info('Show children length: ' + children.length);
                console.info('children: ' + children);
                for(var i=0; i < children.length; i++){
                    console.info('Show each child: ' + children[i]);
                }

              }).end();

如何获取子元素

How to get children elements

intern