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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
基于jquery编写分页插件
Mar 07 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
webpack是如何实现模块化加载的方法
Nov 06 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
PHP5中MVC结构学习
2006/10/09 PHP
php 抽象类的简单应用
2011/09/06 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
初三学习决心书
2014/03/11 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
设计专业自荐信
2014/06/19 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
先进班组事迹材料
2014/12/25 职场文书
工作简报怎么写
2015/07/21 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers