移動網(wǎng)站建設(shè)方面廊坊百度關(guān)鍵詞優(yōu)化
- 說明：該文屬于 大前端全棧架構(gòu)白寶書專欄，目前階段免費，如需要項目實戰(zhàn)或者是體系化資源，文末名片加V！
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作經(jīng)驗, 從事過全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前在公司擔(dān)任研發(fā)部門CTO。
- 榮譽：2022年度博客之星Top4、2023年度超級個體得主、谷歌與亞馬遜開發(fā)者大會特約speaker、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者。
- 🏆 白寶書系列
- 🏅 啟示錄 - 攻城獅的自我修養(yǎng)
- 🏅 Python全棧白寶書
- 🏅 ChatGPT實踐指南白寶書
- 🏅 產(chǎn)品思維訓(xùn)練白寶書
- 🏅 全域運營實戰(zhàn)白寶書
- 🏅 大前端全棧架構(gòu)白寶書
文章目錄
- ? 節(jié)點操作
- 🌟 節(jié)點的創(chuàng)建、移除、克隆
- ? 節(jié)點的創(chuàng)建
- ? 節(jié)點創(chuàng)建操作實例
- ? 節(jié)點的移動
- ? 節(jié)點的刪除
- ? 節(jié)點的克隆
? 節(jié)點操作
🌟 節(jié)點的創(chuàng)建、移除、克隆
? 節(jié)點的創(chuàng)建
document.createElement()方法用于創(chuàng)建一個指定tagname的HTML元素但是新創(chuàng)建出來的節(jié)點是“孤兒節(jié)點”，
它并沒有被掛載到DOM樹上，我們無法看見它必須繼續(xù)使用
appendChild()或insertBefore()方法將孤兒節(jié)點插入到DOM樹上。
appendchild()，就是追加一個子節(jié)點的意思。任何已經(jīng)在DOM樹上的節(jié)點，都可以調(diào)用appendChild()方法，它可以將孤兒節(jié)點掛載到它的內(nèi)部，成為它的最后一個子節(jié)點。語法：
父節(jié)點.appendChild(孤兒節(jié)點)；
insertBefore()，就是在前方插入節(jié)點的意思。任何已經(jīng)在DOM樹上的節(jié)點，都可以調(diào)用insertBefore()方法，它可以將孤兒節(jié)點掛載到它的內(nèi)部，成為它的“標(biāo)桿子節(jié)點”之前的節(jié)點語法：
父節(jié)點.insertBefore(孤兒節(jié)點，標(biāo)桿節(jié)點);
示例代碼：
<body><div id="box"><p>段落1</p><p>段落2</p><p>段落3</p></div><script>//定義節(jié)點變量，獲取div標(biāo)簽var oBox = document.getElementById('box');//定義節(jié)點變量，獲取p標(biāo)簽var oPs = oBox.getElementsByTagName('p');//創(chuàng)建一個孤兒節(jié)點pvar oP = document.createElement('P');oP.innerHTML = '測試' //修改孤兒節(jié)點的內(nèi)容 oBox.appendChild(oP); //上樹--加到最后一個子節(jié)點//再創(chuàng)建一個孤兒節(jié)點pvar oP1 = document.createElement('p');oP1.innerHTML = '插入標(biāo)桿節(jié)點之前'; //修改孤兒節(jié)點的內(nèi)容oBox.insertBefore(oP1, oPs[1]); //上樹--插入到編號為1的p標(biāo)簽之前</script>
</body>
? 節(jié)點創(chuàng)建操作實例
題目一：請動態(tài)創(chuàng)建出一個20行12列的表格
題目分析：使用for循環(huán)語句，循環(huán)創(chuàng)建20次tr，循環(huán)內(nèi)嵌套一個for循環(huán)，創(chuàng)建12次td
代碼如下：
<body><div id="box"></div><script>//請動態(tài)創(chuàng)建出一個20行12列的表格var oBox = document.getElementById('box');//創(chuàng)建節(jié)點---tablevar oTable = document.createElement('table');oBox.appendChild(oTable); //插入table標(biāo)簽//創(chuàng)建節(jié)點---trfor (var i = 1; i <= 20; i++) {var oTr = document.createElement('tr');oTable.appendChild(oTr);//創(chuàng)建節(jié)點---tdfor(var j = 1; j <= 12; j++) {var oTd = document.createElement('td');oTr.appendChild(oTd);}}</script>
</body>
題目二：請制作九九乘法表（利用DOM節(jié)點操作）
題目分析：和上面的題目一樣，創(chuàng)建表格，然后在表格里面修改內(nèi)容，例如1*1=2…；需要注意的是九九乘法表不是一個方方正正的表格，而是每一行的列數(shù)都比前一行多一個，所以循環(huán)嵌套的時候，循環(huán)的次數(shù)要思考清楚
代碼如下：
<body><div id='box'></div><script>//請制作九九乘法表（利用DOM節(jié)點操作）var oBox = document.getElementById('box');//創(chuàng)建節(jié)點---tablevar oTable = document.createElement('table');oBox.appendChild(oTable);//創(chuàng)建節(jié)點---trfor (var i = 1; i <= 9; i++) {var oTr = document.createElement('tr');oTable.appendChild(oTr);//創(chuàng)建節(jié)點---tdfor (var j = 1; j <= i; j++) { //數(shù)以j的循環(huán)次數(shù)var oTd = document.createElement('td');oTd.innerHTML = j + '*' + i + '=' + i*j; //填入內(nèi)容oTr.appendChild(oTd);}}</script>
</body>
? 節(jié)點的移動
如果將已經(jīng)掛載到DOM樹上的節(jié)點成為appendChild()或者insertBefore()的參數(shù)，這個節(jié)點將會被移動
語法：
新父節(jié)點.appendChild(已經(jīng)有父親的節(jié)點);語法：
新父節(jié)點.insertBefore(已經(jīng)有父親的節(jié)點，標(biāo)桿子節(jié)點);這意味著一個節(jié)點
不能同時位于DOM樹的兩個位置
示例代碼：
用appenChild()移動：
<body><div id="box1"><p id="para">我是段落</p></div><div id="box2"></div><script>//將#box1中的p標(biāo)簽移動到#box2中var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var para = document.getElementById('para');//用appendChild()移動box2.appendChild(para);</script>
</body>
用insertBefore()移動：
<body><div id="box1"><p id="para">我是段落</p></div><div id="box2"><p>我是box2原有段落</p><p>我是box2原有段落</p><p>我是box2原有段落</p><p>我是box2原有段落</p></div><script>//將#box1中的p標(biāo)簽移動到#box2中var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var para = document.getElementById('para');var ps_inbox2 = box2.getElementsByTagName('p');//用insertBefore()移動box2.insertBefore(para, ps_inbox2[0]);</script>
</body>
? 節(jié)點的刪除
removeChild()方法從DOM中刪除一個子節(jié)點語法：
父節(jié)點.removeChild(要刪除的子節(jié)點)注意：節(jié)點不能主動刪除自己，必須由父節(jié)點刪除它
示例代碼：
<body><div id="box"><p>我是段落0</p><p>我是段落1</p><p>我是段落2</p></div><script>//刪除#box里的第二個段落var box = document.getElementById('box');var ps = box.getElementsByTagName('p');box.removeChild(ps[1]);</script>
</body>
? 節(jié)點的克隆
cloneNode()方法可以克隆節(jié)點，克隆出的節(jié)點是“孤兒節(jié)點”語法：
var 孤兒節(jié)點 = 老節(jié)點.cloneNode();還可以往
cloneNode()方法里傳入?yún)?shù)一個布爾值參數(shù)表示是否采用深度克隆，傳入true則深度克隆，該節(jié)點的所有后代節(jié)點都會被克隆；如果為false,則只克隆該節(jié)點本身。語法：
var 孤兒節(jié)點 = 老節(jié)點.cloneNode(true);
示例代碼：
<body><div id="box1"><ul><li>python</li><li>java</li><li>c</li><li>javascript</li></ul></div><div id="box2"></div><script>//將#box1中的列表克隆到box2中var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var ul_inbox1 = box1.getElementsByTagName('ul')[0]; //注意用getElementsByTagName得到的是一個數(shù)組，要用下標(biāo)才能取到里面的值//克隆var ul = ul_inbox1.cloneNode();//上樹box2.appendChild(ul);</script>
</body>
