正在从li的子节点检索文本

Question

我正在尝试检索通过javascript创建的li元素的a元素的文本。这是我用来创建的代码：

function myFunction(search) {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('delegateNameInput');
filter = input.value.toUpperCase();
ul = document.getElementById("nameList");
li = ul.getElementsByTagName('li');
data = ['test1', 'test2', 'test3'];
for (i = 0; i < data.length; i++) {
var lineItem = document.createElement("li");
lineItem.setAttribute('onClick', 'setName(this)');
var link = document.createElement("a");
link.appendChild(document.createTextNode("test2"));
lineItem.appendChild(link);
ul.appendChild(lineItem);
}
}

如何从a元素中获取文本？

Answer 1

按照编写方式，锚点元素是创建的LI元素的第一个子元素，由LI元素的firstChild属性指向。

或者，您可以将A元素定位为DOM中LI节点的children属性中的第一个条目。

为了这个演示的目的，我已经将列表项中的文本设置为不同的数据数组项，声明为data，并忽略未使用的变量input, filter和li:

"use strict";
function myFunction(search) {
// Declare variables
var input, filter, ul, li, a, i, data;
input = document.getElementById('delegateNameInput');
filter = input.value.toUpperCase();
ul = document.getElementById("nameList");
li = ul.getElementsByTagName('li');
data = ['test1', 'test2', 'test3'];
for (i = 0; i < data.length; i++) {
var lineItem = document.createElement("li");
lineItem.setAttribute('onClick', 'setName(this)');
var link = document.createElement("a");
link.appendChild(document.createTextNode(data[i]));
lineItem.appendChild(link);
ul.appendChild(lineItem);
}
}
function setName( lineItem) {
console.log("setName>lineItem>Anchor>link text = '" + lineItem.firstChild.textContent + "'");
console.log("(using children: '" + lineItem.children[0].textContent + "')");
}
myFunction(null);

<input type="text" id="delegateNameInput" placeholder="delegateNameInput">
<ul id="nameList">
</ul>
(Click a list item to see console message)

---

参考文献：

• firstChild继承自node interface

• children继承自ParentNode mixin，是一个实时的HTMLCollection。