1 获取指定标签元素

可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，
获取到的是一个html对象，然后将它赋值给一个变量，比如:

(1) 法一

  1. // 以上省略...
  2.         <title>Document</title>
  3.     <script>
  4.         var op = document.getElementById("p1");
  5.         alert(op);  // null
  6.     </script>
  7. </head>
  8. <body>
  9.     <p id="p1">哈哈</p>
  10. </body>
  11. </html>

因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载

(2) 法二

  1. // 以上省略...
  2. <body>
  3.     <p id="p1">哈哈</p>
  4. </body>
  5. </html>
  6. <script>
  7.     var op = document.getElementById("p1");
  8.     alert(op);  // [object HTMLParagraphElement]
  9. </script>

可以, 但放下面有点怪

(3) 法三

  1. // 以上省略...
  2.         <script>
  3.         function fnLoad(){
  4.             var op = document.getElementById("p1");
  5.             alert(op);  // [object HTMLParagraphElement]
  6.         }
  7.         // html页面加载完, 会自动触发onload事件
  8.         window.onload = fnLoad;  // [object HTMLParagraphElement]
  9.     </script>
  10. </head>
  11. <body>
  12.     <p id="p1">哈哈</p>
  13. </body>
  14. </html>

设置页面加载完成执行的函数，在执行函数里面获取标签元素。

2 获取指定标签的属性

  1.         <style>
  2.         .btnstyle {
  3.             background: red;
  4.             font-size: 30px;
  5.         }
  6.     </style>
  7.     <script>
  8.         window.onload = function(){
  9.             // 根据id获取标签对象
  10.             var oBtn = document.getElementById("btn1");
  11.             // 获取标签的属性
  12.             alert(oBtn.type);
  13.             // 设置标签的属性
  14.             oBtn.value = "打个响指";
  15.             // 设置标签的样式
  16.             oBtn.className = "btnstyle";
  17.         };
  18.     </script>
  19. </head>
  20. <body>
  21.     <input type="button" value="按钮" id="btn1">
  22. </body>
  23. </html>

image.png