js的element对象_js element-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36594703/article/details/77008283

本文通过两个实例介绍如何使用JavaScript操作DOM。第一个实例展示了如何在HTML列表的末尾添加新的列表项，包括获取父元素、创建新元素及文本节点并将其添加到DOM树中的过程。第二个实例则介绍了如何获取和修改HTML输入元素的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例一：在末尾添加节点

1.获取到ul标签

2.创建li标签

3.创建文本document.createTextNode("文本内容");

4.把文本添加到li下面appendChild()方法

5.把li添加到ul末尾

<html>
<head>
<title>aaa</title>
</head>
<body>
  <ul id="ulid">
	<li>111</li>
	<li>222</li>
	<li>333</li>
  </ul>
  <br/>
  <input type="button" value="add" οnclick="add1()"/>
<hr/>
	<script type="text/javascript">
	 function add1(){
		var ul1=document.getElementById("ulid");//获取到标签
		//创建标签
		var li1=document.createElement("li");
		//创建文本
		var text1= document.createTextNode("4444");
		//将文本加入到li下面
		li1.appendChild(text1);
		//吧li加入到ul下面
		ul1.appendChild(li1);
	 }
	</script>
</body>
</html>

2.element元素对象

要操作element对象首先要获取到该对象，使用document里面的相应的方法获取

获取属性里面的值getAttribute("属性名称");

setAttribute()：设置属性值

removeAttribute()：删除属性，但不能吧value值删除

<body>
  <input type="text"name="name1" id="inputid" value="aaa"/>
  <br/>
  
<hr/>
	<script type="text/javascript">
	 //先要获取到input标签
	 var input1=document.getElementById("inputid");
	 //alert(input1.value);
	// alert(input1.getAttribute("value"));
	 //alert(input1.getAttribute("class"));
	 alert(input1.getAttribute("class"));
	 input1.setAttribute("class","haha");
	  alert(input1.getAttribute("class"));
	 alert(input1.getAttribute("name"));
	 input1.removeAttribute("name");
	 alert(input1.getAttribute("name"));
	</script>
</body>

相要获取标签下面的子标签

使用属性childNodes，但这个属性兼容性差

getElementsByTagName();

<body>
  <ul id="ulid">
	<li>1111</li>
	<li>2222</li>
   </ul>
  <br/>
  
<hr/>
	<script type="text/javascript">
	 //获取ul下面的所有子标签
	 var ulid1=document.getElementById("ulid");
	 //获取ul下面的子标签
	 var lis=ulid1.childNodes;
	 alert(lis.length);
	var lis1= ulid1.getElementsByTagName("li");
	alert(lis1.length);
	</script>
</body>