JavaScript操作DOM

最新推荐文章于 2024-04-30 18:31:52 发布

原创最新推荐文章于 2024-04-30 18:31:52 发布 · 498 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript进行DOM操作，包括获取、设置、添加和删除节点等常见任务，并提供了实例代码，帮助开发者更好地理解和掌握DOM操作。

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

DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。
DOM 不属于 JavaScript，但是操作 DOM 是JS最常见的任务，而JS也是最常用于 DOM 操作的语言。

获取节点

以tagid获取

document.getElementById("my_div").style.height="100px";

以tagname获取

document.getElementsByTagName("input")[0].value="hello";   // 下标为 [0] 表示选取第 1 个 input 标签
document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签

设置节点

document.getElementById("div_1").setAttribute("class","class_2");

添加节点

JS动态创建元素只能用变量.style.XXX 的形式。而不能用诸如变量.style="XXX:yyy"。
先createelement然后将其插入为parent的子对象节点。

function addlast(){
	idnum++;
	console.log(idstr+idnum);
	var mydiv=document.createElement("div");
	mydiv.id=idstr+idnum;
	mydiv.style.height="100px";
	mydiv.style.background="red";
	document.getElementsByTagName("body")[0].appendChild(mydiv);
}

删除节点

通过获得parent然后调用removechild来删除本对象节点。

function removelast(){
	var obj=document.getElementById(idstr+idnum);
	obj.parentNode.removeChild(obj);
	if(idnum>=1)
		idnum--;
	console.log(idstr+idnum);
}

innerHTML 属性

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
其在JS具有双向功能：获取对象的内容或向对象插入内容。

<div id="aa">这是内容</div>

var tmp=document.getElementById('aa').innerHTML;
document.getElementById('aa').innerHTML=‘xxx’;

HTML对象作为参数传入JS函数

<html>
<head>
	<script>
		function mblur(obb)
		{
		    if(obb.value == "")
		        alert('input cannot be empty');
		}
	</script>
</head>

<body>
please input:
<input id="aa" type="text" onblur="mblur(this)">
</body>
</html>