這幾天在寫 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>