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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 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 session处理的定制
2009/03/16 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
document.write的几点使用心得
2014/05/14 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
python检测服务器是否正常
2014/02/16 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python实现识别相似图片小结
2016/02/22 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python使用matplotlib绘制热图
2018/11/07 Python
python实现五子棋小游戏
2020/03/25 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
架构师岗位职责
2013/11/18 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2016新年晚会开场白
2015/12/03 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python