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>