JavaScript操作DOM

最新推荐文章于 2024-07-09 21:26:09 发布

brahmsjiang

最新推荐文章于 2024-07-09 21:26:09 发布

阅读量449

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/brahmsjiang/article/details/78883016

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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" οnblur="mblur(this)">
</body>
</html>

brahmsjiang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作DOM

DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。DOM 不属于 JavaScript，但是操作 DOM 是JS最常见的任务，而JS也是最常用于 DOM 操作的语言。获取DOM对象以tagid获取document.getElementById("my_div").style.height="100px";以tagname获取document.getEleme
复制链接

扫一扫

专栏目录