用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 设置文本框中焦点的位置
Nov 20 Javascript
js 函数调用模式小结
Dec 26 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 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网上调查系统
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP 错误处理机制
2015/07/06 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
班级寄语大全
2014/04/10 职场文书
维修工先进事迹
2014/05/29 职场文书
网络管理员岗位职责
2015/02/12 职场文书
干部考核工作总结
2015/08/12 职场文书
2016年党建工作简报
2015/11/26 职场文书