Javascript 获取标签元素

Javascript 获取标签有几个方法，无非就是几个方法：

①id ：Id

②标签：Tag

③类：Class

④任意选择器的第一个： Selector

⑤全部：All

⑥整个文档: document

⑦主体：body

由此可以列出方法表格：

方法	说明	返回类型
document.getElementById('id')	通过id(Id)获取	单个对象
document.getElementsByTagName('div')	通过标签名(TagName)获取	返回所有这个标签名的元素的数组
document.getElementsByClassName('class')	通过类名(ClassName)获取	返回所有这个类名元素的数组
document.querySelector("css任意选择器")	通过任意选择器获取，返回第一个	单个对象
document.querySelectorAll("css任意选择器")	返回符合的所有	数组
document.documentElement	获取整个文档(document)元素	单个对象
document.body	获取主体(body)元素	单个对象

值得注意的是，不同的方法返回的有的是单个对象，有的是数组，关键在于这个方法是否唯一，例如id、document和body都是唯一的，而tag、class和all都是属于多数。当使用集合时，需要注意数组的特性。下面利用代码举例实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#byId {width: 200px;height: 200px;border: 1px solid #000;margin: 0 auto;}</style>
</head>
<body><div id="byId" class="byClass"></div><script>// id:Id  标签:Tag  类:Class 任意选择器第一个:Selector 全部:All// 返回id名的元素document.getElementById('byId').style.background='red'// 返回所有这个标签名的元素的集合 获取到的是一个集合，拥有数组的特性document.getElementsByTagName('div')[0].style.background='black'// 通过classname获取到的也是一个集合document.getElementsByClassName('byClass')[0].style.background='yellow'// document.querySelector("css任意选择器") 返回第一个,不是集合document.querySelector("#byId").style.background='black'document.querySelector(".byClass").style.background='black'document.querySelector("div").style.background='black'// document.querySelectorAll("css任意选择器") 返回符合的所有document.querySelectorAll("div")[0].style.background='red'// 获取整个文档元素document.documentElement.style.background='skyblue'//获取body元素document.body.style.background='green'</script>
</body>
</html>

实现效果如下：

Javascript 获取标签元素相关推荐

JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式文章目录 JS DOM获取标签/元素style样式 .style getComputedStyle() .style 只能获取行内样式,不能获取style标签 ...
JavaScript 获取一元素的所有子元素
JavaScript 获取一元素的所有子元素现有一表格,代码如下: < table border =1 cellpadding =0 cellspacing =0 width =300 ...
html form提交前md5,javascript实现MD5加密-JavaScript获取HTML元素的三种方...-兼容IE与firefox的js回车提交表单_169IT.COM...
本文介绍JavaScript获取网页中HTML元素的三种方法,供大家学习参考. 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义 ...
通过哪些方法可以获取页面的html元素,JavaScript获取页面元素的常用方法详解
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小首先,要明确两个基本概念. 一张网页的 ...
前端小技巧：javascript 获取标签中的属性对指定标签中的属性进行操作
javascript 标签中指定属性值的更改与获取适用于基本标签 <input><i><a>等基本标签引用jQuery,两种方式使用下面的input标签为例子 ...
JavaScript获取页面元素
1.通过 ID 获取元素 document.getElementById() <body><div id = "time">1999-12-29</d ...
html页面查找父节点,Javascript获取父元素parent
在javascript中,可以使用parent()方法来获取指定元素的父元素.parent()方法返回被选元素的直接父元素.使用parent()方法需要调用JavaScript的jQuery框架. 语 ...
html中js隐藏div的高度,javascript获取隐藏元素(display:none)的高度和宽度的方法
js获取隐藏元素的尺寸这是test容器,可见容器这是test容器,可见容器这是test容器,可见容器这是test容器,可见容器这是test容器, 这是test容器, 这是test容器, 这是 ...

Javascript 获取标签元素

Javascript 获取标签元素相关推荐

最新文章

热门文章