用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 相关文章推荐
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python做量化投资系列之比特币初始配置
2018/01/23 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python字节单位转换实例
2019/12/05 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Python新手如何理解循环加载模块
2020/05/29 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
文职个人求职信范文
2013/09/23 职场文书
思想品德自我评价
2014/02/04 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
鸡毛信观后感
2015/06/11 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript