JavaScript获取页面元素的常用方法详解
更新时间：2019年09月28日 16:05:32 作者：Mr小zhou
这篇文章主要介绍了JavaScript获取页面元素的常用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS实现的合并两个有序链表算法,结合实例形式分析了JavaScript链表的定义、节点插入、删除、查找等相关算法实现技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了javascript设计模式之中介者模式Mediator,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了JS中常见编码及加密方式解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
这篇文章主要为大家详细介绍了小程序实现下拉列表框菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了JavaScript脚本延迟加载有哪些方式,主要介绍了五种方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-04-04
这篇文章主要介绍了JavaScript变量作用域，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了bootstrap响应式表格的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
hta实现的字数统计效果代码，中文算两个，英文算一个2008-02-02
通常大多数浏览器是并行下载资源的，但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构、脚本之间的存在依赖关系、使用document.write 向页面输出HTML等。2011-04-04
在JavaScript中实现文件下载的功能可以通过多种方式实现,这篇文章主要给大家介绍了关于JavaScript实现文件下载的14种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
最新评论