用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 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
es6函数之尾调用优化实例分析
Apr 25 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php计算函数执行时间的方法
2015/03/20 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
flask开启多线程的具体方法
2020/08/02 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
竞选宣传委员演讲稿
2014/05/24 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
无房证明样本
2015/06/17 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers