JavaScript中几种 获取元素的方式
1.根据id获取元素
document.getElementById("id属性的值");
2.根据标签名字获取元素
document.getElementsByTagName("标签的名字");
3.根据name属性的值获取元素
document.getElementsByName("name属性的值");
4.根据类样式的名字获取元素
document.getElementsByClassName("类样式的名字");
5.根据选择器获取元素
1.document.querySelector("选择器");
2.document.querySelectorAll("选择器");
0.码仙励志
强者征服今天，懦夫哀叹昨天，懒汉坐等明天
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>
JavaScript中几种 获取元素的方式的更多相关文章
- Hibernate中两种获取Session的方式
转自:https://www.jb51.net/article/130309.htm Session:是应用程序与数据库之间的一个会话,是hibernate运作的中心,持久层操作的基础.对象的生命周期 ...
- JavaScript DOM三种创建元素的方式
三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn&l ...
- java中几种获取项目路径方式
转自http://caodaoxi.iteye.com/blog/1234805 在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录 ...
- java(JSP)中几种获取项目路径方式
在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getPro ...
- JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
- Spring中三种配置Bean的方式
Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ...
- JavaScript中两种类型的全局对象/函数【转】
Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...
- Request三种获取数据的方式
今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...
- 两种获取connectionString的方式
两种获取connectionString的方式 1. public static string connectionString = ConfigurationManager.ConnectionSt ...
随机推荐
- /etc/vim/vimrc的一个的配置
(转)Vim 配置文件===/etc/vimrc "===================================================================== ...
- 转sklearn保存模型
训练好了一个Model 以后总需要保存和再次预测, 所以保存和读取我们的sklearn model也是同样重要的一步. 比如,我们根据房源样本数据训练了一下房价模型,当用户输入自己的房子后,我们就需要 ...
- VS2015：出现devenv.sln解决方案保存对话框
问题描述: 打开VS2015项目时,提示保存“devenv.sln” 解决方法: 找到文件:C:\Program Files (x86)\Common Files\microsoft shared\M ...
- 设置ubuntu默认中文字符
一. Ubuntu默认的中文字符编码 Ubuntu默认的中文字符编码为zh_CN.UTF-8,这个可以在 /etc/environment中看到:sudo gedit /etc/environment ...
- Swift 使用 LLDB 调试命令
swift 和 oc 的语法不一样: Xcode 调试技巧之 Swift 篇 打印和赋值,观察数值变量和view对象属性 p指令可打印其对象类型.内存地址以及该对象的值等具体信息, po指令则是打印其 ...
- 推荐系统之余弦相似度的Spark实现
推荐系统之余弦相似度的Spark实现 (1)原理分析 余弦相似度度量是相似度度量中最常用的度量关系,从程序分析中, 第一步是数据的输入, 其次是使用相似性度量公式 最后是对不同用户的递归计算. ...
- Oracle体系结构之参数文件管理
参数文件作用:主要用来记录数据库配置信息,数据库在启动时,需要读取参数文件中关于控制文件的信息,分配内存,打开进程,会话等.数据库启动时第一个读取参数文件. 参数文件分类: 1)pfile:文本文件, ...
- OKEX API(Websocket)
本文介绍OKEX API Websocket WebSocket API for SPOT 开始使用 WebSocket是HTML5一种新的协议(Protocol).它实现了客户端与服务器全双工通信, ...
- PL/SQL常用语法及举例
PLSQL语句 DECLARE 声明部分 BEGIN 程序编写,SQL语句 EXECPTION 处理异常 END; / 声明部分(DECLARE) SQL> set serveroutput o ...
- sublime text3控制台每次报错会显示几行[ ]
如下图所示,每次编译报错的时候会显示: 我只需要报错信息,不想红框中的信息出现. 解决方案: 1 找到sublime Text3安装路径下的Default.sublime-package,如~Subl ...