JS多个按钮相同功能，更新不同元素

cdy

初学前端经常用getElementById来修改元素内容，但遇到需要反复用同种功能时不太可能反复使用getElementById，然后创建多个不同id的元素来实现

此时通常用getElementsByClassName来实现，因其返回的是一个数组结构，有时会出现无法对映上想修改的元素等问题。

以下用创建一个可修改的treeView为例，来展示如何实现类似的操作以及其中有哪些常见错误。

<!DOCTYPE html>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
        <button id='createParent'>Create Parent</button>
        <ul id="backend"></ul>
    </div>
    <script src='script.js'></script>
</body>
</html>

Create Parent按钮创建新的父节点

<ul id="backend"></ul>是我们要加入新内容的地方

.createChild {
    background-color: grey;
    color: white;
    padding: 0.1rem 0.5rem;
    margin-left: 5px;
    cursor: pointer;
.closeIt {
    background-color: grey;
    color: white;
    padding: 0.1rem 0.5rem;
    margin-left: 5px;
    cursor: pointer;
.click {
    background-color: grey;
    color: white;
    padding: 0.1rem 0.5rem;
    margin-left: 5px;
    cursor: pointer;
}

style.css文件

createParent = document.getElementById('createParent')
backend = document.getElementById('backend')
//给createParent按钮添加点击添加父节点事件，新事件会添加在id='backend'的元素中
createParent.addEventListener('click', function() {
    backend.innerHTML += ` <li>
    <span class='name'>Node</span>
    <span class="click">m</span>
    <span class='createChild'>+</span>
    <span class='closeIt'>x</span>
    <span class='timer'>0</span>
    </li>`
    myfunction()
backend.addEventListener('click', function(e) {
//点击删除当前节点，因要删除整个<li>中内容因此要删掉parentElement
    if (e.target.classList == 'closeIt') {
        e.target.parentElement.remove();
    if (e.target.classList == 'createChild') {
        createChildBtn = e.target;
        parentNode = createChildBtn.parentElement;
        var x = ` <li>
        <span class='name'>Node</span>
        <span class="click">m</span>
        <span class='createChild'>+</span>
        <span class='closeIt'>x</span>
        <span class='timer'>0</span>
        </li>`
        parentNode.innerHTML += `<ul>${x}</ul>`;
//myfunction()的位置必须在末尾，保证新的元素添加完才会运行，不然会导致getElementsByClassName返回的数组index出错
        myfunction()
function myfunction() {
    //这里可能会出错，如果不用let会导致后续i的值不统一
    for(let i=0;i<document.getElementsByClassName("click").length;i++){
        document.getElementsByClassName("click")[i].onclick=function(){
            var text=document.getElementsByClassName("name")[i];
            var val=text.innerHTML;
            text.innerHTML="<input type='text' id='n' value="+val+" />";
            document.getElementById("n").addEventListener("blur",function(e){
                text.innerHTML=document.getElementById("n").value;
var timer = setInterval(count, 1000);
function count() {
    for(let i=0;i<document.getElementsByClassName("timer").length;i++){