2.10DOM和BOM插入/移除/克隆

1.DOM创建/插入/移除/克隆

1.1创建元素

前面我们使用过 document.write 方法写入一个元素：
这种方式写起来非常便捷，但是对于复杂的内容、元素关系拼接并不方便；
它是在早期没有 DOM 的时候使用的方案，目前依然被保留了下来；
那么目前我们想要插入一个元素，通常会按照如下步骤：
步骤一：创建一个元素；
步骤二：插入元素到 DOM 的某一个位置；
创建元素：document.createElement (tag)
javascript
var boxEl = document.querySelector(".box")
var h2El = document.createElement("h2")
h2El.innerHTML = "我是标题"
h2El.classList.add("title")
boxEl.append(h2El)

1.2 插入元素

插入元素的方式如下：
node.append (...nodes or strings) —— 在 node 末尾插入节点或字符串，
node.prepend (...nodes or strings) —— 在 node 开头插入节点或字符串，
node.before (...nodes or strings) —— 在 node 前面插入节点或字符串，
node.after (...nodes or strings) —— 在 node 后面插入节点或字符串，
node.replaceWith (...nodes or strings) —— 将 node 替换为给定的节点或字符串。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span class="span">我是span1</span><div class="box"><span class="span">我是span2</span>我是box元素</div><script>var boxEl = document.querySelector(".box")//1.通过innerHTML（不推荐）// boxEl.innerHTML = "<h2 class='title'>我是标题</h2>"//2.真实创建一个DOM对象var h2El = document.createElement("h2")h2El.className = "title"h2El.classList.add("active")h2El.textContent="我是标题2"//将元素插入boxEl// boxEl.append(h2El)// boxEl.prepend(h2El)//将元素插入到第二个span元素之后var spanEl =boxEl.querySelector("span")spanEl.after(h2El)</script>
</body>
</html>

1.3移除和克隆元素

移除元素我们可以调用元素本身的 remove 方法：
setTimeout(() => {h2El.remove()
}, 2000);

如果我们想要复制一个现有的元素，可以通过 cloneNode 方法：
可以传入一个 Boolean 类型的值，来决定是否是深度克隆；
深度克隆会克隆对应元素的子元素，否则不会；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"><h2 id="title">我是标题</h2><div class="container"><p><span class="keyword">hehehhe</span>我是段落，<span class="keyword">chen</span>哈哈哈哈</p></div></div><script>// //一、通过导航获取// //1.拿到body// var bodyEl = document.body// //2.拿到box// var boxEl = bodyEl.firstElementChild// //3.拿到container// var containerEl = boxEl.children[1]// //4.拿到p// var pEl = containerEl.children[0]// //5.拿到keyword// var spanEl = pEl.children[0]// console.log(spanEl)//二、直接获取到keyword//1.通过className获取元素// var keywordEls = document.getElementsByClassName("keyword")//修改第一个// keywordEls[0].style.color = "red"//修改所有的// for (var i = 0; i < keywordEls.length; i++) {//   keywordEls[i].style.color = "red"// }//2.通过id获取元素// var titleEl = document.getElementById("title")// titleEl.style.color = "orange"//三、querySelector：通过选择器查询// var keywordEl = document.querySelector(".keyword")// console.log(keywordEl)//keywordEls是对象，可迭代的//可迭代对象：String/数组/节点的列表var keywordEls = document.querySelectorAll(".keyword")for (var el of keywordEls) {console.log(el)}var title1 = document.querySelector("#title")title1.style.color = "red"</script>
</body>
</html>

1.4 旧的元素操作方法

parentElem.appendChild(node)：
在 parentElem 的父元素最后位置添加一个子元素
parentElem.insertBefore(node, nextSibling)：
在 parentElem 的 nextSibling 前面插入一个子元素；
parentElem.replaceChild(node, oldChild)：
在 parentElem 中，新元素替换之前的 oldChild 元素；
parentElem.removeChild(node)：
在 parentElem 中，移除某一个元素；
现在我们只需要拿到一个元素在后面直接被before要添加的元素即可

2.获取元素的大小-滚动属性

clientWidth: contentWith+padding (不包含滚动条)
clientHeight: contentHeight+padding
clientTop: border - top 的宽度
clientLeft: border - left 的宽度
offsetWidth: 元素完整的宽度
offsetHeight: 元素完整的高度
offsetLeft: 距离父元素的 x
offsetHeight: 距离父元素的 y
scrollHeight: 整个可滚动的区域高度
scrollTop: 滚动部分的高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{height: 50px;width: 50px;overflow: scroll;font-size: 25px;}</style>
</head>
<body><div class="box">奥利弗捡gdgadfafafafefvdmvndemd奥利飞机爱上了发顺丰弗发发发</div><script>//1.获取样式（局限性很强）var boxEl = document.querySelector(".box")// var sizeEl = getComputedStyle(boxEl)// console.log(sizeEl.height,sizeEl.width)// console.log(sizeEl.fontSize)//2.获取更多信息console.log(boxEl.clientWidth)console.log(boxEl.clientHeight)console.log(boxEl.clientLeft)console.log(boxEl.clientTop)console.log(boxEl.offsetWidth)console.log(boxEl.offsetHeight)// console.log(first.offsetLeft)window.onclick = function () {console.log(boxEl.scrollTop)}</script>
</body>
</html>

