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 新浪背投广告实现代码
Jul 07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
vue中使用protobuf的过程记录
Oct 26 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP5常用函数列表(分享)
2013/06/07 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python编程线性回归代码示例
2017/12/07 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
学风建设演讲稿
2014/09/12 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
股权转让协议范本
2014/12/07 职场文书
《日月潭》教学反思
2016/02/20 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
pytorch 如何使用float64训练
2021/05/24 Python