<head>
<meta charset="UTF-8">
<title>2. 操作标签对象的属性和内容</title>
</head>
<body>
<!--操作标签内容-->
<div id="no1">
<div>测试1</div>
<div>测试2</div>
</div>
<hr>
<div id="btn">
<input type="button" value="获取no1内容">
<input type="button" value="获取no1文本内容">
<input type="button" value="修改no1内容">
</div>
<div>-------------------------------------------------------------------------------</div>
</body>
<script>
/*---------------------------------------------------------------------------------------*/
/*操作标签内容*/
//获取no1内容,拿到子元素的格式以及文本内容
var div1 = document.getElementById("no1");//.getElementsByTagName("div")[0];
document.getElementById("btn").getElementsByTagName("input")[0].onclick=function () {
alert(div1.innerHTML);
}
//获取no1文本内容//只拿到子元素文本内容
document.getElementById("btn").getElementsByTagName("input")[1].onclick=function () {
alert(div1.innerText);
}
//修改no1内容
document.getElementById("btn").getElementsByTagName("input")[2].onclick=function () {
/*var div1 = document.getElementById("no1").getElementsByTagName("div")[0];
div1.innerHTML="修改后的div1";*/
document.getElementById("no1").innerHTML="<h1>修改后的div</h1>";
}
</script>
浙公网安备 33010602011771号