用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 相关文章推荐
$.each与$().each的区别示例介绍
Mar 20 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
用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/12/22 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP7多线程搭建教程
2017/04/21 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python版简单工厂模式
2017/10/16 Python
Django权限机制实现代码详解
2018/02/05 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Python中os模块功能与用法详解
2020/02/26 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
大跃进口号
2014/06/16 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
python 离散点图画法的实现
2022/04/01 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL
 python中的元类metaclass详情
2022/05/30 Python