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与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
判断ie的两种简单方法
Aug 12 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
工作中常用js功能汇总
Nov 07 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
Yii分页用法实例详解
2014/12/04 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python各层级目录下import方法代码实例
2020/01/20 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
php实例化对象的实例方法
2021/11/17 PHP