用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背投广告代码的完善
Apr 08 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
js实现简单的计算器功能
Jan 16 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 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 flush()与ob_flush()的区别详解
2013/06/03 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
php中rename函数用法分析
2014/11/15 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
浅谈angularJS中的事件
2016/07/12 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
处理Python中的URLError异常的方法
2015/04/30 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
python 基于opencv去除图片阴影
2021/01/26 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
生物化学研究助理员求职信
2013/10/09 职场文书
半年思想汇报
2013/12/30 职场文书
小学数学课后反思
2014/04/23 职场文书
专题组织生活会方案
2014/06/15 职场文书
教师个人读书活动总结
2014/07/08 职场文书
请客吃饭开场白
2015/06/01 职场文书
党小组鉴定意见
2015/06/02 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS