• JavaScript如何查找和访问HTML页面中的HTML元素

    JavaScript如何查找和访问HTML页面中的HTML元素

    HTML语言中，全部是由标签（标记、tag）组成的。在浏览器内部解析HTML标记时，会转换为成具有特定结构的HTML文档对象模型，这个对象模型简称为DOM（Document Object Model）。

    【document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。事实上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，然后我们就可以通过document对象来操作页面中所有的元素了。
    window对象是浏览器为每个窗口创建的一个对象。通过window对象，我们可以操作窗口如打开窗口、关闭窗口、浏览器版本等，这些又被统称为“BOM（浏览器对象模型）”。
    HTML DOM 是 HTML 的标准对象模型（object model）和编程接口（programming interface）。它定义了：
    作为对象（objects）的 HTML 元素（elements）
    所有 HTML 元素的属性（properties）
    访问所有 HTML 元素的方法（methods）
    所有 HTML 元素的事件（events）
    】

    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 DOM被结构化为对象树。JavaScript可以访问和更改HTML文档的所有元素。本文将介绍如何做到。

    具体一点说，通过JavaScript代码，可以完成如下操作：

    可以修改全部的HTML元素。

    可对HTML元素的属性值进行修改。

    可以修改HTML元素中的CSS样式，从而可以改变整个页面的样式风格。

    可以让页面上的按钮产生事件，这样按钮就变的具有生动性，单击按钮可以做出反应。

    这些操作的前提是要查找到操作的HTML元素，为了达成此目的，您需要首先找到这些元素。对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了，才能对其进行相应的操作。完成此任务的可以使用document对象（Object）的方法（method）：

    getElementById()方法可返回对拥有指定 ID名的元素。

    getElementsByClassName()方法返回文档中具有指定类名的所有元素的集合。【提示，请注意方法中“element”和“elements”是有区别的，后面没有“s”获取的仅仅是一个元素，后面有“s”获取的是多个元素（即集合），如果我们想得到某一个元素，也是使用数组下标的形式获取；而如getElementById()获取的是一个元素】

    getElementsByName()方法返回文档中具有指定名称（name 属性的值）的所有元素的集合。

    getElementsByTagName()方法返回文档中具有指定标记名的所有元素的集合。

    querySelector()方法返回与文档中指定的CSS选择器匹配的第一个元素。

    document.querySelectorAll()方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

    【可在HTML DOM Document 对象

    Document - Web API 接口参考 | MDN

    网页中，搜索方法的名字找到相关介绍的链接】

    document.getElementById("id名")

    在JavaScript中，如果想通过id来选中元素，我们可以使用getElementById()来实现。

    通过ID名查找HTML元素的例子，源码如下：

    1. html> 
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <meta name="viewport" content="width=device-width" /> 
    6.     <title>通过ID名查找HTML元素title>
    7. head>
    8. <body>
    9. <p id="pid">JavaScript通过ID名查找HTML元素p>
    10. <script>
    11.     var oB = document.getElementById("pid");
    12.     oB.style.color = "red";
    13. script> 
    14. body>
    15. html>

    保存文件名为：通过ID名查找HTML元素例.html，用浏览器打开测试效果如下：

    通过ID名找到HTML元素修改的例子，源码如下：

    1. html> 
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <meta name="viewport" content="width=device-width" /> 
    6.     <title>通过ID名修改HTML元素title>
    7. <script>
    8.    function fun(){
    9.      var oB = document.getElementById("pid");
    10.      oB.innerHTML="这是新文本"
    11.    }
    12. script>
    13. head>
    14. <body>
    15. <p id="pid">原来文本p>
    16. <input  id="button" type="button" value="点击" onclick="fun();">  
    17. body>
    18. html>

    保存文件名为：通过ID名查找HTML元素例.html，用浏览器打开测试效果如下：

    document. getElementsByClassName("类名")

    在JavaScript中，如果想通过class来选中元素，我们可以使用getElementsByClassName()方法来实现。

    通过类名查找HTML元素的示例，源码如下：

     

    1. html> 
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <meta name="viewport" content="width=device-width" /> 
    6.     <title>通过类名查找HTML元素title>
    7. head>
    8. <body>
    9.    <p class="select">HTMLp>
    10.    <p class="select">CSSp>
    11.    <p class="select">JavaScriptp>
    12.    <p class="select">jQueryp>
    13. <script>
    14.     var oB =  document.getElementsByClassName("select");
    15.     oB[2].style.color = "red";
    16. script> 
    17. body>
    18. html>

    保存文件名为：通过类名查找HTML元素例1.html，用浏览器打开测试效果如下：

    通过类名查找HTML元素的示例改进版，使用了

      、
    • 标签，源码如下：

       

      1. html> 
      2. <html lang="zh">
      3. <head>
      4.     <meta charset="utf-8" />
      5.     <meta name="viewport" content="width=device-width" /> 
      6.     <title>通过类名查找HTML元素title>
      7. head>
      8. <body>
      9. <ul>
      10.         <li class="select">HTMLli>
      11.         <li class="select">CSSli>
      12.         <li class="select">JavaScriptli>
      13.         <li class="select">jQueryli>
      14. ul>
      15. <script>
      16.     var oB =  document.getElementsByClassName("select");
      17.     oB[2].style.color = "red";
      18. script> 
      19. body>
      20. html>

       

      保存文件名为：通过类名查找HTML元素例2.html，用浏览器打开测试效果如下：

      document. getElementsByTagName("标签名")

      在JavaScript中，如果想通过标签名来选中元素，我们可以使用getElementsByTagName()方法来实现。

      通过标签名来查找元素的例子，源码如下：

       

      1. html> 
      2. <html lang="zh">
      3. <head>
      4.     <meta charset="utf-8" />
      5.     <meta name="viewport" content="width=device-width" /> 
      6.     <title>通过标签名查找HTML元素title>
      7. head>
      8. <body>
      9.    <p>HTMLp>
      10.    <p>CSSp>
      11.    <p>JavaScriptp>
      12.    <p>jQueryp>
      13. <script>
      14.     var oB = document.getElementsByTagName("p");
      15.     oB[2].style.color = "red";
      16. script> 
      17. body>
      18. html>

      保存文件名为：通过标签名查找HTML元素例.html，用浏览器打开测试效果如下：

      document.querySelector("选择器")和document.querySelectorAll("选择器")

      querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。

      通过css选择器查找HTML元素的例子，源码如下：

      1. html> 
      2. <html lang="zh">
      3. <head>
      4.     <meta charset="utf-8" />
      5.     <meta name="viewport" content="width=device-width" /> 
      6.     <title>通过css选择器查找HTML元素title>
      7. head>
      8. <body>
      9.    <p>HTMLp>
      10.    <p>CSSp>
      11.    <p>JavaScriptp>
      12.    <p>jQueryp>
      13.    <button onclick="myFun1()">HTML变红button>
      14.    <button onclick="myFun2()">JavaScript变蓝button>
      15. <script>
      16.     function myFun1() {
      17.        var oB = document.querySelector("p");
      18.        oB.style.color = "red";
      19.     }
      20.     function myFun2() {
      21.        var oB = document.querySelectorAll("p");
      22.        oB[2].style.color = "blue";
      23.     }
      24.  
      25. script> 
      26. body>
      27. html>

       保存文件名为：通过css选择器查找HTML元素例html，用浏览器打开测试效果如下：

      你可以单击网页上的按钮试试看。

       


       

  • 相关阅读:
    好奇心驱使下试验了 chatGPT 的 js 代码的能力
    Postman工具简介
    CentOS Integration SIG 正式成立
    插入排序算法的速度测试 [数据结构][Java]
    有了Composition API后，有些场景或许你不需要pinia了
    Sass 最基础的语法
    计算机毕业设计Java宠物互助领售平台(源码+系统+mysql数据库+lw文档)
    微服务框架 SpringCloud微服务架构 11 自定义镜像 11.2 Dockerfile
    数据包远程传输的抓包系统scratch
    ETL是什么
  • 原文地址：https://blog.csdn.net/cnds123/article/details/126919211