JavaScript - 获取页面元素的四种方法

最新推荐文章于 2024-04-24 19:12:55 发布
最新推荐文章于 2024-04-24 19:12:55 发布
阅读量663 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qjy_985211/article/details/83899248
版权

测试源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2 id="header">前端开发学习</h2>
<ul class="list">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

1.用标签名来获取元素- document.getElementByTagName

获取页面中全部的 li 元素 （参数为标签名）

以数组形式保存

访问元素内容

修改元素内容

2.用元素 id 来获取 - document.getElementById （参数为id内容）

以文本形式保存

访问元素内容

修改元素内容

3.用 class 类名来获取元素 - document.getElementsByClassName

返回一个数组，类属性list进行修饰的一个对象

参数为clss属性值

访问元素内容

4.用 CSS 选择符来获取 - document.querySelector 

                        - document.querySelectorAll

document.querySelector 只能获取一个元素内容

使用 querySelectorAll 可获取多个内容

访问元素内容

修改元素内容

傲娇虎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中获取页面元素的六种方式
m0_46862838的博客
05-28 4646
根据i指定的id名选中页面元素 document.getElementById("id名"); 根据指定的标签名选中页面中所有满足条件的元素 document.getElementsByTagName("标签名"); 根据指定的name属性名选中页面中所有满足条件的元素 document.getElementsByName("name属性"); 根据指定的类名选中页面中所有满足条件的元素根据 document.getElementsByClassName("类名") 用来选中页面元素，根据给定的选择
JavaScript驾驭网页－获取网页元素
10-22
主要介绍了JavaScript驾驭网页－获取网页元素的相关资料,需要的朋友可以参考下
JavaScript 查找元素
weixin_30920513的博客
07-10 202
查询单个元素document.getElementById 示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE html> <html> <hea...
Vue typescript 获得html 元素
最新发布
MyFreeIT
04-24 312
【代码】Vue typescript 获得html 元素。
JS基础入门篇（ 三 ）— 使用JS获取页面中某个元素的4种方法以及之间的差别（ 二 ）...
weixin_34209406的博客
05-11 162
1.获取元素的几种方式 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.getElementsByClassName("class名"); 3.通过元素标签去获取元素 document.getElementsByTagName("标签名"); 4....
Web基础(从零开始)——DOM简介（获取元素的四种方法）
qq_57633498的博客
12-04 1280
文档对象模型（简称DOM）：是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。 DOM树： 1.文档：一个页面就是一个文档，DOM中使用document表示； 2.元素：页面中的所有标签都是元素，DOM中使用element表示； 3.节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示； DOM把以上内容都看做是对象。 获取元素 1.根据ID获取 var element=document.getElementById(ID); eleme
JavaScript查找元素的方法
weixin_34306676的博客
11-30 2227
1.根据id获取元素 document.getElementById("id属性的值"); 2.根据标签名字获取元素 document.getElementsByTagName("标签的名字"); 3.根据name属性的值获取元素 document.getElementsByName("name属性的值"); 4.根据class属性获取元素 document.ge...
JavaScript获取页面元素的常用方法详解
10-16
本文将详细介绍四种常用的JavaScript方法来获取页面元素，包括通过标签名、ID、类名以及CSS选择器。 1. **通过标签名获取元素**： 使用`getElementsByTagName()`方法，你可以根据指定的HTML标签名获取所有匹配的...
JavaScript中获取HTML元素值的三种方法
10-22
在JavaScript中，获取HTML元素值是网页动态交互的基础，它允许开发者从用户输入或页面上其他元素中收集信息。本文将详细介绍三种常用的方法：getElementById()、getElementsByName() 和 getElementsByTagName()，并...
javascript获取元素离文档各边距离的方法
10-24
主要介绍了javascript获取元素离文档各边距离的方法,以一个自定义函数形式分析了javascript针对文档各边距离的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js:获得页面中元素的方法
soft_xiaohui的专栏
09-04 721
<br />function getElementAllOfMethod() {<br />  var myTab = document.getElementById('my_tab');<br />  alert('myTab---->' + myTab.value);<br />  var myTab1 = document.myForm.my_tab;<br />  alert('myTab1---->' + myTab1.value);<br />  var myTab2 = document.fo
JS获取网页中HTML元素的几种方法分析
05-10
JS获取网页中HTML元素的几种方法分析
使用 js 操作页面元素的方法
qq_15551663的博客
08-06 1678
DOM(文档对象模型) 是浏览器对 html 文件的描述方式DOM API 是浏览器提供给 JavaScript 操作 html 页面内元素的方式简而言之, 浏览器提供了一些内置函数来让我们操作页面(增删改查) 查找元素 查找元素使用 document.querySelector() 函数document 是整个文档(包含了 html), 可以理解为 html 的父节点这个函数的参数是一个选择...
正确使用DOM--如何访问网页元素
weixin_33875564的博客
01-29 227
最新正确使用DOM--如何访问网页元素以下是三零网为大家整理的最新正确使用DOM--如何访问网页元素的文章，希望大家能够喜欢!Firefox以及其他Gecko引擎的浏览器遇到的最常见的兼容性问题是IE DHTML和W3C DOM的区别。不规范的DHTML脚本中最容易犯的一个错误就是使用不规范的方式来访问网页元素。我们曾经用spider爬一些国内著名门户网站，单从数量上看，95...
访问HTML中元素的方法
第十七签
06-06 1251
1、根据ID访问HTML元素<!DOCTYPE html> <html> <head> <title>访问html元素</title> <script type="text/javascript"> function getContent(){ alert(document.getElementById("
访问 HTML中元素的方法
weixin_30709929的博客
12-07 197
http://www.w3school.com.cn/jsref/index.asp 1.document.getElementbyId(“id1”),Html中，名称是id1的元素的对象。由于要求元素的id是唯一的，所以通过getElementId()方法获得的是一个对象，而不是一个数组。 2.document.getElementbyTagName("h1"),返回所有标签为<...
页面元素聚焦的一个技巧
开发技术助记专栏
04-23 1167
在最近的项目中，遇到一个控件聚焦的问题。此页面是C＃开发的，主要功能是显示基本信息和添加管理人员，添加管理人员的地方要用ajax技术，也就是通过“回车”或“，”触发查询，通过输入“，”实现查询到是挺简单的，可是通过“回车”就遇到麻烦了，每次回车都会触发页面上的服务器按钮，试了多种让几个按钮失去焦点的办法都没效果，实在没辙了，抱着试试看的想法，将其换成普通的html标签,结果是想法成立，问题搞定，呵
javascript--通过dom查找页面元素的三种方法
qq_60672911的博客
02-25 1084
首先在body里面先创建四个buttonl来区分 <body> <button>标签名</button> <button class="lei">类名</button> <button class="lei">类名2</button> <button id="gogo">id名</button> </body> //第一种 //通过 标签名获取元素 如果
js中获取元素对象的四种方式
bug生成师
05-22 3113
通过id获取 通过元素的ID值 获取到某个元素对象 返回：单个对象，因为id是唯一的 格式 document.getElementById("id名称"); 示例 var span = document.getElementById("s1"); 通过name值获取 通过元素的name值 获取到所有符合要求的元素对象，返回的是数组 格式 document.getElementsByName("name值"); 示例 var arr = document.getElementsByName("h
uni web-view获取页面元素
04-24
2. 在UniWebView的JavaScript代码中，使用DOM API来获取页面元素。 例如，要获取页面中ID为“elementID”的元素，可以使用以下代码： var element = document.getElementById("elementID"); 3. 将获取到的元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值