文档章节

JavaScript 获取页面元素

o
 osc_ogi0qclx
发布于 2019/08/25 08:44
字数 530
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、根据 id 获取元素

  语法格式:

document.getElementById(elementId); 通过标签的 id 属性查找标签 dom 对象, elementId 是标签的 id 属性值 

  Demo:

1 var main = document.getElementById('main');
2 console.log(main);                // 获取到的数据类型 HTMLDivElement,对象都是有类型的。

  注意:由于id名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式,不推荐使用。如果页面上没有对应的 id,此时返回 null。

二、根据标签名获取元素

  语法格式:

doucument.getElementsByTagName(tagName);      通过标签名查找标签 dom 对象。 tagname 是标签名 

  Demo: 

1 var divs = document.getElementsByTagName('div');
2 for (var i = 0; i < divs.length; i++) {
3   var div = divs[i];
4   console.log(div);
5 }

   注意

    因为一个文档里面可能有多个同名的标签,获取获取的是一个伪数组(集合),可以对其进行遍历。

    获取到的集合是动态集合,即往页面再次添加元素时,会自动更新集合内元素的个数。

三、根据 name 获取元素

  语法格式:

doucument.getElementsByName(elementName);   通过标签的 name 属性查找标签 dom 对象, elementName 标签的 name 属性值 

  Demo:

1 var inputs = document.getElementsByName('hobby');      // 获取的是一个伪数组
2 for (var i = 0; i < inputs.length; i++) {
3   var input = inputs[i];
4   console.log(input);
5 }

  注意:此方法存储浏览器的兼容性,IE9+ 以后才支持。

四、根据类名获取元素

  语法格式:

document.getElementsByClassName(className);   通过标签的 class 属性查找 dom 对象

  Demo:

1 var mains = document.getElementsByClassName('main');    // 获取的是一个伪数组
2 for (var i = 0; i < mains.length; i++) {
3   var main = mains[i];
4   console.log(main);
5 }

五、根据选择器获取元素

  1、querySelector()

    语法格式:

querySelector(选择器名);

    注意:使用该方法只会返回第一个匹配的元素。

  Demo:

1 var element = document.querySelectorAll('.a');
2 console.log(element)

  2、querySelectorAll()

    语法格式:

querySelectorAll(选择器名);

    注意:使用此方法可以返回所有匹配到的元素

   Demo:

1 var elements = document.querySelectorAll('.a');
2 consoloe.log(elements);

  注意:这两个方法都是根据选择器来获取元素,存在浏览器兼容问题,IE8 以后才执行

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Web安全第四课 前段开发基础——JavaScript

前段开发基础——JavaScript DOM和BOM是JavaScript的两只手,一个控制HTML一个控制浏览器 概述 在那些地方可以运行JavaScript? 1、HTML的<script></script>之间 2、HTML的事件属性中,如onc...

hare1925
2019/02/11
15
0
前端之javascript1

js介绍和js引入页面 学习前端脚本语言javascript的基本概念、页面引入方式、获取页面元素及操作元素属性的技巧,学习函数的基本定义方法和使用方法。 JavaScript介绍 JavaScript是运行在浏览...

osc_vh89klm7
2019/05/28
2
0
07--Web前端之JavaScript

JavaScript JavaScript是运行在浏览器端的脚本语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微软...

osc_ipgs1x3t
2018/05/15
7
0
js 获取iframe页面元素

js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon <!-- chart图表 --><iframe id="myframe" src="<c:url value="/base/server/report/report.do?REPORTID=${para......

osc_wzff35x1
2018/08/16
4
0
Selenium2学习(十三)-- JS处理滚动条

前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了。 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的...

osc_jantbj0o
2018/02/24
5
0

没有更多内容

加载失败,请刷新页面

加载更多

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
今天
24
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
今天
29
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
今天
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
63
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部