js获取id后添加html代码,js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id...

要用js操作一个html元素必须获取到这个元素，而获取元素要用 getElementById() 方法，这个方法是通过元素的Id获取到元素这个对象。getElementById 字符比较多，写得比较长，所以现在常常又用$()来获取html元素对象，这又是怎么回事？

其实$()本质还是通过getElementById()方法获取到html元素对象，只不过把这个获取方法定义为简单的$，这样书写简短快捷方便。取到元素 id 后，可通过它取元素的值和文本；还能用它判断元素是否存在。除一次获取一个元素 id 外，还能一次动态获取多个 id。

一、js获取Id的方法getElementById的使用方法

假如有 div 元素如下：

用javascript获取Id的方法getElementById()的使用方法

var obj = document.getElementById("divId");

以上是通过div的id号divId获取div这个对象，然后就可以对div进行各种操作了，如删除其内容，设置其属性，将其隐藏等等。

值得注意的是：div 必须先于 javascript 代码加载，也就是 div 要放在 var obj = document.getElementById("divId") 的前面，否则因找不到对象而报错。

二、js通过$获取html元素的Id

首先需要定义$：

var $ = function (objId) { return ("string" == typeof (objId)) ? document.getElementById(objId) : objId; };

其实是把 $ 定义为一个函数(方法)，在这个函数中仍然是通过 getElementById 方法获取元素的这个对象；也就是 $ 本身并不具备获取元素对象的功能，它只是一个字符，不过是把它定义为了一个获取元素对象的方法。

获取上述的div元素通过$表示为：

var obj = $("divId");

用getElementById方法获取要写一长串字母，现在只需写一个字符，是不是方便快捷很多，尤其要获取很多元素对象的时候，优势更明显。

三、js 通过元素 Id 获取其值

假如要添加产品，这里以添加产品名称为例。首先要写 html 代码，然后再写 Javascript 代码，它们分别如下：

Html 代码：

产品名称：

Javascript 代码:

function AddProduct() {

var proName = document.getElementById("inProName");

alert(proName.value);

}

提示：这里的 Javascript 代码可以放到 Html 代码前，因为加载网页时不执行 Javascript 代码，单击按钮时才执行。

四、js 通过元素 Id 获取其文本

假如要分别取 div 和 span 的文本，它们的代码分别如下：

Html 代码：

javascript 通过 div 的 id 获取其文本

js获取id后添加html代码,js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id...相关推荐

forum.php 重定向,解析php 版获取重定向后的地址(代码)
本篇文章是对php版获取重定向后的地址实现代码进行了详细的分析介绍,需要的朋友参考下 //取重定向的地址 class RedirectUrl{ //地址 var $url; //初始化地址 funct ...
js倒计时结束后播放音乐html5,js实现简单的倒计时
这篇文章主要为大家详细介绍了js实现简单的倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现简单倒计时的具体代码,供大家参考,具体内容如 ...
js生成div后添加html(),JS动态添加div，然后在div中添加元素
先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. 动态往div中添加元素: for (var n = 0; n < data.length; n++) { //获取div v ...
小米屏下指纹手机刷机后添加指纹提示失败请重试解决方法
咨询了工程师该问题是由于 persist 分区发生变化(重刷或清空分区)造成. 后记: 如果第一步"肉色砝码"一直失败,说明当前系统中已有校准文件,只能通过 Root 手机删掉现 ...
BootStrap使用方法为BootStrap3添加jquery.min.js文件（简单易懂）_☆往事随風☆的博客
为BootStrap3添加jquery.min.js文件一.前言二.BootStrap简介三.BootStrap3的使用方法 (1)先去官网找到BootStrap3这个版本的文档. (2)配置B ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
微信小程序开发（四）小程序数据绑定以及数据的动态获取与赋值
我们在编写js代码的时候,给一个id绑定一个数据可以先获取该id,然后在进行赋值 var text = document.getElementById("id"); text.te ...
ajax动态获取后台数据绘制echarts图表
Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
获取小程序页面路径、参数信息的三个方法
想直接让用户打开小程序某个页面,有3个方法. 第一:生成小程序二维码,用户扫码可以直接到达指定页面获取到服务. 第二:在用户关注公众号后立即收到相应页面的小程序卡片推送或者小程序链接. 第三:通过定时 ...

js获取id后添加html代码,js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id...

js获取id后添加html代码,js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id...相关推荐

最新文章

热门文章