Question

当我在HTML中使用ID并在带有getElementByID的javascript代码中选择它们时，我的代码有效，但是当我将其更改为类时，我的代码不再起作用。

我想使用类，因为我正在与其他喜欢类的人一起从事项目。

而且，对于JavaScript代码，使用类和ID是否有区别？

const email = document.getElementsByClassName('email');
const form = document.getElementsByClassName('form');
const emailMessage = document.getElementsByClassName('empty-email-message');
const errorEmail = document.getElementsByClassName('invalid-email-message');

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    emailMessage.innerHTML = 'where is the email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

<form class="form" id="form" action="submit">
            <input class="email" type="email"/>
            <button type="submit">Go</button>
            <!-- dont use id -->
            <p class="empty-email-message"></p>
            <p class="invalid-email-message"></p>
          </form>

const email = document.getElementById('email');
const form = document.getElementById('form');
const emailMessage = document.getElementById('empty-email-message');
const errorEmail = document.getElementById('invalid-email-message');

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    emailMessage.innerHTML = 'where is the email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

<form class="form" id="form" action="submit">
            <input id="email" type="email"/>
            <button type="submit">Go</button>
            <!-- dont use id -->
            <p id="empty-email-message"></p>
            <p id="invalid-email-message"></p>
          </form>

Answer 1

只有一个ID且您需要直接引用它时使用ID。鉴于类的想法是有多个，但JavaScript只能获得一个，因此使用类没有多大意义。

您可以申请getElementsByClassName，但就像我说的，如果您只得到一个，请使用ID。

Answer 2

您可以使用它，但最好将其与ID结合使用：

const email = document.getElementsByClassName('email')[0];
const form = document.getElementsByClassName('form')[0];
const emailMessage = document.getElementsByClassName('empty-email-message')[0];
const errorEmail = document.getElementsByClassName('invalid-email-message')[0];

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    emailMessage.innerHTML = 'where is the email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

<form class="form" id="form" action="submit">
            <input class="email" type="email"/>
            <button type="submit">Go</button>
            <!-- dont use id -->
            <p class="empty-email-message"></p>
            <p class="invalid-email-message"></p>
          </form>

使用类不会通过ID破坏我的代码

2 个答案: