JavaScript获取页面元素的常用方法详解


Posted in Javascript onSeptember 28, 2019

1、通过标签获取元素,返回一个数组

var li = document.getElementsByTagName('li');//标签获取元素

li[0].innerHTML;// 查看获取元素的内容

li[0].innerHTML = "content";//修改获取到标签中的内容

2、通过id获取页面元素

var header = document.getElementById("header");//id获取元素

3、通过class名字获取页面元素

var list = document.getElementsByClassName('list');//返回一个数组,通过下标访问文本

4、通过CSS选择符方式获取页面元素

//querySelector:返回符合条件的第一个

var str = document.querySelector('li');

var str1 = document.querySelectorAll('li');//全部返回,每个li都是一个对象
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>JavaScript获取页面的常用方法</title>
  <script>
      // 1、通过标签获取元素,返回一个数组
      var li = document.getElementsByTagName('li');
      
      //2、通过id获取页面元素
      var header = document.getElementById("header");

      // 3、通过class名字获取页面元素
      var list = document.getElementsByClassName('list');//返回一个数组,通过下标访问文本

      // 4、通过CSS选择符方式获取页面元素
      //querySelector:返回符合条件的第一个
      var str = document.querySelector('li');
      // querySelectorAll:返回符合条件的每一个
      var str1 = document.querySelectorAll('li');
  </script>
</head>
<body>
  <p id="header">JavaScript学习</p>
  <ul class="list">
    <li>HTML</li>
    <li>jQuery</li>
    <li>JavaScript</li>
  </ul>
  <ul class="list">
    <li>HTML</li>
    <li>jQuery</li>
    <li>JavaScript</li>
  </ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
js打造数组转json函数
Jan 14 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
解决Layui数据表格的宽高问题
Sep 28 #Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 #Javascript
layui table 列宽百分比显示的实现方法
Sep 28 #Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 #Javascript
JavaScript实现轮播图效果代码实例
Sep 28 #Javascript
json字符串对象转换代码实例
Sep 28 #Javascript
javascript头像上传代码实例
Sep 28 #Javascript
You might like
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python getopt 参数处理小示例
2009/06/09 Python
python处理PHP数组文本文件实例
2014/09/18 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python绘制随机网络图形示例
2019/11/21 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
小学开学寄语
2014/01/19 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
借款协议书范本
2014/04/22 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
大学生自荐书范文
2015/03/05 职场文书
2015年底工作总结范文
2015/05/15 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
详解python字符串驻留技术
2021/05/21 Python