Is Element.tagName always uppercase?

Posted in :

這幾天在寫 javascript, 發現原來 tag name 都是大寫。

Is Element.tagName always uppercase?
http://stackoverflow.com/questions/27223756/is-element-tagname-always-uppercase

ou don’t have to toLowerCase or whatever, browsers do hehave the same on this point (surprisingly huh?).

About the rationale, once I had discussion with a colleague who’s very professional on W3C standards. One if his opinion is that using uppercase TAGNAME would be much easier to recognize them out of user content. That’s quite persuasive for me.


edit: As some say xhtml doctype returns lowercase tagName, I did tests – the result is UPPERCASE. And by the way, XHTML is XML-style HTML, it’s still HTML, not XML.

Technically, please read this spec for more info: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-745549614

Note that this (tagName) is case-preserving in XML, as are all of the operations of the DOM. The HTML DOM returns the tagName of an HTML element in the canonical uppercase form, regardless of the case in the source HTML document.

As of asker’s question: this is trustable. Breaking change is not likely to happen in HTML spec.

 


HTML DOM childNodes Property
https://www.w3schools.com/jsref/prop_node_childnodes.asp

w3schools 網站上的 「Try it Yourself」真的超好用的,可以直接在上面測試語法正不正確。


我的 sample:

<!DOCTYPE html>
<html>
<head>
<style>
div {
 border: 1px solid black;
 margin: 5px;
}
</style>
</head>
<body>

<p>Click the button to find out how many child nodes the div element below has.</p>

<button onclick="myFunction()">Try it</button>

<p class="form-row form-row-first" id="billing_CVSStoreID_field" data-sort="" style="display: block;">
<label for="billing_CVSStoreID" class="">門市店號</label>
<input class="input-text " name="billing_CVSStoreID" id="billing_CVSStoreID" placeholder="門市店號" value="" type="text"></p>

demo:<p id="demo"></p>

<script>
function myFunction() {
 var nodes = document.getElementById('billing_CVSStoreID_field').childNodes;
 for(i=0; i<nodes.length; i++) {
 if (nodes[i].tagName == 'LABEL') {
 var new_html = (nodes[i].textContent).replace('*','');
 nodes[i].innerHTML = new_html + ' <abbr class="required" title="必要欄位">*</abbr>';
 }
 }
 document.getElementById("demo").innerHTML = "done";
}
</script>

</body>
</html>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *