访问 DOM 元素上不存在的对象属性的说明

Question

我是 JavaScript 初学者，正在寻找有关访问 DOM 元素上不存在的对象属性的解释。

我正在开发待办事项应用程序。以下是我当前的代码，但尚未完成。 有一个空的

todosArray

，然后当用户添加项目时，具有两个属性（

todoObj 

，

todo

）的

completed

将被添加到数组中。

在代码的后面，如果用户单击该项目，则可以删除或划掉该项目。在这次单击

addEventListener

中，在

clickedEl

语句中创建了一个变量

else if

，并从

completed

访问/复制（？）了

todosArray

属性。这是我不明白的地方。

clickedEl

如何访问

completed

属性？这里到底发生了什么？

// Variables 
const form = document.querySelector('form');
const formInput = document.querySelector('input[type=text]');
const ul = document.querySelector('ul');
const addBtn = document.querySelector('input[type=submit]');
const todosArray = [];

// Add item 
function addTodo(item) {
    const todoObj = {
        todo: item,
        completed: false
    };

    todosArray.push(todoObj);
    
    // Save to localStorage
    localStorage.setItem('todosArray', JSON.stringify(todosArray));
    
    formInput.value = '';
};

// Add task to todo list
form.addEventListener('submit', function (e) {
    e.preventDefault();
    
    if (formInput.value === '') {
        alert('Please add a task.');
    }
    else {
        const newLi = document.createElement('li');
        newLi.innerHTML = formInput.value;
        ul.append(newLi);
        const removeBtn = document.createElement('button');
        newLi.append(removeBtn);
        removeBtn.innerHTML = 'Remove';

        addTodo(formInput.value);
    };
});

// Remove/complete list item
ul.addEventListener('click', function (e) {
    if (e.target.textContent === 'Remove') {
        e.target.parentElement.remove();
    }
    else if (e.target.tagName === 'LI') {

        const clickedEl = e.target //li
        //console.log('clickedEl: ', clickedEl)
        if (clickedEl.completed === true) {
            clickedEl.style.textDecoration = 'none';
        }
        else {
            
            clickedEl.style.textDecoration = 'line-through';
            clickedEl.completed = true;
        }
    }
});

// Retrieve from localStorage
if (localStorage.getItem('todosArray')) {
    const todosList = JSON.parse(localStorage.getItem('todosArray'));

    for (let i = 0; i < todosList.length; i++){
        const newLi = document.createElement('li');
        newLi.textContent = todosList[i].todo;
        ul.append(newLi);
        const removeBtn = document.createElement('button');
        newLi.append(removeBtn);
        removeBtn.textContent = 'Remove';

        console.log(todosList[i]);
    }
}

我和一位导师交谈过，但我无法理解他的解释。另外，谷歌搜索了一下，但大多数结果都与属性访问器有关。

Answer 1

DOM 元素与普通 JavaScript 对象不同，这意味着它们不具有常规 JavaScript 对象所具有的所有属性和方法。

当您访问 e.target 时，您将获得对触发事件的 DOM 元素的引用。它是一个普通的 HTML 元素，没有诸如completed之类的属性。

else if (e.target.tagName === 'LI') {
    const clickedEl = e.target; // This is a reference to the <li> element
    if (clickedEl.completed === true) { // Trying to access completed property
        clickedEl.style.textDecoration = 'none';
    } else {
        clickedEl.style.textDecoration = 'line-through';
        clickedEl.completed = true; // Assigning a new property completed to the DOM element
    }
}

在这部分中，clickedEl指的是被点击的列表元素。常规 DOM 元素上没有定义完整的属性。在 JavaScript 中，您可以动态地向对象添加属性，这就是下面发生的事情。

clickedEl.completed = true;

您正在向列表 (li) 元素添加一个新属性 Completed。这就是 clickedEl.completed 起作用的原因，即使它不是 DOM 元素的内置属性。