DOM对象控制HTML

最新推荐文章于 2023-12-23 00:22:28 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2023-12-23 00:22:28 发布

阅读量134

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/echokkk/article/details/78736492

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			height: 1000px;
		}
	</style>
</head>
<body>
	<p id="pn">world1</p>
	<p name="pn">hello1</p>
	<p name="pn">hello2</p>
	<p title="测测这个属性" id="ss">world2</p>
	<script type="text/javascript">
		var a = document.getElementsByName("pn")[0];//通过name值获取元素
		var c = document.getElementsByName("pn")[1];
		console.log(a);
		var ss = document.getElementById("ss");
		console.log(ss.getAttribute("title"));//获取属性值
		ss.setAttribute("title","设置title属性");//设置属性值
		console.log(ss.getAttribute("title"));
		var b = document.getElementsByTagName("body")[0];//通过标签设置属性
		console.log(b.childNodes);//获取子节点
		console.log(a.parentNode);//获取父节点
		var input = document.createElement("input");//创建节点
		input.type = "button";
		input.value = "按钮1";
		b.appendChild(input);//插入节点是在末尾插入
		var button = document.createElement("button");
		button.innerHTML = "按钮2";
		b.insertBefore(button,a);//插入节点，在指定位置插入
		b.removeChild(c);//移除节点
	</script>
</body>
</html>

背着吉他的蝙蝠女侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM对象控制HTML

demo代码如下： Document body { height: 1000px; } world1 hello1 hello2 world2 var a = document.getElementsByName("pn")[0];//通过name值获取元素 var c = document.getElementsByName("pn")
复制链接

扫一扫

专栏目录