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 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
vue首次渲染全过程
Apr 21 Vue.js
解决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
一个颜色轮换的简单例子
2006/10/09 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
javascript实现依次输入input自动定焦
2014/12/23 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Android分包MultiDex策略详解
2017/10/30 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Django中的session用法详解
2020/03/09 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
保护黄河倡议书
2014/05/16 职场文书
体育专业求职信
2014/07/16 职场文书
初中学习计划书范文
2014/09/15 职场文书
出国签证在职证明
2014/09/20 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
德能勤绩工作总结
2015/08/11 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书