如何修改JS动态生成的ul列表最后一个元素样式？lastChild修改失效原因是什么？

1. 修改样式不生效的原因 #

• 核心原因是你使用的lastChild属性返回的是节点列表中的最后一个节点，包含文本节点（比如标签之间的换行、空格）、注释节点等非元素节点，这类节点本身没有style属性，你对其赋值样式自然不会生效，也不会抛出语法错误。
• 控制台打印能看到内容是因为浏览器会把所有节点类型都正常输出，你可以仔细看打印结果的节点类型标识，大概率显示为#text而不是你预期的li元素节点。

2. 修改动态插入的列表最后一个子元素属性的最优方案 #

直接使用lastElementChild替代lastChild即可，该属性只会返回节点列表中最后一个元素类型的节点，自动跳过文本、注释等无效节点：

function fonter () {
    // 直接选取最后一个元素节点修改样式
    text.lastElementChild.style.fontSize = "20px";
    text.lastElementChild.style.fontFamily = "cursive";
    // 修改innerText同理
    // text.lastElementChild.innerText = "新的内容";
}
font.addEventListener("click" , fonter);

如果需要兼容IE8及更早版本，可以手动遍历判断节点类型：

let lastChild = text.lastChild;
// nodeType为1代表元素节点
while(lastChild && lastChild.nodeType !== 1) { 
    lastChild = lastChild.previousSibling;
}
if(lastChild) {
    lastChild.style.fontSize = "20px";
}

内容的提问来源于stack exchange，提问作者user17389280