1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #item{ 8 200px; 9 } 10 </style> 11 </head> 12 <body> 13 <!--第一种元素获取方法： 14 可以使用内置对象document上的getElementById 15 方法来获取页面上设置了id属性的元素，获取到的 16 是一个html对象，然后将它赋值给一个变量--> 17 <div id="item" style="">123</div> 18 <div id="item1" style="">456</div> 19 <input type="radio" value="0" name="zzz" id = "biaodan">表单</input> 20 <input type="radio" value="1" name="zzz" id = "biaodan1">表单</input> 21 <!--<input type="checkbox" value="0" name="zzz">表单</input>--> 22 <script> 23 var odiv = document.getElementById('item').textContent; 24 console.log(odiv); 25 26 </script> 27 28 29 <!--第二种元素获取方法： 30 将JavaScript语句放到window.onload触发的函数里面 31 获取元素的语句会在页面加载完后才执行，就不会出错 32 window指js当中最大的对象，代表窗口 33 onload指页面加载完成之后 34 --> 35 <script type="text/javascript"> 36 var odiv1; 37 var odiv2; 38 var odiv3; 39 var odiv4; 40 var odiv5; 41 window.onload = function(){ 42 odiv1 = document.getElementById('item').textContent; 43 console.log(odiv1); 44 45 odiv2 = document.getElementById('item'); 46 //odiv2.style.width = "200px"; 47 odiv2.style.height= "200px"; 48 odiv2.style.backgroundColor = "yellow"; 49 odiv2.style.fontSize = "30px" 50 51 // 修改文本内容的两种方式 52 odiv2.textContent = 111; 53 odiv4 = document.getElementById('item1'); 54 odiv4.innerText = '<h1>333</h1>';/*innerText可用于解析文本，也可用于获取文本*/ 55 odiv4.innerHTML = '<h1>222</h1>';/*innerText可用于解析标签，也可用于获取标签*/ 56 // 在设置样式的时候,如果有些属性是双拼词background-color等要把中间的'-'换成第二单词的首字母大写 57 58 59 //此处获取不到宽度。因为js获取样式只能获取行间样式，不能获取在head标签内写的CSS样式 60 odiv3 = document.getElementById('item').style.width; 61 console.log(odiv3); 62 63 // 表单的元素获取： 64 odiv5 = document.getElementById('biaodan'); 65 console.log(odiv5.value); 66 odiv5.value=1; 67 console.log(odiv5.value) 68 } 69 </script> 70 <!--注意：script代码段要在所获取元素代码段的下边才能获取到元素。一般建议把script代码放在所有html代码的最下面或者是用window.onload--> 71 </body> 72 </html>