用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进行拖拽
Jul 20 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
bpython 功能强大的Python shell
2016/02/16 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python tornado微信开发入门代码
2018/08/24 Python
django 外键model的互相读取方法
2018/12/15 Python
Python docx库用法示例分析
2019/02/16 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python装饰器用法与知识点小结
2020/03/09 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
教师网络培训感言
2014/03/09 职场文书
产品开发计划书
2014/04/27 职场文书
找工作求职信
2014/07/07 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书