用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 相关文章推荐
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
VUE安装使用教程详解
Jun 03 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
我常用的几个类
2006/10/09 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
会员活动策划方案
2014/08/19 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
九寨沟导游词
2015/02/02 职场文书