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'标签元素的文本值？

我有以下实习生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上输入类名，并使用它来获取元素，这样你就不会拉出页面上的所有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();

如何获得儿童元素

2 个答案: