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 相关文章推荐
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
javascript self对象使用详解
Oct 18 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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连接mssql:pdo odbc sql server
2011/07/20 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
怎么清空javascript数组
2013/05/11 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js使用递归解析xml
2014/12/12 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python学生管理系统代码实现
2020/04/05 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
学python爬虫能做什么
2020/07/29 Python
python3排序的实例方法
2020/10/20 Python
Python爬取梨视频的示例
2021/01/29 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
机关党建工作汇报材料
2014/08/20 职场文书
电影地道战观后感
2015/06/04 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
使用Ajax实现无刷新上传文件
2022/04/12 Javascript