用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 操作XML入门
Dec 25 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 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获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP生成随机密码类分享
2014/06/25 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php验证手机号码
2015/11/11 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
javascript eval函数深入认识
2009/02/21 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python中SQLite如何使用
2020/05/27 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
电台编导求职信
2014/05/06 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Mysql Show Profile
2021/04/05 MySQL
解析MySQL binlog
2021/06/11 MySQL