1.根據元素id獲取元素節點：
document.getElementById(str)
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <div id="box">這個一個div</div> <script type="text/javascript"> var jsDiv = document.getElementById('box') console.log(jsDiv) console.log(typeof(jsDiv)) </script> </body> </html>
輸出：
2.獲取相同class屬性的元素節點列表
document.getElementsByClassName()
注意：此方法不支持IE8以下
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <div class="box1">screen</div> <div class="box2">verse</div> <div class="box2">take</div> <script type="text/javascript"> var js = document.getElementsByClassName('box2') console.log(js) console.log(typeof(js)) </script> </body> </html>
輸出：
3.根據標簽名來獲取元素節點的集合
getElementsByTagName()
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <div class="box1">screen</div> <div class="box2">verse</div> <div class="box2">take</div> <script type="text/javascript"> var js = document.getElementsByTagName('div') console.log(js) console.log(typeof(js)) </script> </body> </html>
輸出：
4.根據name屬性值來獲取元素節點的集合
document.getElementsByName('name_value')
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js_excise</title> <script src="./js/js_excise.js" type="text/javascript" charset="utf-8"></script> </head> <body style="height: 187.5rem;"> <input type="text" name="Text"> <input type="text" name="Text"> <input type="text" name="Text"> <script type="text/javascript"> var js = document.getElementsByName('Text') console.log(js) console.log(typeof(js)) </script> </body> </html>
輸出：
