JavaScript 获取页面元素
一、根据 id 获取元素
语法格式:
document.getElementById(elementId); 通过标签的 id 属性查找标签 dom 对象, elementId 是标签的 id 属性值
Demo:
var main = document.getElementById('main');
console.log(main); // 获取到的数据类型 HTMLDivElement,对象都是有类型的。
注意:由于id名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式,不推荐使用。如果页面上没有对应的 id,此时返回 null。
二、根据标签名获取元素
语法格式:
doucument.getElementsByTagName(tagName); 通过标签名查找标签 dom 对象。 tagname 是标签名
Demo:
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
注意:
因为一个文档里面可能有多个同名的标签,获取获取的是一个伪数组(集合),可以对其进行遍历。
获取到的集合是动态集合,即往页面再次添加元素时,会自动更新集合内元素的个数。
三、根据 name 获取元素
语法格式:
doucument.getElementsByName(elementName); 通过标签的 name 属性查找标签 dom 对象, elementName 标签的 name 属性值
Demo:
var inputs = document.getElementsByName('hobby'); // 获取的是一个伪数组
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
注意:此方法存储浏览器的兼容性,IE9+ 以后才支持。
四、根据类名获取元素
语法格式:
document.getElementsByClassName(className); 通过标签的 class 属性查找 dom 对象
Demo:
var mains = document.getElementsByClassName('main'); // 获取的是一个伪数组
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
五、根据选择器获取元素
1、querySelector()
语法格式:
querySelector(选择器名);
注意:使用该方法只会返回第一个匹配的元素。
Demo:
var element = document.querySelectorAll('.a');
console.log(element)
2、querySelectorAll()
语法格式:
querySelectorAll(选择器名);
注意:使用此方法可以返回所有匹配到的元素
Demo:
var elements = document.querySelectorAll('.a');
consoloe.log(elements);
注意:这两个方法都是根据选择器来获取元素,存在浏览器兼容问题,IE8 以后才执行
JavaScript 获取页面元素的更多相关文章
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- Javascript获取页面元素相对和绝对位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- JavaScript获取页面元素方法
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- 用getBoundingClientRect()来获取页面元素的位置
以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0;do{_x += el.offsetLeft;_y ...
- js中获取页面元素节点的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- CentOS7.5 上使用 bundle 文件安装 MySQL8.0 MySQL5.0
CentOS7.5 上使用 bundle 文件安装 MySQL8.0 MySQL5.0 CentOS7.5 环境 [root@instance-fjii60o3 ~]# rpm -qi centos- ...
- 补充:垃圾回收机制、线程池和ORM缺点
补充:垃圾回收机制.线程池和ORM缺点 垃圾回收机制不仅有引用计数,还有标记清除和分代回收 引用计数就是内存地址的门牌号,为0时就会回收掉,但是会出现循环引用问题,这种情况下会导致内存泄漏(即不会被用 ...
- element-ui级联选择器(Cascader)获取级联对象 (主要是想获取:label值)
最近使用element-ui 的Casecader 级联对象时,后台要求将对象的label值也传过去,然而,element-ui 官方并没有提供这样方(keng)便 ( die ) 的方法. 一时间直 ...
- 【java异常】Parsing error was found in mapping #{}. Check syntax #{property|(expression), var1=value1, var2=val
在增删改查的过程中有一个#{ }没有填写
- linux command lynx
[Purpose] Learning linux command lynx [Eevironment] Ubuntu 16.04 terminal apt-get ...
- 【luoguP1382】楼房
题目描述 离散化,线段树维护区间修改,发现询问都是单点的\(max\),不妨把标记留在点上,不用下传,查询时取个\(max\)就可以了 #include<algorithm> #inclu ...
- 紧随时代的步伐--Java8之Lambda表达式的使用
1.前言 在计算机行业,每天都会有新的技术诞生,每天都会有上百种的技术更新升级.追随时代的步伐,终生学习,才能不被社会的浪潮淘汰. 2.关于Lambda表达式 Lambda表达式是Java8新特性之一 ...
- Docker底层基石namespace与cgroup
Docker底层基石namespace与cgroup 容器本质上是把系统中为同一个业务目标服务的相关进程合成一组,放在一个叫做namespace的空间中,同一个namespace中的进程能够互相通 ...
- Python下的XML-RPC客户端和服务端实现(基于xmlrpclib SimpleXMLRPCServer 模块)
RPC是Remote Procedure Call的缩写,翻译成中文就是远程方法调用,是一种在本地的机器上调用远端机器上的一个过程(方法)的技术,这个过程也被大家称为“分布式计算”,是为了提高各个分立 ...
- Vim 入门教程
Vim 入门教程 转载请保留以上信息 Vim 的教程相对比较零散,系统的教程比较少,我也阅读过不少教程,走过很 多弯路.借着 Vim-china 组织组建这一契机,整理下自己学习过的内容, 分享给大家 ...