JavaScript中常见的几种获取元素的方式
作者:码仙 发布时间:2023-07-13 07:46:12
标签:js,获取元素
1.根据id获取元素
document.getElementById("id属性的值");
返回值是一个元素对象
案例:点击按钮弹框
<body>
<input type="button" value="弹框" id="btn">
<script>
//根据id属性的值从文档中获取这个元素
var btnobj = document.getElementById("btn");
//为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)
btnobj.onclick = function () {
//响应做的事情
alert("码仙");
};
</script>
</body>
2.根据标签名字获取元素 document.getElementsByTagName("标签的名字");
返回值是一个伪数组
案例:点击按钮改变多个p标签的文字内容
<body>
<input type="button" value="改变" id="btn">
<div id="dv">
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
</div>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//根据标签名字获取标签
var pObjs = document.getElementsByTagName("p");
//var pObjs=document.getElementById("dv1").getElementsByTagName("p");
//循环遍历这个数组
for (var i = 0; i < pObjs.length; i++) {
//每个p标签,设置文字
pObjs[i].innerText = "我们都是p";
}
};
</script>
</body>
3.根据name属性的值获取元素 document.getElementsByName("name属性的值");
返回值是一个伪数组
案例:案例:点击按钮,改变所有name属性值为name1的文本框中的value属性值
<body>
<input type="button" value="显示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<script>
//点击按钮,改变所有name属性值为name1的文本框中的value属性值
document.getElementById("btn").onclick = function () {
//通过name属性值获取元素-------表单的标签
var inputs = document.getElementsByName("name1");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "我很好";
}
};
</script>
</body>
4.根据类样式的名字获取元素 document.getElementsByClassName("类样式的名字");
返回值是一个伪数组
案例:修改所有文本框的值
<body>
<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/>
<script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//获取所有的文本框
//根据类样式的名字获取元素
var inputs = document.getElementsByClassName("text");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "码仙";
}
};
</script>
</body>
5.根据选择器获取元素 1.document.querySelector("选择器");
返回值是一个元素对象
案例:点击按钮弹框
<body>
<input type="button" value="显示效果1" id="btn"/>
<input type="button" value="显示效果2" class="btn"/>
<script>
//点击按钮弹出对话框
//根据选择器的方式获取元素
var btnObj1 = document.querySelector("#btn");
btnObj1.onclick = function () {
alert("我变帅了");
};
var btnObj2 = document.querySelector(".btn");
btnObj2.onclick = function () {
alert("哈哈,我又变帅了");
};
</script>
</body>
2.document.querySelectorAll("选择器");
返回值是一个伪数组
案例:修改所有文本框的值
<body>
<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/>
<script>
document.getElementById("btn").onclick = function () {
//根据选择器的方式获取元素
var inputs = document.querySelectorAll(".text");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "码仙";
}
};
</script>
</body>
来源:https://qinge.blog.csdn.net/article/details/82710412
0
投稿
猜你喜欢
- 这个是今年年初写的一篇,拿出来温习下。指针让程序结构变得混乱,也让程序执行效率提高,因此在oo的语言中不提倡指针的使用,使得程序结构清晰易读
- 一、修改密码1.1 创建修改密码控制器运行命令php artisan make:controller Auth/PasswordContro
- 一、数组的创建方式一var a = new Array(); a[0]="wo"
- 在asp中获取当前的地址栏网址很简单,使用下面这句语句即能实现获取网站域名Request.ServerVariables("HTT
- 写好脚本,注册好服务之后,经测试,ORACLE可以随RHEL启动而启动,但不能随系统关闭而关闭。在网上找答案,发现几乎所有的设置过程帖子都是
- 一般情况下,导出超时可能都是以下三种情况:一、sql语句复杂,查询时间过长;二、处理查询后数据逻辑冗余;三、数据量过大导致响应超时。接下来分
- 在网上游荡,看着别人的精彩主页难免心里痒痒的,但自己精心布置的家(个人主页),如果在不同的浏览器中呈现
- 阻塞定义当来自应用程序的第一个连接控制锁而第二个连接需要相冲突的锁类型时,将发生阻塞。其结果是强制第二个连接等待,而在第一个连接上阻塞。不管
- 传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascr
- 阅读上一篇:FrontPage XP设计教程2——网页的编辑 制作一个漂亮的网页,离不开网页整体布局的设计,网页布局设计的合理与否,直接影响
- 见下面的代码:<html><head><title>精彩春风之月份查询</title><
- 折纸是日本著名的折叠纸张的艺术。折纸艺术只是使用一些不同的折叠方式,却能被用各种各样的方式组合成错综复杂的设计。而受折纸启发的logo设计则
- 代码如下:create proc p_sword_getblcolumn ( @tblN
- (一) 常用的CSS命名规则:头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:
- 前言 绝大多数的Oracle数据库性能问题都是由于数据库设计不合理造成的,只有少部分问题根植于Database Buffer、Share P
- // 格式化字符串 Fmt("{0}.[{id}].{name}",{id:1,name:'
- 要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误,就
- 1.sort.Sort介绍使用sort.Slice进行排序,因为slice把struct抽象化了,且slice封装过了,简单的基础类型可以使
- 随着CSS3越来越热,CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头,小小地应用了下(详见http://www.taobao.
- 一.权限表mysql数据库中的3个权限表:user 、db、 host权限表的存取过程是:1)先从user表中的host、 user、 pa