關於表單元素的name及HTML中的id
阿新 • • 發佈：2019-03-10
txt 老師 inner mage 新的 調用 target col type
這種在上高級WEB課時，老師為表單元素賦了name值，之後直接在JS中使用該值而不需要使用document.get...來獲取了，例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form name="test"> <input type="text" name="txt" value="這是一個測試"> </form> <script type="text/javascript"> console.log(document.test); console.log(document.test.txt.value); </script> </body> </html>
結果如下
當第二個測試使用document.txt.value時，會產生錯誤提示，故使用表單元素的name時應該按DOM樹的父子關系進行調用。
另，寫隨筆前去百度+谷歌了一下，發現並未有人討論關於這個name的使用，不知道為什麽。
今天測試代碼的時候，發現在js中未獲取元素id時，可直接使用id來得到元素或對其進行DOM操作，例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test{ background: #ccc; } div>div{ width: 100px; height: 100px; background: #000; } </style> </head> <body> <div id="test"> <p id="myP">這是原來的信息</p> </div> <script type="text/javascript"> myP.innerHTML = "這是新的信息"; console.log(test.style.background);
console.log(test.style); test.appendChild(document.createElement(‘div‘)); </script> </body> </html>
這是結果：
在打印test的background時，打印了一片空白，我猜測直接使用id時，不能對其進行復雜的使用。
帶著疑問前去百度了一番，發現在mrcxt的一篇博客中有一些研究。簡單來說就是該方式使用id並非js規範，不推薦使用，將來不知是否還是支持。
關於表單元素的name及HTML中的id