用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 相关文章推荐
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
webpack的移动端适配方案小结
Jul 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
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python列表list保留顺序去重的实例
2018/12/14 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Python无损压缩图片的示例代码
2020/08/06 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
2014教师党员个人自我评议
2014/09/20 职场文书
值班管理制度范本
2015/08/06 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
个人向公司借款协议书
2016/03/19 职场文书