Javascript活动变体观察服务器，用于处理各种元素

当

li

编号在

ul

中更改时，我想添加或删除

必需的
attr。
如果没有
li
s，将添加
所需的
attr，如果有
li
s，将删除
所需的
attr

该功能非常有效，但仅适用于第一次
输入[type=“file”]
我希望函数为页面中的所有文件输入工作。
我希望它能观察到每一个领域的变化

我想做什么

const fileList = document.querySelectorAll('ul.file-list')[x];
observer.observe(fileList, {
    childList: true
})

但我有两个问题：

如何找到我正在使用的
ul.file列表
的数组位置（而不是
x
）
我不喜欢使用事件侦听器
任何帮助都会很好

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        let liLength = mutation.target.getElementsByTagName("li").length;
        if(mutation.addedNodes.length){
            console.log('added',mutation);
            if(liLength != 0){
                mutation.target.parentElement.getElementsByTagName('input')[0].required = false;
            }
        }
        if(mutation.removedNodes.length){
            if(liLength == 0){
                mutation.target.parentElement.getElementsByTagName('input')[0].required = true;
            }
        }
    });
});

const fileList = document.querySelector('ul.file-list');
observer.observe(fileList, {
    childList: true
})

这是html标记。这是我在页面中的27'ul之一

<div class="custom-file" id="tz-file">
    <label class="custom-file-label" for="tzfile">add file</label>
    <ul class="file-list">
        <li><a href="./uploads/9999999/1.pdf" target="_blank"> 1.pdf </a>
            <span class="item-file" id="2018-9999999-21314-1">remove file</span></li>
    </ul>
    <input type="file" class="custom-file-input" id="tzfile" name="tzfile">
</div>


添加文件


删除文件

您没有显示页面HTML，但我想您可以在observer配置（参见文档）中指定
子树：true
，并观察
document.body
，例如。我添加了一个HTML示例。我想，观察
身体
会提醒我每一个小变化。不是吗？实际上，我把
querySelector
对准了主体，现在它对文档中的所有文件输入都非常有效