js查找HTML元素

最新推荐文章于 2024-05-14 00:52:41 发布

罗会

最新推荐文章于 2024-05-14 00:52:41 发布

阅读量2.7k

点赞数 3

分类专栏：原生js 文章标签： js document对象

本文链接：https://blog.csdn.net/qq_42238554/article/details/87914693

版权

原生js 专栏收录该内容

79 篇文章 14 订阅

订阅专栏

通过id或class类名找到HTML元素

document.querySelector() 返回一个元素

返回值：文档中匹配指定 CSS 选择器的一个元素，如果有多个相同的元素名，仅返回匹配的第一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
语法：
document.querySelector(CSS selectors)
参数说明：
CSS 选择器 String 必须。指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于多个选择器，使用逗号隔开，返回一个匹配的元素。

console.log(document.querySelector("li"));
//结果为：<li>我是1</li>，获取第一个li标签;
console.log(document.querySelector("#myid"));
//结果：<li id="myid">我是2</li>，获取id为myid的元素
console.log(document.querySelector(".myclass"));
//结果：<li class="myclass">我是3</li>，获取第一个classname为myclass的元素
document.querySelector("a[target]");
//获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector(".m1,.m2");
//查找classname为m1或m2，先找到哪个就返回哪个

document.querySelectorAll()返回所有的元素

返回值：文档中匹配指定 CSS 选择器的所有元素，返回值是一个数组

返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。注：返回的是一个数组。
语法：
elementList = document.querySelectorAll(selectors);
elementList 是一个静态的 NodeList 类型的对象。
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。
参数说明：
CSS 选择器 String 必须。指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。
多个选择器使用逗号(,)分隔。
实例：

  <div>
     <p class="myp">这是第一段</p>
     <h1>这是大标题</h1>
     <p>这是概要</p>
     <p class="myp">这是第三段内容</p>
  </div>

获取所有的p标签：

document.querySelectorAll("p")

在这里插入图片描述
获取所有的p标签和h1标签：

console.log(document.querySelectorAll("p,h1"));

在这里插入图片描述
其他用法如下：

获取第一个p标签
document.querySelectorAll("p")[0];
获取页面中一共有多少个p标签
document.querySelectorAll("p").length;
改变第一个p标签的颜色
document.querySelectorAll("p")[0].style.color="#ff0000";

通过id查找HTML元素

document.getElementById()

返回值：文档中匹配指定 CSS 选择器的第一个元素

语法：
document.getElementById(“xxx”);

通过ID获取元素。
实例：

<!--HTML内容-->
  <p id="myele">你好吗?</p>
  
  <!--Script内容-->
  <script>
var a=document.getElementById("myele");
console.log(a);//得到当前元素<p id="myele">你好吗?</p>
console.log(a.innerHTML);//你好吗?可以通过innerHTML属性获取元素中的内容
</script>

查找HTML指定名称的对象的元素集合

document.getElementsByName()

返回带有指定名称的对象的集合。注：返回一个数组。
注：
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
实例，有三个input，他们的name都是myinput，可以通过getElementsByName来获取他们。

<!--HTML-->
<input type="text" name="myinput" />
<input type="text" name="myinput" />
<input type="text" name="myinput" />
<!--Script-->
<script>
var a=document.getElementsByName("myinput");
console.log(a);
</script>

上述打印结果为一个数组：
NodeList(3) [input, input, input]
如果要获取某一个可以通过下标来获取：

document.getElementsByName("myinput")[2];获取第三个input

通过标签名查找 HTML 元素

document.getElementsByTagName()

返回带有指定标签名的对象的集合。注，返回一个数组。
说明
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
注释：传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
实例，通过getElementsByTagName获取所有的li标签：

<!--HTML-->
<ul>
          <li class="myli_01">这是第一条</li>
          <li class="myli_02">这是第二条</li>
          <li class="myli_03">这是第三条</li>
      </ul>
<!--Script-->
<script>
var a=document.getElementsByTagName("li");
console.log(a);//打印结果为一个集合
console.log(a.length);//3，获取一共有多少个li
console.log(a[0]);//<li class="myli_01">这是第一条</li>，获取第一个li元素
</script>

打印结果如下：
在这里插入图片描述

通过类名找到 HTML 元素

document.getElementsByClassName()

返回文档中所有指定类名的元素集合，作为 NodeList 对象。注，返回一个数组。
实例：获取class为mm的元素。

<!--HTML-->
<p class="mm">我是p</p>
    <div class="mm">我是div</div>
    <a class="mm">我是a</a>
<!--Script-->
<script>
var a = document.getElementsByClassName("mm");
console.log(a);
</script>

在这里插入图片描述

document.createElement()

通过指定名称创建一个元素。
document.createElement(“div”);创建一个div
语法：
document.createElement(nodename)
参数说明：
nodename String 必须。创建元素的名称
返回值：
元素对象创建的元素节点
实例：

var a=document.createElement("p");
console.log(a);//<p></p>

document.createTextNode()

创建文本节点。
语法：
document.createTextNode(text)；
参数说明：
text String 必须。文本节点的文本。
HTML元素通常是由元素节点和文本节点组成。
创建一个标题 (H1), 你必须创建 “H1” 元素和文本节点:

实例1：

var h=document.createElement("H1")
var t=document.createTextNode("Hello World");
h.appendChild(t);

实例2：

var mydiv=document.createElement("p");//创建一个p标签
var a=document.createTextNode("Hello World");//创建一个文本
mydiv.appendChild(a);//把文本放入p标签中
document.body.appendChild(mydiv);//把p标签放入body中

document.images

返回对文档中所有 Image 对象引用，返回的是一个数组。
images 集合返回当前文档中所有图片的数组。
用法：

<!--html-->
<img src="//weiliicimg9.pstatp.com/weili/sm/428079399105069382.webp" name="img1">
<img src="//weiliicimg9.pstatp.com/weili/sm/428079399105069382.webp" name="img2">

<!--js-->
<script>
console.log(document.images);
console.log(document.images.length);//结果是2，获取图片的数量
console.log(document.images[0].name);//img1,获取第一张图片的name
</script>

打印结果
在这里插入图片描述

document.write()

向文档写入 HTML 表达式或 JavaScript 代码。
语法：
document.write(exp1,exp2,exp3,…)
参数说明：
exp1,exp2,exp3,… 可选。要写入的输出流。多个参数可以列出，他们将按出现的顺序被追加到文档中
实例：

document.write("Hello World");
document.write("a","b","c");
document.write("<h1>你好，世界</h1>");

控制台结果为：
在这里插入图片描述
document.writeln
等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

document.writeln("Hello World");
document.writeln("a","b","c");
document.writeln("<h1>你好，世界</h1>");

结果展示：
在这里插入图片描述

不常用

document.URL

可返回当前文档的 URL。
用法：

console.log(document.URL);
//打印结果
//file:///Users/Documents/gitee/%20HuiVueDemo/test/src/views/main.html

document.title

返回当前文档的标题（ HTML title 元素中的文本）。

console.log(document.title);//测试

document.scripts

scripts 集合返回文档中所有 < script > 元素的集合。返回的是一个数组。
它包含三个方法：
[index] 返回集合中指定索引（从 0 开始）的 < script > 元素。
注意: 如果索引值超出范围返回 null。

item(index) 返回集合中指定索引（从 0 开始）的 < script > 元素。
注意: 如果索引值超出范围返回 null。

namedItem(id) 回集合中指定 id 的 < script > 元素。
注意: 如果 id 不存在返回 null。

实例用法：

document.scripts;//获取页面中的所有脚本
document.scripts.length;//获取页面中script的个数
document.scripts[0].text;//获取文档中第一个script的内容
document.scripts.item(0).text;//获取文档中第一个script的内容
document.scripts.namedItem("myId").text;//获取 id="myId" 的 <script> 元素的内容

document.readyState

readyState 属性返回当前文档的状态（载入中……）。
该属性返回以下值:
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成
用法：
document.readyState

document.documentElement

documentElement 属性以一个元素对象返回一个文档的文档元素。
HTML 文档返回对象为HTML元素。
注意：如果 HTML 元素缺失，返回值为 null。
用法，控制台输出：
在这里插入图片描述

document.addEventListener

用于向文档添加事件句柄。提示：可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
提示：使用 element.addEventListener() 方法为指定元素添加事件句柄。
语法：
document.addEventListener(event, function, useCapture)
参数说明：
event 必需。描述事件名称的字符串。
注意：不要使用 “on” 前缀。例如，使用 “click” 来取代 “onclick”。
提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function 必需。描述了事件触发后执行的函数。
当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值：
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
实例，点击页面是id为demo的元素中间将显示内容为Hello World!：

document.addEventListener("click", myfun);
function myfun() {
    document.getElementById("demo").innerHTML = "Hello World!";
}

在文档中添加多个点击事件，当点击页面时会同时调用两个click的方法：

document.addEventListener("click", myfun1);
document.addEventListener("click", myfun2);
function myfun1() {
    document.getElementById("demo1").innerHTML = "Hello World!";
}
function myfun2() {
    document.getElementById("demo2").innerHTML = "第二段文字";
}

设置不同类型的事件：

document.addEventListener("mouseover", myfun1);
document.addEventListener("click", myfun2);
document.addEventListener("mouseout", myfun3);

当传递参数值时，使用"匿名函数"调用带参数的函数：

document.addEventListener("click", function() {
    myFunction(p1, p2);
});

修改元素的背景：

document.addEventListener("click", function(){
    document.body.style.backgroundColor = "red";
});

document.removeEventListener

移除由 document.addEventListener() 方法添加的事件句柄。
实例，移除由 addEventListener() 方法添加的 “mousemove” 事件：

// 在文档中添加事件句柄
document.addEventListener("mousemove", myFunction);
// 移除文档中的事件句柄
document.removeEventListener("mousemove", myFunction);

如果浏览器不支持 removeEventListener() 方法，你可以使用 detachEvent() 方法实现。
该实例演示了跨浏览器的解决方法：

if (document.removeEventListener) {         
// 所有浏览器，除了 IE 8 及更早IE版本
    document.removeEventListener("mousemove", myFunction);
} else if (document.detachEvent) {         
// IE 8 及更早IE版本
    document.detachEvent("onmousemove", myFunction);
}