DOM操作示例-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50918519

<span style="font-size:14px;"><!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
	div{float:left; height: 100px; line-height: 100px; }
	#d1,#d3{ background-color: #ccff00; }
	#d2{ cursor: pointer; background-color: #ffcc00; }
</style>
<script>
	/*用innerHTML是实现，开发一般用innerHTML*/
	/*function toggle(d2){//用innerHTML
		//设置d1的style的display
		d1.style.display=
			//如果d2的内容是？就设置为block，否则设置为none
			d2.innerHTML==">>"?"block":"none";
		//如果d的innerHTML是>>,就设置<<
						//否则就设置为>
			d2.innerHTML=
		d2.innerHTML==">>"?"<<":">>";
	}
	*/
	/*用textContent实现,兼容模式*/
	function toggle(d2){
		d1.style.display=
			d2.textContent?
					d2.textContent==">>"?"block":"none"
					:
					d2.innerText==">>"?"<<":">>";
		if(d2.textContent){
			d2.textContent=d2.textContent==">>"?"<<":">>";
		}else{
			d2.innerText=
				d2.innerText==">>"?"<<":">>";
		}
	}
</script>
</head>
<body>
	<div id="d1">树形列表</div>
	<div id="d2" οnclick="toggle(this)"><<</div><!--<与HTML冲突就不翻译-->
	<div id="d3">内容的主体</div>
</body>
</html>
</span>

效果如下：