js中document.getElementById()用法「建议收藏」

js中document.getElementById()用法「建议收藏」dom标准里面的 获取当前文档中指定id的元素if(document.getElementById(“regjm”).value!=document.getElementById(“regjm1”).value){  alert(“提示:请输入有效的认证码”);  document.getElementById(“regjm1”).focus();  retur

大家好,又见面了,我是你们的朋友全栈君。

dom标准里面的 
获取当前文档中指定id的元素
if (document.getElementById(“regjm”).value != document.getElementById(“regjm1”).value ) {

   alert(“提示:请输入有效的认证码”);
   document.getElementById(“regjm1”).focus();
   return false;
   }
例如:
<script>
function get()
{

if(document.getElementById(“Addr”).value==””)
{

alert(“null”);
}
else
{

alert(document.getElementById(“Addr”).value);
}
}
</script>
<head>
<input type=”text” id=”Addr” value=””>
<input type=”button” value=”click” οnclick=”get();”>

 

 

顾明思义,get-Element-By-Id,就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单就是给每个标签分配一个ID号

 

document.getElementById(“link”).href; 
document.getElementById(“link”).target; 
document.getElementById(“img”).src; 
document.getElementById(“img”).width; 
document.getElementById(“img”).height; 
document.getElementById(“input”).value; 
那么如何取得<div></div>以及<a></a>之间的值呢?如<div id=”div”>aaa</div>中的aaa,<a href=”#” id=”link”>bbb</a>中的bbb,也很简单,利用innerHTML就可以了: 
document.getElementById(“div”).innerHTML; 
document.getElementById(“link”).innerHTML; 
getElementById 方法 
返回具有指定 ID 属性值的第一个对象的一个引用。 
语法 
oElement = document.getElementById(sIDValue) 
参数 
sIDValue 必选项。指明 ID 属性值的字符串 
返回值 
返回 ID 属性值与指定值相同的第一个对象。 
注释 
如果 ID 属于一个集合,getElementById 方法返回集合中的第一个对象。 
getElementById 方法与使用 all 集合上的 item 方法等同。例如,以下代码样本表示如何从 document 对象中取回 ID 为 oDiv 的第一个要素。 
使用 DHTML 对象模型: 
var oVDiv = document.body.all.item(“oDiv”); 
使用文档对象模型(DOM): 
var oVDiv = document.getElementById(“oDiv”); 
示例 
以下例子表示如何使用 getElementById 方法返回 ID 属性值 oDiv 的第一次出现。 
<script> 
function fnGetId(){ 
// Returns the first DIV element in the collection. 
var oVDiv=document.getElementById(“oDiv1”); 

</script> 
<DIV ID=”oDiv1″>Div #1</DIV> 
<DIV ID=”oDiv2″>Div #2</DIV> 
<DIV ID=”oDiv3″>Div #3</DIV> 
<INPUT TYPE=”button” VALUE=”Get Names” οnclick=”fnGetId()”> 
getElementById 方法 
返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1 
getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法 
这个是JS的一个方法,意思是通过控件ID取得元素的值,如一个form里包函text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。 
这个是JS的一个方法,意思是通过控件ID取得元素的值,如一个form里包函text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。

 

程序举例

<html> 
<head> 
<script type=”text/javascript”> 
function alignRow() 

var x=document.getElementById(‘myTable’).rows 
x[0].align=”right” 

</script> 
</head> 
<body> 
<table width=”60%” id=”myTable” border=”1″> 
<tr> 
<td>行1 单元格1</td> 
<td>行1 单元格2</td> 
</tr> 
<tr> 
<td>行2 单元格1</td> 
<td>行2 单元格2</td> 
</tr> 
<tr> 
<td>行3 单元格1</td> 
<td>行3 单元格2</td> 
</tr> 
</table> 
<form> 
<input type=”button” οnclick=”alignRow()” value=”右对齐第一行文字”> 
</form> 
</body> 
</html>
支队一个单元隔进行对齐

<html> 
<head> 
<script type=”text/javascript”> 
function alignCell() 

var x=document.getElementById(‘myTable’).rows[0].cells 
x[0].align=”center” 

</script> 
</head> 
<body> 
<table id=”myTable” border=”1″ width=”100%”> 
<tr> 
<td>单元格1</td> 
<td>单元格2</td> 
</tr> 
<tr> 
<td>单元格3</td> 
<td>单元格4</td> 
</tr> 
</table> 
<form> 
<input type=”button” οnclick=”alignCell()” value=”居中对齐第一个单元格的内容”> 
</form> 
</body> 
</html>
改变colspan的值

<html> 
<head> 
<script type=”text/javascript”> 
function setColSpan() 

var x=document.getElementById(‘myTable’).rows[0].cells 
x[0].colSpan=”2″ 
x[1].colSpan=”6″ 

</script> 
</head> 
<body> 
<table id=”myTable” border=”1″> 
<tr> 
<td colspan=”4″>单元格1</td> 
<td colspan=”4″>单元格2</td> 
</tr> 
<tr> 
<td>单元格3</td> 
<td>单元格4</td> 
<td>单元格5</td> 
<td>单元格6</td> 
<td>单元格7</td> 
<td>单元格8</td> 
<td>单元格9</td> 
<td>单元格10</td> 
</tr> 
</table> 
<form> 
<input type=”button” οnclick=”setColSpan()” value=”改变colspan值”> 
</form> 
</body> 
</html> 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159589.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 域名ssl证书怎么弄_nginx配置https证书

    域名ssl证书怎么弄_nginx配置https证书越来越多的第三方接入需要使用https了,很多时候不止到证书到那里免费申请,申请后怎么配置。免费证书和收费证书主要的差别有几点免费证书收费证书支持绑定域名数少支持绑定域名数多无保险费用有保险费用一年需要更换两年或三年可选颁发机构少更多的颁发机构证书免费申请的几个大平台阿里云腾讯云…

    2022年10月1日
    2
  • U盘pe(理论大白菜、优启通、微PE都可以) 装ESXI方案 (非通用UltraISO重做启动U盘),省U盘「建议收藏」

    U盘pe(理论大白菜、优启通、微PE都可以) 装ESXI方案 (非通用UltraISO重做启动U盘),省U盘「建议收藏」此文是我发的一篇的准备工作,因为ESXi6.7刚发布的原因,很多同学等着升级,故而先写了出来。原文如下:戴尔R730安装升级VMwarevSphereHypervisor(ESXi)6.7https://koolshare.cn/thread-139061-1-1.html这一篇,介绍怎样从U盘加载ISO镜像,并引导电脑/服务器,完成新安装/升级系统的操作,当然,实际中不仅仅用于ESXi的安装升级,也可以用于NAS4Free、FreeNAS、ProxmoxVE虚拟机系统,爱快软路由系统、Pan

    2025年8月31日
    18
  • 图卷积网络 GCN Graph Convolutional Network(谱域GCN)的理解和详细推导[通俗易懂]

    图卷积网络 GCN Graph Convolutional Network(谱域GCN)的理解和详细推导[通俗易懂]文章目录1.为什么会出现图卷积神经网络?2.图卷积网络的两种类型2.1vertexdomain(spatialdomain):顶点域(空间域)2.2spectraldomain:频域方法(谱方法)3.什么是拉普拉斯矩阵?3.1常用的几种拉普拉斯矩阵普通形式的拉普拉斯矩阵对称归一化的拉普拉斯矩阵(SymmetricnormalizedLaplacian)随机游走归一化拉普拉斯矩…

    2022年6月11日
    26
  • 几款软件加密/加壳工具的比较「建议收藏」

    几款软件加密/加壳工具的比较「建议收藏」几款.Net加密/加壳工具的比较前言使用过.NET的程序员都知道,.NET是一个巨大的跨时代进步,它开发效率高、功能强、界面观、耐用、新的语言C#已经提交为行业规范、CLR共公运行库资源丰富,这所有的特点标志着它成为主流编程语言是必然的。可是它也有一个缺点,那就是编译好的程序集可以完全反编译成源代码,这给一些不法份子提供了很好的机会,试想想,您辛苦的劳动成果就这样给了别…

    2022年4月19日
    884
  • 如何在html添加css样式表,网页中添加CSS样式表的四种方式

    如何在html添加css样式表,网页中添加CSS样式表的四种方式本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍。CSS样式表文件的优势表现在两个方面:***,简化了网页的格式代码,外部的CSS样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格…

    2022年7月14日
    17
  • 智能优化算法简介

    智能优化算法简介智能优化算法:受人类智能、生物群体社会性或自然现象规律的启发。主要包括:(1)遗传算法:模仿自然界生物进化机制(2)差分进化算法:通过群体个体间的合作与竞争来优化搜索(3)免疫算法:模拟生物免疫系统学习和认知功能(4)蚁群算法:模拟蚂蚁集体寻径行为(5)粒子群算法:模拟鸟群和鱼群群体行为(6)模拟退火算法:源于固体物质退火过程(7)禁忌搜索算法:模拟人类智力记忆过程(8)…

    2022年5月10日
    61

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号