用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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 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
15种PHP Encoder的比较
2007/04/17 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php把session写入数据库示例
2014/02/26 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP图片水印类的封装
2017/07/06 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
Jquery 扩展方法
2010/05/06 Javascript
js Math 对象的方法
2013/09/01 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python五子棋游戏的设计与实现
2019/06/18 Python
django 信号调度机制详解
2019/07/19 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
控制工程专业个人求职信
2013/09/25 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
会计稽核岗位职责
2015/04/13 职场文书
搬迁通知
2015/04/20 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS