element对象常用方法

最新推荐文章于 2024-05-10 20:51:01 发布

原创最新推荐文章于 2024-05-10 20:51:01 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript获取和操作HTML文档对象模型（DOM）中的元素。内容包括通过getElementById获取标签，使用getAttribute和setAttribute改变元素属性，以及通过getElementsByTagName获取子标签的方法。示例代码展示了获取input标签的值、改变class属性以及获取ul下所有li子标签的个数。

<html>
 <head>
	 <meta charset="utf-8"/>
  <title>element对象</title>
 </head>
 <body>
	 <!-- 获取标签 -->
	<input type="text" id="aId" class="aClass" value="aaa" />
	<script type="text/javascript">
		/*
		var input1 = document.getElementById("aId");
		//获取指定关键字标签的值
		alert(input1.getAttribute("value"));
		alert(input1.getAttribute("class"));
		//设置指定标签的值
		input1.setAttribute("class", "aaClass");
		alert(input1.getAttribute("class"));
		//删除指定标签的值(不能删除 value 的值)
		input1.removeAttribute("class");
		alert(input1.getAttribute("class"));
		*/
	</script>

	<!-- 获取子标签 -->
	<ul id="ulId">
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
	<script type="text/javascript">
		//获取 ul 下面的 li 子标签集合 唯一有效方法!
		var lis = document.getElementsByTagName("li");
		alert(lis.length);
	</script>
 </body>
</html>