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

最新推荐文章于 2024-09-25 15:23:45 发布

shaotianyou.ddd

最新推荐文章于 2024-09-25 15:23:45 发布

阅读量5.1k

点赞数 1

分类专栏： HTML 文章标签： HTML JavaScript

本文链接：https://blog.csdn.net/qq_38261445/article/details/84201076

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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。

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