用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(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 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获取根域名方法汇总
2014/10/28 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python SVM 线性分类模型的实现
2019/07/19 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
总裁办公室主任职责
2014/01/02 职场文书
房地产融资计划书
2014/01/10 职场文书
民生工作实施方案
2014/05/31 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
商务信函英语问候语
2015/11/10 职场文书
七年级上册生物的课件
2019/08/07 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js