javascript html 前端 Document 对象常用方法(getElementById、getElementsByName、getElementsByTagName....)

Document 对象常用六种方法：

方法描述getElementById()返回对拥有指定id的第一个对象的引用getElementsByName()返回带有指定名称的对象集合getElementsByClassName()返回文档中所有指定类名的元素集合，作为NodeList对象getElementsByTagName()返回带有指定标签名的对象集合querySelector()返回文档中匹配指定的CSS选择器的第一元素querySelectorAll()document.querySelectorAll()是HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

1.getElementByID()

document.getElementById("demo");

 定义和用法：

如果没有指定ID的元素则返回第一个；如果存在多个指定的ID的元素则返回第一个；如果需要查找到那些没有ID的元素，可以通过CSS选择器使用querySelector()

2.getElementByName()

 document.getElementsByName(name)

 定义和用法：

该方法与geteElementById()方法相似，但是它查询元素的name属性，而不是id属性所有getElementByName()方法返回的是元素的数组，而不是一个元素

 3.getElementByClassName()

  document.getElementsByClassName(classname);

  定义和用法：

NodeList 对象,表示指定类名的元素集合，元素在集合中的顺序以其在代码中出现次序排序多个类名使用空格分隔，如"test demo"

*你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

实例

查看

元素中有多少个 class="child" 的元素 (使用 NodeList 的 length 属性):

 var x = document.getElementById("myDIV").getElementsByClassName("child").length;

 x 输出结果为:

3 

 4.getElementsByTagName()

document.getElementdByTagName("p");

 定义和用法：

参数值" "返回文档的所有元素传递给 getElementsByTagName() 方法的字符串可以不区分大小写

例：   document.getElementsByTagName("input")

 5.querySelector()

document.querySelector(CSS selectors)

 定义和用法：

querySelector()方法仅仅返回匹配指定选择器的第一个元素多个选择器，使用逗号隔开，返回一个匹配的元素

实例：

假定你选择了两个选择器:

和

元素。

以下代码将为文档的第一个

元素添加背景颜色：

A h2 element

A h3 element

document.querySelector("h2, h3").style.backgroundColor = "red";

 6.querySelectorAll()

elementList = document.querySelectAll(selectors);

 定义和用法：

querySelectorAll()方法返回文档中匹配指定CSS选择器的所有元素，返回NodeList对象NodeList对象表示节点的集合。可以通过索引访问，索引值从0开始elementList是一个静态的NodeList类型的对象selectors是一个由逗号连接的包含一个或多个CSS选择器的字符串

参考文章：

HTML DOM Document 对象 | 菜鸟教程

相关文章

评论可见，请评论后查看内容，谢谢！！！

 您阅读本篇文章共花了：