javascript中document物件的知識點
阿新 • • 發佈：2018-12-11
javascript中document物件的知識點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript中document物件的知識點,雪豹軟體工作室</title> <script type="text/javascript"> /*document物件的方法*/ //document.write("hello");//向瀏覽器窗體的body內寫入內容,一般做專案的時候用的比較少 //關於<!-- //-->註釋的知識，可參考http://blog.csdn.net/qq_33107435/article/details/77099204 <!-- function testGetElementById(){ //document.getElementById(""); alert("test"); } //--> /*getElementById方法的使用*/ function testGetElementById(){ //document.getElementById("控制元件或者物件的id屬性的值")這句話,可以獲得控制元件或物件 var xiaowugui = document.getElementById("myXiaowugui"); /* 其實document.getElementById("控制元件或者物件的id屬性的值")這句話可以不寫,直接使用控制元件的id屬性的值來得到控制元件，如下例子 */ //alert("通過控制元件的id屬性的值的方式直接得到" + myXiaowugui.width + " " + myXiaowugui.height); /* 通過控制元件的id屬性的值直接得到控制元件，這樣的方式不能保證所有的瀏覽器都支援，可能有的瀏覽器不支援這種寫法，所以為了規範起見，最好還是按 照document.getElementById("控制元件或者物件的id屬性的值")這種方式來寫。 */ alert("通過getElementById方式得到" + xiaowugui.width + " " + xiaowugui.height); xiaowugui.width = 480; xiaowugui.height = 480; } /*getElementsByName方法的使用*/ function testGetElementsByName(){ var userNames = document.getElementsByName("userName"); alert(userNames.length); for (var i = 0; i < userNames.length; i++) { alert(userNames[i].value); } } /*getElementsByTagName方法的使用*/ function testGetElementsByTagName(){ var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { alert(inputs[i].type + " - " + inputs[i].name + " - " + inputs[i].value); alert(inputs[i].size); inputs[i].size = inputs[i].size * 2; alert(inputs[i].size); } } function changeBackgroundColor(){ var obj = document.getElementById("myTest"); obj.style.backgroundColor = "#EED2EE";//改變div的背景顏色 //obj.style.border = "solid"; //在javascript中訪問控制元件的屬性需要去掉-中劃線，然後再把中劃線後面的每個單詞的開頭字母改成大寫(即駱駝式或者叫駝峰式寫法) //obj.style.borderColor = "red"; //obj.style.borderWidth = "6px"; obj.style.border = "8px solid #CD0000"; var obj2 = document.getElementById("myTr"); obj2.bgColor = "#CDCD00";//改變table控制元件中的tr的背景顏色 } </script> </head> <body> <br><br> <!-- 測試A連結標籤內title屬性,滑鼠懸停,提示內容換行,可參考網頁http://www.divcss5.com/jiqiao/j510.shtml --> <div id="myTest" style="width: 240px;height: 240px;background-color: #7CCD7C;" >測試改變div的背景顏色</div><br> <table> <tr id="myTr" bgcolor="#C67171"> <td>測試改變背景顏色</td> </tr> </table> <input type="button" value="改顏色" onclick="changeBackgroundColor()"><br><br> <input name="userName"><br><br> <input name="userName"><br><br> <input name="userName"><br><br> <input name="userName"><br><br> <a href="#" title="電影名稱:戰狼2 導演:吳京 上映時間:2017-07-28 型別：戰爭、動作">戰狼2</a><br><br> <input type="button" value="測試" onclick="testGetElementById()"><br><br> <input type="button" value="測試getElementById" onclick="testGetElementById()"><br><br> <input type="button" value="測試testGetElementsByName" onclick="testGetElementsByName()"><br><br> <input type="button" value="測試testGetElementsByTagName" onclick="testGetElementsByTagName()"><br><br> <img title="動漫小烏龜桌布" src="img/xiaowugui.jpg" id="myXiaowugui" alt="桌布"><br><br> <img title="動漫小烏龜桌布" src="img/cry6.gif" id="myXiaowugui" alt="桌布"><br><br> </body> </html>