3.Window大小-滚动-方法

window 的 width 和 height
innerWidth、innerHeight：获取 window 窗口的宽度和高度（包含滚动条）
outerWidth、outerHeight：获取 window 窗口的整个宽度和高度（包括调试工具、工具栏）
documentElement.clientHeight、documentElement.clientWidth：获取 html 的宽度和高度（不包含滚动条）
window 的滚动位置：
scrollX：X 轴滚动的位置（别名 pageXOffset）
scrollY：Y 轴滚动的位置（别名 pageYOffset）
也有提供对应的滚动方法：
方法 scrollBy (x,y)：将页面滚动至相对于当前位置的 (x,y) 位置；

4.滚动+显示隐藏案例练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{background-color: red;height: 100px;}.btn1{position: fixed;right: 20px;bottom: 20px;}.btn2{position:fixed;left:20px;bottom: 20px;/* display: none; */}</style>
</head>
<body><div class="box">我是div元素</div><button class="btn1">滚动位置</button><button class="btn2">回到顶部</button><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><script>//window大小console.log(window.outerHeight)console.log(window.outerWidth)//内容区域大小console.log(innerHeight)console.log(innerWidth)console.log(document.documentElement.offsetHeight)console.log(document.documentElement.offsetWidth)window.onclick = function(){console.log(window.scrollX)console.log(window.scrollY)}window.onscroll = function() {console.log(window.scrollY)}//回到顶部var backBtnEl = document.querySelector(".btn2")backBtnEl.hidden = truewindow.onscroll = function(){if(window.scrollY > 600){// backBtnEl.style.display = "block"backBtnEl.hidden = false//display只能使用元素，如果动画的话需要使用opcity}else{//  backBtnEl.style.display = "none"backBtnEl.hidden = true}}//点击按钮后滚动到某个位置var scrollBtnEl = document.querySelector(".btn1")scrollBtnEl.onclick = function() {window.scrollBy(0, 100) //在原来的位置的基础上面增加100//window.scrollTo(0, 100) //滚动到某一个位置}</script>
</body>
</html>

5.综合DOM小案例

练习一：通过prompt接收用户的输入，根据输入创建一个列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>动态创建列表</h1><ul class="ul1"></ul><script>var ulEl = document.querySelector(".ul1")while(true){var input = prompt("请输入")if(!input){break}var liEl =document.createElement("li")liEl.textContent = inputulEl.append(liEl)}</script>
</body>
</html>

练习二：动态的显示时间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1 class="time">2025-07-24 </h1><script>//String//padStart(参数1，参数2)//参数一：限制的位数//参数二：不足的以什么补齐//封装一个工具函数function padLeft (content, count, padStr){//这里可以先给一个默认值count = count || 2padStr = padStr || "0"content = String(content)return content.padStart(count, padStr)}var timeEl = document.querySelector(".time")setInterval(function(){      var date = new Date()var year = date.getFullYear()var month = padLeft(date.getMonth())var day = padLeft(date.getDate())var hour = padLeft(date.getHours())var minute = padLeft(date.getMinutes())var second = padLeft(date.getSeconds())timeEl.textContent=(`${year}-${month}-${day} ${hour}:${minute}:${second}`)},1000);</script>
</body>
</html>

练习三：倒计时

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.countdown {color: red;font-size: 20px;}.countdown .time {background-color: red;color: #fff;display: inline-block;padding: 5px;border-radius: 5px;}</style>
</head>
<body><div class="countdown"><span class="time hour">03</span><span class="split">:</span><span class="time minute">25</span><span class="split">:</span><span class="time second">42</span></div><script>//1.获取元素var hour1 = document.querySelector(".hour")var minute1 = document.querySelector(".minute")var second1 = document.querySelector(".second")//2.设置内容var endDate = new Date()endDate.setHours(24)endDate.setMinutes(0)endDate.setSeconds(0)endDate.setMilliseconds(0)setInterval(function(){//获取倒计时的小时-分钟-秒钟//12:50:20 =>24:00:00var nowDate = new Date()var intervalTime = Math.floor((endDate.getTime()-nowDate.getTime())/1000)//console.log(intervalTime)//x小时x分钟x秒//125:x百x十xge// var num = 125// console.log(Math.floor(num/10*10))// console.log(Math.floor((num/10)%10))// console.log(Math.floor(num%10))var hour = Math.floor(intervalTime/3600)var minute =Math.floor((intervalTime/60)%60)var second = Math.floor(intervalTime%60)//2.设置内容hour1.textContent = hourminute1.textContent = minutesecond1.textContent = second},1000)</script>
</body>
</html>