用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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 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环境――Appserv
2006/12/13 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python如何爬取网页中的文字
2020/07/28 Python
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
高三历史教学反思
2014/01/09 职场文书
班组安全员工作职责
2014/02/01 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
校园活动策划方案
2014/06/13 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
语文教师求职信范文
2015/03/20 职场文书
趣味运动会广播稿
2015/08/19 职场文书