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 While 循环基础教程
Apr 05 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
微信小程序商品详情页底部弹出框
Nov 22 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
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
python获取标准北京时间的方法
2015/03/24 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
应届生法律求职信
2013/10/22 职场文书
认错检讨书
2014/10/02 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
社区端午节活动总结
2015/02/11 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
社区服务活动感想
2015/08/11 职场文书
放飞理想主题班会
2015/08/14 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
MySQL 字符集 character
2022/05/04 MySQL
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python