HTML中嵌套的JavaScript语言 document.getElementById(“”)函数的使用

1.语法:var 变量 = document .getElementById (“某一个标签的ID名称”)

参数:某一个标签的ID名称――必选项,为字符串 (String) 。
如:
返回值:oElemen――对象 (Element) 。

	<ol id="ol">
		<li>aa</li>
		<li>bb</li>
		<li>cc</li>
	</ol>
	<!//--.......-->
	var Num = document.getElementById("ol");//得到id名为ol的对象

说明:根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。 如果无符合条件的对象,则返回 null 。

**注意:**通过这个方法返回的是一个对象(object),你可以将其存在一个临时变量中,再通过这个临时变量得到其相应的属性或者值,如果要直接得到某些值,比如文本标签中的值,需要加上.value();

一个简单的测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ol标签</title>

	<script type="text/javascript">
		function Btn_Click(){
			var Num = document.getElementById("zhi").value;
			var Div = document.getElementById("ol");
			Div.setAttribute("start",Num);
		}
	</script>

</head>
<body>
	<p>期末成绩排名</p>
	<ol id="ol">
		<li>aa</li>
		<li>bb</li>
		<li>cc</li>
	</ol>
	修改列表编号:
	<input type="text" name="" id="zhi" class="inputtext" style="width: 30px;"/>
	<input type="button" name="" value="确定" onclick="Btn_Click();">
</body>
</html>

该段简单的代码实现了通过修改文本当中的值(当然在该实验中必须是整数哈),点击确定,触发事件,实现Btn_Click函数中的document.getElementById(“zhi”).value而获取到修改的数,同时获取o标签这个对象(var Div = document.getElementById(“ol”);),最后通过该对象的方法setAttribute(“start”,Num)将其start值(HTML5新增的属性),即有序标签的编号,更改为Num。

直接运行结果
在文本中输入数字,点击确定后得到结果。

刚刚开始写博客也刚刚接触前端只是,最主要的还是希往督促自己学习,有什么不对的地方还望多多指教!!

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值