javascript基础知识梳理-DOM

最新推荐文章于 2020-08-24 18:43:50 发布

dc15822445347

最新推荐文章于 2020-08-24 18:43:50 发布

阅读量461

点赞数

分类专栏： javascript学习

本文链接：https://blog.csdn.net/dc15822445347/article/details/25332153

版权

javascript学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script type="text/javascript">
	window.onload = function() {
		//查询文档的一个或多个元素有如下方法,用指定的id属性,name属性,标签名称,css类,css选择器
		//使用id属性的时候如果文档中出现了两个id属性相同的元素,那么只会选取第一个元素
		var btn = document.getElementsByName("b1");
		console.log(btn);
		//使用name属性查找元素可以返回多个属性名称相同的元素,结果返回NodeList对象
		var btns = document.getElementsByName("b1");
		console.log(btns);
		//通过标签名选取元素,getElementsByTagName,如果使用通配符*,将取到文档中所有的元素
		var inputList = document.getElementsByTagName("input");
		console.log(inputList.length);
		//每个Element元素也有getElementsByTagName方法,只是范围缩小到该Element元素的所有后代元素
		var div1 = document.getElementById("div1");
		var div1_style = div1.style;
		var btns_div1 = div1.getElementsByTagName("input");
		console.log(btns_div1);
		console.log("div1.innerHTML:" + div1.innerHTML);
		console.log("div1.nodeName:" + div1.nodeName);
		console.log("div1.nodeValue:" + div1.nodeValue);
		console.log("div1.nodeType:" + div1.nodeType);
		var b3 = document.getElementById("b3");
		var b4 = document.createElement("input");
		b4.value = "button4";
		b4.id = "b4";
		b4.type = "button";
		//div1.appendChild(b4);//追加元素到父节点末尾
		//div1.insertBefore(b4, b3);//将元素插入到父节点的某个子节点前面
		//div1.removeChild(b3);//删除某个子节点
		div1.replaceChild(b4, b3);//使用新元素替换旧元素,等同于先调用insertBefore将新元素插入到旧元素之前,再调用removeChild删除旧元素
	}
</script>
</head>
<body>
	<input type="button" name="b1" value="button1" />
	<input type="button" name="b1" value="button2" />
	<div id="div1">
		<input type="button" id="b3" value="button3" />
	</div>
</body>
</html>