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 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
js控制div弹出层实现方法
May 11 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 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
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php格式文件打开的四种方法
2018/02/24 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
银行实习自我鉴定
2013/10/12 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
军训决心书范文
2015/09/22 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书