获取DOM节点的一些常用的Document对象方法

最新推荐文章于 2025-05-26 15:54:59 发布

原创最新推荐文章于 2025-05-26 15:54:59 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

76 篇文章

订阅专栏

本文详细介绍了如何使用Document对象方法，如querySelector(), querySelectorAll(), getElementsByClassName()等，进行DOM节点的选取与操作，涵盖样式修改、事件处理等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

取得DOM节点的一些Document对象方法：

querySelector()
querySelectorAll()
getElementById()
getElementsByClassName()
getElementsByTagName()

querySelector：接收一个CSS选择符，返回与盖模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

//取得body元素
var body = document.querySelector("body");

//取得ID为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");

//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");

//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");

例如：

Google主页log

<img alt="Google" height="92" id="hplogo" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" srcset="/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png 1x, /images/branding/googlelogo/2x/googlelogo_color_272x92dp.png 2x" style="padding-top:109px" width="272" onload="typeof google==='object'&amp;&amp;google.aft&amp;&amp;google.aft(this)" data-iml="1566180347231" data-atf="1">

通过Element类型调用querySelect()方法时，只会在该元素后代元素的范围内查找匹配的元素。如，下面的例子，只会在body中查找

var logo = document.body.querySelector("#hplogo");

logo

<img alt="Google" height="92" id="hplogo" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" srcset="/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png 1x, /images/branding/googlelogo/2x/googlelogo_color_272x92dp.png 2x" style="padding-top:109px" width="272" onload="typeof google==='object'&&google.aft&&google.aft(this)" data-iml="1566180347231" data-atf="1">

通过Document类型调用querySelector方法时，会在文档元素的范围查找匹配的元素。

querySelectorAll()：这个方法返回的所有匹配的元素，是一个NodeList的实例。具体来说，返回的值实际上是带有所有属性和方法的NodeList，接收的参数跟querySelectorAll()方法一样，传入有效的CSS选择符，都会返回一个NodeList对象、如果没有找到匹配的元素，NodeList就是空。

//取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");

//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");

//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

例子（还是谷歌搜索log）

var imgNodeList = document.querySelectorAll("img");
imgNodeList //NodeList [img#hplogo]

getElementById():接收一个参数，代表元素ID属性值，返回对拥有指定ID的第一个对象的引用。

//html
<p id="demo"></p>
//js
document.getElementById("demo").innerHTML="Hello World"; // 会把p标签的文本内容替换成Hello World

getElementsByClassName()：接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，先后顺序不重要。

//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

//取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

document.getElementsByTagName()：接收一个参数，代表标签名称，返回带有指定标签名的对象的集合。

// html
<p id="demo">单击按钮来改变这一段中的文本。</p>
// js
document.getElementsByTagName("P") // HTMLCollection [p]

修改样式

document.getElementById("p2").style.color = "blue";
element.setAttribute(attributename,attributevalue) ：该方法添加指定的属性，并为其赋指定的值。
className 属性设置或返回元素的 class 属性。

<body id="myid" class="mystyle">
<script>
    var x=document.getElementsByTagName('body')[0];
	document.write(document.getElementById('myid').className + "  "); // myid
	document.getElementById('myid').className = 'demo';
	document.write(document.getElementById('myid').className); // demo
</script>

事件流
概念：描述的是从页面中接收事件的顺序。

两种事件流

IE的事件流： 事件冒泡
Netscape Communication的事件流： 事件捕获

事件冒泡： 即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）

<!DOCTYPE html>
<html>
<head>
    <title>Event Bubbling Example</title>
</head>
<body>
    <div id="myDiv">Click Me</div>
</body>
</html>

当点击了页面的div标签元素，那么事件冒泡的过程如下图过程（自下而上）：
在这里插入图片描述
所有现代浏览器都支持事件冒泡，具体实现过程还是有些差别，IE5.5及更早版本中的事件冒泡会跳过元素，直接从跳到document。

事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它，过程如下图：
在这里插入图片描述
IE9、Safari、Chrome、Opera和Firefox都支持这种事件流模型

DOM事件流：DOM2级事件规定的事件流包括三个阶段：

事件捕获阶段：为截获事件提供机会
处于目标阶段：实际的目标接收到事件
事件冒泡阶段
如下图：

事件：用户或浏览器自身执行的某种动作
事件处理程序 ：响应某个事件的函数就叫做事件处理程序（事件侦听器）
阻止特定事件的默认行为：使用preventDefault()方法，如链接的的默认行为就是在被单击之后会导航到其href特性指定的URL。如果想阻止导航这样一默认为行为，可以这样写：

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
};

停止事件在DOM层次中传播 ：可以使用stopPropagation()，即取消进一步的事件捕获或冒泡。
如下

<body>
    <button id="myBtn"> 确定 </button>
</body>
<script>
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert("Clicked");
    // event.stopPropagation();
};

document.body.onclick = function(event){
    alert("Body clicked");
};
</script>

如果不阻止冒泡事件，就会有两个弹窗弹出，使用stopPropagation()方法就能阻止事件传播到document.body。