DOM HTML 简介

image.png
image.png

DOM方法

image.png
image.png
除了getElementById（）方法，还可以使用getElementByClassName（）方法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JS学习</title>
  8. </head>
  9. <body>
  11. <p class="demo">第一段</p>
  13. <p class="demo">第二段</p>
  15. <p id="demo1"></p>
  17. <script>
  18.     var x=document.getElementsByClassName("demo")
  19.     document.getElementById("demo1").innerHTML="显示的内容："+x[0].innerHTML
  20. </script>
  21. </body>
  22. </html>

image.png
此外，还可以通过html标签名找到对应元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JS学习</title>
  8. </head>
  9. <body>
  11. <p class="demo">第一段</p>
  13. <p class="demo">第二段</p>
  15. <p id="demo1"></p>
  17. <script>
  18.     var x=document.getElementsByTagName("p")
  19.     document.getElementById("demo1").innerHTML="显示的内容："+x[1].innerHTML
  20. </script>
  21. </body>
  22. </html>

image.png
如果需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，可以使用querySelectorAll（）方法

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>按查询选择器查找 HTML 元素</h1>
  7. <p>Hello World!</p>
  9. <p class="intro">阿离可爱吗？</p>
  11. <p class="intro">阿离很 <b>可爱</b> 呀</p>
  13. <p id="demo"></p>
  15. <script>
  16. var x = document.querySelectorAll("p.intro");
  17. document.getElementById("demo").innerHTML = 
  18. 'class ="intro" 的第一段（索引 0）：' + x[1].innerHTML;
  19. </script>
  21. </body>
  22. </html>

image.png

HTMLCollection对象

HTMLCollection对象由getElementTagName()方法获取，它是是个类数组，但是它并不是真的数组，只是具有数组的一些特征，如：可以遍历里面的html元素，具有长度（length属性获取）、具有索引（从0开始）
image.png