getElementById
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> </style> </head> <body> <div id="box" name="box">123123</div> <script type="text/javascript"> var boxes = document.getElementById('box'); console.log(boxes); </script> </body> </html>getElementsByTagName
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> </style> </head> <body> <div>123123</div> <div>234234</div> <script type="text/javascript"> var boxes = document.getElementsByTagName('div'); console.log(boxes); </script> </body> </html>getElementsByClassName
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> .box{ color: green; } </style> </head> <body> <input type="text" name="username"/> <div class="box" name="box">1234</div> <script type="text/javascript"> var boxes = document.getElementsByClassName('box'); boxes.style.color = 'red'; //IE8及以下浏览器不支持 </script> </body> </html>getElementsByName
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> </head> <body> <input type="text" name="username"/> <div name="box"></div> <script type="text/javascript"> var input = document.getElementsByName('box'); console.log(input); </script> </body> </html>