用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实现简单验证码提示解决方案
Dec 20 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
JS原型与继承操作示例
May 09 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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 addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
python制作一个桌面便签软件
2015/08/09 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python 弧度与角度互转实例
2020/04/15 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
社区科普工作方案
2014/06/03 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL