-
document.getElementById（‘ID名’）返回這個id名的元素
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>示例</title> <style> #tim{ width: 200px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div id="tim"></div> <script> document.getElementById('tim').style.background="red"; </script> </body> </html>
-
-
document.getElementsByTagName(‘標籤名’)返回所有這個標籤名的元素的集合
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>示例</title> <style> #tim{ width: 200px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div id="tim"></div> <script> //返回所有這個標籤名的元素的集合 獲取到的是一個集合 ,擁有數組的特性 document.getElementsByTagName('div')[0].style.background='blue'; </script> </body> </html>
-
-
document.getElementsByClassName(‘class名’)返回所有這個class的元素的集合
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>示例</title> <style> #tim{ width: 200px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div id="tim" class="xiaow"></div> <script> //返回所有這個標籤名的元素的集合 獲取到的是一個集合 ,擁有數組的特性 document.getElementsByClassName('xiaow')[0].style.background='yellow' </script> </body> </html>
-
-
document.querySelector(“css任意選擇器”)返回第一個
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>示例</title> <style> #tim{ width: 200px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div id="tim" class="xiaow"></div> <script> document.querySelector("#tim").style.background='black' </script> </body> </html>
-
-
document.querySelectorAll（“css任意選擇器”）返回符合的所有
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>示例</title> <style> #tim{ width: 200px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div id="tim" class="xiaow"></div> <script> document.querySelectorAll('div')[0].style.background='red' </script> </body> </html>
-
-
document.documentElement獲取HTML元素
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>示例</title> <style> #tim{ width: 200px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div id="tim" class="xiaow"></div> <script> document.documentElement.style.background='yellow' </script> </body> </html>
-
-
document.body獲取body元素
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>示例</title> <style> #tim{ width: 200px; height: 200px; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div id="tim" class="xiaow"></div> <script> document.body.style.background='red' </script> </body> </html>
-
JavaScript之獲取標籤
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章