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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
JavaScript 实现继承的几种方式
Feb 19 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/01/19 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
Javascript模块模式分析
2008/05/16 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
一篇不错的Python入门教程
2007/02/08 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python tornado使用流生成图片的例子
2019/11/18 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
学python最电脑配置有要求么
2020/07/05 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
临床护士自荐信
2014/01/31 职场文书
厂长岗位职责
2014/02/19 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2015年教师新年寄语
2014/12/08 职场文书
优秀党员先进材料
2014/12/18 职场文书
网络妈妈观后感
2015/06/08 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android