通过 id 查找 HTML 元素

  • jQuery
    • $(“#id03”) ```xml <!DOCTYPE html>

通过 id 查找 HTML 元素

Hello World!

Hello China!

Hello Shanghai!

  2. - JavaScript
  3.    - document.getElementById("id03");<br />
  4. ```xml
  5. <!DOCTYPE html>
  6. <html>
  7. <body>
  9. <h1>通过 id 查找 HTML 元素</h1>
  11. <p id="id01">Hello World!</p>
  12. <p id="id02">Hello China!</p>
  13. <p id="id03">Hello Shanghai!</p>
  15. <p id="demo"></p>
  17. <script>
  18. var myElement = document.getElementById("id03");
  19. document.getElementById("demo").innerHTML = "段落 id03 的文本是：" + myElement.innerHTML;
  20. </script>
  22. </body>
  23. </html>

通过标签名查找 HTML 元素

  • jQuery
    • $(“p”) ```xml <!DOCTYPE html>

通过标签名查找 HTML 元素

Hello World!

Hello China!

Hello Shanghai!

  2. - JavaScript
  3.    - document.getElementsByTagName("p");
  4. ```xml
  5. <!DOCTYPE html>
  6. <html>
  7. <body>
  9. <h1>通过标签名查找 HTML 元素</h1>
  11. <p>Hello World!</p>
  12. <p>Hello China!</p>
  13. <p>Hello Shanghai!</p>
  15. <p id="demo"></p>
  17. <script>
  18. var myElements = document.getElementsByTagName("p");
  19. document.getElementById("demo").innerHTML = "第三段中的文本是：" + myElements[2].innerHTML;
  20. </script>
  22. </body>
  23. </html>

通过类名查找 HTML 元素

  • jQuery
    • $(“.intro”) ```xml <!DOCTYPE html>

通过类名查找 HTML 元素

Hello World!

Hello China!

Hello Shanghai!

  2. - JavaScript
  3.    -  document.getElementsByClassName("intro");
  4. ```xml
  5. <!DOCTYPE html>
  6. <html>
  7. <body>
  9. <h1>Finding HTML Elements by Class Name</h1>
  11. <p class="intro">Hello World!</p>
  12. <p class="intro">Hello China!</p>
  13. <p class="intro">Hello Shanghai!</p>
  15. <p id="demo"></p>
  17. <script>
  18. var myElements = document.getElementsByClassName("intro");
  19. document.getElementById("demo").innerHTML = "类名为 intro 的第三段文本是：" + myElements[2].innerHTML;
  20. </script>
  22. </body>
  23. </html>

通过 CSS 选择器查找 HTML 元素

  • jQuery
    • $(“p.intro”); ```xml <!DOCTYPE html>

通过 Query 选择器查找 HTML 元素

Hello World!

Hello China!

Hello Shanghai!

  2. - JavaScript
  3.    - document.querySelectorAll("p.intro");
  4. ```xml
  5. <!DOCTYPE html>
  6. <html>
  7. <body>
  9. <h1>Finding HTML Elements by Query Selector</h1>
  11. <p class="intro">Hello World!</p>
  12. <p class="intro">Hello China!</p>
  13. <p class="intro">Hello Shanghai!</p>
  15. <p id="demo"></p>
  17. <script>
  18. var myElements = document.querySelectorAll("p.intro");
  19. document.getElementById("demo").innerHTML = "类名为 intro 的第三段文本是：" + myElements[0].innerHTML;
  20. </script>
  22. </body>
  23. </html>

设置文本内容

  • jQuery ```xml <!DOCTYPE html>

设置文本内容

Hello China!

Hello Shanghai!

  2. - JavaScript
  3. ```xml
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>设置文本内容</h1>
  10. <h2 id="01">Hello China!</h2>
  11. <h2 id="02">Hello World!</h2>
  13. <script>
  14. var myElement = document.getElementById("02");
  15. myElement.textContent = "Hello Shanghai!";
  16. </script>
  18. </body>
  19. </html>

获取文本内容

  • jQuery ```html <!DOCTYPE html>

获取文本内容

Hello World!

Hello China!

Hello Shanghai!

  2. - JavaScript
  3. ```xml
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>获取文本内容</h1>
  10. <h2 id="01">Hello World!</h2>
  11. <h2 id="02">Hello China!</h2>
  12. <h2 id="03">Hello Shanghai!</h2>
  14. <p id="demo"></p>
  16. <script>
  17. var myElement = document.getElementById("03");
  18. var myText = myElement.textContent || myElement.innerText;
  19. document.getElementById("demo").innerHTML = myText; 
  20. </script>
  22. </body>
  23. </html>

设置 HTML 内容

  • jQuery ```xml <!DOCTYPE html>

设置 HTML

Hello China!

Hello World!

  2. - JavaScript
  3. ```xml
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>设置 HTML</h1>
  10. <div id="01">
  11.   <h2>Hello China!</h2>
  12. </div>
  13. <div id="02">
  14.   <h2>Hello World!</h2>
  15. </div>
  17. <p id="demo"></p>
  19. <script>
  20. var myElement = document.getElementById("02");
  21. myElement.innerHTML = "<h2>Hello Shanghai!</h2>";
  22. </script>
  24. </body>
  25. </html>

获取 HTML 内容

  • jQuery ```xml <!DOCTYPE html>

设置 HTML

Hello China!

Hello World!

  2. - JavaScript
  3. ```xml
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>设置 HTML</h1>
  10. <div id="01">
  11.   <h2>Hello China!</h2>
  12. </div>
  13. <div id="02">
  14.   <h2>Hello World!</h2>
  15. </div>
  17. <script>
  18. var content = document.getElementById("01").innerHTML;
  19. document.getElementById("02").innerHTML = content;
  20. </script>
  22. </body>
  23. </html>

隐藏 HTML 元素

  • jQuery ```html <!DOCTYPE html>

隐藏 HTML 元素

Hello World!

Hello China!

Hello Shanghai!

  2. - JavaScript
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>隐藏 HTML 元素</h1>
  10. <h2 id="01">Hello World!</h2>
  11. <h2 id="02">Hello China!</h2>
  12. <h2 id="03">Hello Shanghai!</h2>
  14. <script>
  15. document.getElementById("02").style.display = "none";
  16. </script>
  18. </body>
  19. </html>

显示 HTML 元素

  • jQuery ```html <!DOCTYPE html>

显示 HTML 元素

  2. - JavaScript
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>显示 HTML 元素</h1>
  10. <h2 id="01" style="display:none">Hello World!</h2>
  11. <h2 id="02" style="display:none">Hello China!</h2>
  12. <h2 id="03" style="display:none">Hello Shanghai!</h2>
  14. <script>
  15. var myElement = document.getElementById("02");
  16. myElement.style.display = "";
  17. </script>
  19. </body>

样式化 HTML 元素

  • jQuery ```html <!DOCTYPE html>

JavaScript 能够修改 HTML 元素的样式。

  2. - JavaScript
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <p id="demo">JavaScript 能够修改 HTML 元素的样式。</p>
  10. <script>
  11. var myElement = document.getElementById("demo");
  12. myElement.style.fontSize = "35px";
  13. </script>
  15. </body>
  16. </html>

删除元素

  • jQuery ```html <!DOCTYPE html>

删除 HTML 元素

Hello World!

Hello China!

  2. - JavaScript
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>删除 HTML 元素</h1>
  10. <h2 id="id01">Hello World!</h2>
  11. <h2 id="id02">Hello China!</h2>
  13. <script>
  14. var element = document.getElementById("id01");
  15. element.parentNode.removeChild(element);
  16. </script>
  18. </body>
  19. </html>

获取父元素

  • jQuery ```html <!DOCTYPE html>

获取父级 HTML 元素

Hello World!

Hello China!

Hello Shanghai!

  2. - JavaScript
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <body>
  8. <h1>获取父级 HTML 元素</h1>
  10. <h2 id="01">Hello World!</h2>
  11. <h2 id="02">Hello China!</h2>
  12. <h2 id="03">Hello Shanghai!</h2>
  14. <p id="demo"></p>
  16. <script>
  17. var myParent = document.getElementById("02").parentNode;
  18. document.getElementById("demo").innerHTML = myParent.nodeName;
  19. </script>
  21. </body>
  22. </html>