Question 42777 in Html Question posted in
Some basic documentation can be found here.

Can't understand why Li need to be in caps can, can anyone explain? – Html

function toggleClassDoneOnAndOff(event) {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("done");
    }
}
ul.addEventListener("click", toggleClassDoneOnAndOff);

Can anyone explain why LI need to be in caps?

I just try to find the answer but dont understand the explanation

Tags:

3

Answers


  1. 0

    According to Element: tagName property documentation:

    For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form. For example, tagName called on a <div> element returns "DIV"

    The tag names of elements in an XML DOM tree are returned in the same case in which they’re written in the original XML file. If an XML document includes a tag "<SomeTag>", then the tagName property’s value is "SomeTag".

    Login or Signup to reply.
  2. 0

    because behind HTML, all its elements are described in an object model, directly accessible in javascript. To simplify [a lot] all HTML objects are described in javascript, whose particularity is to be case sensitive. therefore the prototype of a UL element has always been capitalized.

    In reality, the first html browser is written in C, which is also case sensitive (see Robert Cailliau -> first web browser MacWWW)

    You can also use a generic method matches() which uses css syntax where lowercase is accepted:

    ul.addEventListener('click', (event) =>
  {
  if (event.target.matches('li'))
    {
    event.target.classList.toggle('done');
    }
  });

    in comments:

    Do you have any references for your rationale? ‘therefore the prototype of a UL element has always been capitalized.’ What does that mean? The Spec simply specifies that ‘The tagName getter steps are to return this’s HTML-uppercased qualified name.’ – pilchard

    specs are based on real code; there is a prototype object for each HTML element having names written in uppercase letters. Even If the HTML interpreter accepts that we write tag names in lowercase letters, it remains obliged to fetch the prototype having a name written in uppercase letters, which proto uses a get tagName() method to return the object name. Objects can only have a unique name, and this one is made of uppercase letters.

    see in console.log( document.querySelector('li')) (Firefox)
    enter image description here

    tagName will return an uppercase value
    enter image description here

    see HTML Element prototype… (HTML LI Element prototype is herited from HTML Element prototype)
    enter image description here

    herited from Dom Element…
    enter image description here

    the tagName value comes from a get method.
    enter image description here

    Then you would have to look at source codes of the javascript engines (SpiderMonkey for firefox) to check where this value really comes from in capital letters, but we already have a clue: the name of the HTMLLIElementprototype prototype does indeed contain the value LI in capital letters; and I’m willing to bet a bunch of peanuts that there’s a connection between those uppercase letters and the value returned by the get tagName().

    Login or Signup to reply.
  3. 0

    It’s simple: the tagName property is defined to always be in all-caps, and === (and == for that matter) compares strings exactly; 'a' === 'A' is false.

    You could do the comparison other ways; Mister Jojo in their answer suggests calling the matches method on the target rather than using its tagName property at all. But you could still use tagName, and just explicitly convert to lowercase:

    if (event.target.tagName.toLowerCase() === "li")

    That’s doing extra work, though. Seems easier to just use the all-caps version, since that’s guaranteed to be what .tagName contains.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search