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

最新推荐文章于 2024-07-26 12:18:49 发布

学习&实践爱好者

最新推荐文章于 2024-07-26 12:18:49 发布

阅读量3.6k

点赞数 2

分类专栏： HTML5与CSS3 前端开发文章标签： javascript html5

本文链接：https://blog.csdn.net/cnds123/article/details/126919211

版权

HTML5与CSS3 同时被 2 个专栏收录

83 篇文章 15 订阅

订阅专栏

前端开发

70 篇文章 4 订阅

订阅专栏

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元素的例子，源码如下：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>通过ID名查找HTML元素</title>
</head>
<body>
<p id="pid">JavaScript通过ID名查找HTML元素</p>
<script>
    var oB = document.getElementById("pid");
    oB.style.color = "red";
</script> 
</body>
</html>

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

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

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>通过ID名修改HTML元素</title>
<script>
   function fun(){
     var oB = document.getElementById("pid");
     oB.innerHTML="这是新文本"
   }
</script>
</head>
<body>
<p id="pid">原来文本</p>
<input  id="button" type="button" value="点击" onclick="fun();">  
</body>
</html>

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

document. getElementsByClassName("类名")

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

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

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>通过类名查找HTML元素</title>
</head>
<body>
   <p class="select">HTML</p>
   <p class="select">CSS</p>
   <p class="select">JavaScript</p>
   <p class="select">jQuery</p>
<script>
    var oB =  document.getElementsByClassName("select");
    oB[2].style.color = "red";
</script> 
</body>
</html>

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

通过类名查找HTML元素的示例改进版，使用了<ul>、<li>标签，源码如下：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>通过类名查找HTML元素</title>
</head>
<body>
<ul>
        <li class="select">HTML</li>
        <li class="select">CSS</li>
        <li class="select">JavaScript</li>
        <li class="select">jQuery</li>
</ul>
<script>
    var oB =  document.getElementsByClassName("select");
    oB[2].style.color = "red";
</script> 
</body>
</html>

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

document. getElementsByTagName("标签名")

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

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

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>通过标签名查找HTML元素</title>
</head>
<body>
   <p>HTML</p>
   <p>CSS</p>
   <p>JavaScript</p>
   <p>jQuery</p>
<script>
    var oB = document.getElementsByTagName("p");
    oB[2].style.color = "red";
</script> 
</body>
</html>

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

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

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

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

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>通过css选择器查找HTML元素</title>
</head>
<body>
   <p>HTML</p>
   <p>CSS</p>
   <p>JavaScript</p>
   <p>jQuery</p>
   <button onclick="myFun1()">HTML变红</button>
   <button onclick="myFun2()">JavaScript变蓝</button>
<script>
    function myFun1() {
       var oB = document.querySelector("p");
       oB.style.color = "red";
    }
    function myFun2() {
       var oB = document.querySelectorAll("p");
       oB[2].style.color = "blue";
    }

</script> 
</body>
</html>

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