用js得到网页中所有的div的id


Posted in Javascript onOctober 19, 2020

核心代码

<SCRIPT LANGUAGE = "JavaScript">
function handleAllTags(){
 var arrayOfDocFonts;
 if (document.all || document.getElementById) {
  arrayOfDocFonts = document.getElementsByTagName("div");
 }
 alert("本文档DIV标记个数分别为: " + arrayOfDocFonts.length + "个。");
 var tmp = 0;
 for (var i = 0; i < arrayOfDocFonts.length; i++) {
  if (arrayOfDocFonts[i].id != "") alert("其ID是:div[" + eval(i + 1) + "].id=" + arrayOfDocFonts[i].id);
  tmp += 1;
 }
}
</SCRIPT>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<a href="#" onclick="handleAllTags()">点击计算div个数</a>
</body>

JAVASCRIPT-如何获取页面元素对象,元素ID

1. 通过元素id获取页面元素对象
var d = document.getElementById("id");
2. 获取和修改元素的文本内容
获取:d.innerText 修改: d.innerText="xxx";
3. 获取和修改文本框的内容
获取: i.value 修改: i.value="xxx";
4. 获取和修改元素的html内容

案例1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  function myfn(){
    //得到文本框 和 div的元素对象
    var i = document.getElementById("i1");
    var d1 = document.getElementById("d1");
    var d2 = document.getElementById("d2");
    //获取和修改元素的文本内容
    d1.innerText='BBB';
    //把文本框的文本内容取出给到div
    d2.innerText = i.value;
  }
</script>
</head>
<body>
<input type="button" value="按钮" onclick="myfn()">
<input type="text" id="i1" value="AAA">
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

案例2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  function myfn(){
    //获取文本输入框和div的元素对象
    var i = document.getElementById("i1");
    var d = document.getElementById("d1");
    //判断用户输入的内容是否是数
    if(isNaN(i.value)){
      //如果不是数显示xxx
      d.innerText="输入错误,请重新输入!";
    }else{
      d.innerText = i.value*i.value;
    }
  }
</script>
</head>
<body>
请输入一个数:<input type="text" id="i1">
<input type="button" value="平方" onclick="myfn()">
<div id="d1"></div>
</body>
</html>

到此这篇关于用js得到网页中所有的div的id的文章就介绍到这了,更多相关div的id内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
js实现动态时钟
Mar 12 Javascript
用javascript连接access数据库的方法
Nov 17 #Javascript
JavaScript的Function详细
Nov 14 #Javascript
取得父标签
Nov 14 #Javascript
多广告投放代码 推荐
Nov 13 #Javascript
js类 from qq
Nov 13 #Javascript
一段非常简单的让图片自动切换js代码
Nov 10 #Javascript
类似框架的js代码
Nov 09 #Javascript
You might like
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
浅谈MySQL中的触发器
2015/05/05 Python
python查询sqlite数据表的方法
2015/05/08 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python接收手机短信的代码整理
2020/08/02 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
会计找工作求职信范文
2013/12/09 职场文书
商务会议邀请函
2014/01/09 职场文书
2014年质检员工作总结
2014/11/18 职场文书
初三化学教学反思
2016/02/22 职场文书