溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“DOM節點怎么查詢”，內容詳細，步驟清晰，細節處理妥當，希望這篇“DOM節點怎么查詢”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
1.DOM節點介紹
1.什么是節點
在HTML文檔中，一切都是節點（HTML文檔本身、標簽、屬性、注釋內容、文本）
2.什么是元素
元素在HTML中叫做標簽，在JS的DOM對象中稱為元素（可以理解為標簽的面向對象的叫法）
3.HTML標簽屬于節點的一種，叫做元素節點
4.節點三要素
節點類型：標簽、屬性、注釋、文本
節點名稱：p、div、class（標簽名）
節點的值：one（屬性的值）
/*
1.網頁內容是由標簽組成 ： 不嚴謹的
2.網頁內容由 節點組成 ： 一切內容皆節點
元素(標簽)節點 ： 例如 div標簽
屬性節點 ： 例如 class屬性
文本節點 ： 比如標簽里面的文字
注釋節點 ： 比如HTML中的注釋
3.DOM節點操作重點記住： 元素節點
*/
2.查詢節點方法
1.查詢子元素節點：父元素.children
2.查詢兄弟元素節點：
上一個兄弟元素：元素.previousElementSibling
下一個兄弟元素：元素.nextElementSibling
3.查詢父節點：元素.parentNode
3.節點操作
1.新增節點：document.createElement()
(1)內存 創建空標簽 : let li = document.createElement('標簽名')
(2)設置內容 : li.innerText = '文本'
(3)添加到dom樹 : 父元素.appendChild( 子元素 )
新增到最后面 ： 父元素.appendChild(子元素)
新增到某個元素前面： 父元素.insertBefore(子元素,要加到哪個元素前面)
2.克隆節點：
克隆元素自己 ： 元素.cloneNode(false)
克隆元素自己+后代 ：元素.cloneNode(true)
3.刪除節點：父元素.removeChild( 子元素 )
注意點： 元素只能移除自己的子元素
4.insertBefore實現上移與下移
<body>
<button class="btn1">新增元素到最后面</button>
<button class="btn2">新增元素到li2前面</button>
<button class="btn3">新增元素到最前面</button>
<button class="btn4">li2上移</button>
<button class="btn5">li2下移</button>
<ul>
<li>我是班長1</li>
<li id="li2">我是班長2</li>
<li>我是班長3</li>
<li>我是班長4</li>
<li>我是班長5</li>
</ul>
<script>
/* 新增元素
1.只能新增到最后面 ： 父元素.appendChild( 子元素 )
2.新增到指定元素的前面： 父元素.insertBefore( 子元素,要新增到哪個元素前面 )
*/
let ul = document.querySelector('ul')//父元素
let li2 = document.querySelector('#li2')//li2
//新增元素到最后面
document.querySelector('.btn1').onclick = function(){
//新創建元素
let newLi = document.createElement('li')
newLi.innerText = '我是新來的1'
//新增到最后面
ul.appendChild(newLi)
}
//新增元素到li2前面
document.querySelector('.btn2').onclick = function(){
//新創建元素
let newLi = document.createElement('li')
newLi.innerText = '我是新來的2'
//新增到li2前面
ul.insertBefore( newLi,li2 )
}
//新增父元素到最前面
document.querySelector('.btn3').onclick = function(){
//新創建元素
let newLi = document.createElement('li')
newLi.innerText = '我是新來的3'
//新增最前面 ： 新增到原來的第一個元素的前面
ul.insertBefore( newLi, ul.children[0] )
}
//li2上移
document.querySelector('.btn4').onclick = function(){
/* 上移思路： 元素移動到它哥哥的前面 */
//判斷li2是不是第一個元素，如果是則不能移動
if( li2.previousElementSibling ){
ul.insertBefore( li2, li2.previousElementSibling )
}else{
alert('已經是第一個元素')
}
}
//li2下移
document.querySelector('.btn5').onclick = function(){
/* 下移思路： 元素 移到弟弟的弟弟的前面
弟弟的后面 = 弟弟的弟弟的前面
*/
if( li2.nextElementSibling ){
ul.insertBefore(li2, li2.nextElementSibling.nextElementSibling )
}else{
alert('已經是最后一個元素')
}
}
</script>
讀到這里，這篇“DOM節點怎么查詢”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
