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 相关文章推荐
ExtJs使用总结(非常详细)
Mar 22 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
js实现时间日期校验
May 26 Javascript
实现一个简单得数据响应系统
Nov 11 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
javascript版2048小游戏
2015/03/18 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
python生成IP段的方法
2015/07/07 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
乡下人家教学反思
2014/02/01 职场文书
40岁生日感言
2014/02/15 职场文书
冬季安全检查方案
2014/05/23 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
学习保证书100字
2015/02/26 职场文书
甲午风云观后感
2015/06/02 职场文书
2015年重阳节主持词
2015/07/04 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS