<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0
padding: 0
}
div{
text-align: center
}
.head, .nav ,.content, .foot{
width: 600px
margin: 0 auto
}
.head{
height: 100px
margin-bottom: 4px
border: 2px solid purple
margin-top: 4px
}
.nav{
height: 60px
margin-bottom: 4px
border: 2px solid purple
}
.content{
width: 604px
margin-bottom: 4px
}
.left1, .left2{
width: 124px
height: 200px
border: 2px solid purple
}
.left1{
margin: 0 4px 4px 0
}
.left{
float: left
}
.right{
float: right
}
.right-top, .right-middle{
height: 130.67px
width: 468px
border: 2px solid purple
margin-bottom: 4px
}
.right-bottom-left, .right-bottom-right{
height: 130.67px
width: 230px
border: 2px solid purple
float: right
}
.right-bottom-left{
margin-left: 4px
}
.foot{
clear: both
border: 2px solid purple
height: 80px
}
.clear{
clear: both
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="nav">nav</div>
<div class="content">
<div class="left">
<div class="left1"></div>
<div class="left2"></div>
</div>
<div class="right">
<div class="right-top"></div>
<div class="right-middle"></div>
<div class="right-bottom-left"></div>
<div class="right-bottom-right"></div>
</div>
<div class="clear"></div>
</div>
<div class="foot">foot</div>
</body>
</html>
使用JavaScript *** 作页面内容（DOM）可以通过以下方法实现：
1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素，然后使用appendChild()或者insertBefore()方法将其添加到页面中。
// 创建新的段落元素
var newP = document.createElement("p")
// 为段落赋值
newP.innerHTML = "这是新添加的段落"
// 找到需要添加新元素的父元素
var parent = document.getElementById("myDiv")
// 将新元素添加到父元素中
parent.appendChild(newP)
2、修改: 可以使用JavaScript中的getElementById()或者getElementsByTagName()方法来获取页面中的元素，然后使用innerHTML或者innerText属性来修改其中的内容。
// 通过id获取需要修改的元素
var myP = document.getElementById("myP")
// 修改元素的内容
myP.innerHTML = "这是修改后的段落"
3、删除: 可以使用JavaScript中的removeChild()或者remove()方法来删除页面中的元素
// 通过id获取需要删除的元素
var myP = document.getElementById("myP")
// 找到父元素
var parent = myP.parentNode
// 从父元素中删除该元素
parent.removeChild(myP)
这是一种简单的方法，在实际应用中，使用JavaScript对页面进行 *** 作还需要考虑到很多的因素，如浏览器兼容性、性能优化等。最好使用一些框架或库来帮助我们简化这些 *** 作，例如jQuery、React、Vue等。总之，通过熟练掌握JavaScript和相关框架或库的使用，可以有效地 *** 作页面内容并实现丰富的交互效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）