DOM節點的操作

阿新 • • 發佈：2022-03-27

1，建立元素節點 document.create...

建立後的任意節點都需要新增到 body 中才能夠看到，產生實際作用；

<script>
    //建立屬性節點，必須要給屬性節點賦值
	document.createAttribute('屬性名').value = '屬性值' 
    
    //建立元素節點，第一個引數為需要傳遞的 標籤名，第二個引數為選項可以省略
    document.createElement('元素名')	
    document.createElement('div')	//建立一個元素 div；返回的型別是一個 element
    div.className = 'hello'		//給建立的元素指定對應的class屬性值
    div.innerText = '你吃飯了麼'		//給建立的 div 設定文字
    
    //建立文字節點
    document.createTextNode('文字內容')
</script>

2，新增子節點

元素，文字節點：.appendChild( )；屬性節點是設定；

<script>
    //屬性節點，對於屬性節點的新增是 對元素的設定；無法直接加屬性節點；
    //對於先存在的，無法直接賦值；
    var letter = document.createElement('p')
    var text = document.createAttribute('hello')
    p.setAttribute('bb','helo')		//給元素設定 屬性；不是屬性節點；（補充方便記憶）
    letter.setAttributeNode(text)		 //設定屬性節點（一般不用）建議使用 setAttribute(設定屬性)
    letter.attributes.setNamedItem(text)  // 通過 NameNodeMap 的方法，設定屬性節點
    
    //元素節點 新增子節點
	var body =  document.getElementsByTagName('body')[0] 	//獲取body
    body.appendChild(div) 						//給body新增一個子節點
    
    //文字節點 新增
    var text = document.createTextNode('hello 你好') 		//建立好文字節點
    p.appendChild(text) 				//將文字節點新增到p標籤 從後面新增
</script>

3，插入子節點

文字節點：.insertBefore( )；屬性節點是設定；元素節點是新增：.appendChild( )；

<script>
	// insertBefore 新增子節點到某個子節點前面 第一個是你需要新增的節點 第二個是子節點
    //屬性節點 也是設定屬性節點  同上
    
 	//元素節點 新增兒子關係
    //同 html 標籤巢狀類似
    var body =  document.getElementsByTagName('body')[0]
    var text = document.createElement('div')	//建立 div 元素節點
    var letter = document.createElement('li')	//建立 li 元素節點
    body.appendChild(text)
    text.appendChild(letter)		//將 li 放入 div 中
    
    //文字節點 插入子節點
    var text = document.createTextNode('aaa')
    var hello = document.createTextNode('bbb')
    p.insertBefore(hello,text) 	//返回   bbbaaa
    //將hello對應的節點新增到text節點之前 裡面的倆個節點都會存在於p這個節點中
</script>

4，刪除子節點

.removeChild( ) 該方法適用於元素和文字節點操作；屬性節點用.removeAttributeNode( )

<script>
    //屬性節點 刪除子屬性
        var body =  document.getElementsByTagName('body')[0]
        var p = document.createElement('p')
        var div = document.createAttribute('aa')	//建立屬性節點
        div.value = 'hello'		//給屬性設定 屬性值
        body.appendChild(p)
        p.setAttributeNode(div) 	//設定屬性節點（一般不用）建議使用 setAttribute(設定屬性)
        p.removeAttributeNode(div)	//將屬性節點移除掉
    
 	//元素節點 解除兒子關係
    	var body =  document.getElementsByTagName('body')[0]
    	var text = document.createElement('div')	//建立 div 元素節點
    	var letter = document.createElement('li')	//建立 li 元素節點
    	text.appendChild(letter)		//將 li 先放入 div 中
    	body.appendChild(text)
    	text.removeChild(letter)		//將 li 從 div 中刪除
    
    //文字節點 插入子節點
     	var p = document.createElement('p')  //建立一個存放文字節點的元素節點檢視效果
     	var text = document.createTextNode('aa')	//建立文字節點 text
     	var letter = document.createTextNode('bb')	//建立文字節點 text
     	body.appendChild(p)
     	p.appendChild(text)
     	p.insertBefore(letter,text)
     	p.removeChild(text)		//刪除哪個 文字節點 就輸入它  這裡返回<p>bb</p> 
</script>

5，替換子節點

<script>
    //屬性節點的替換  還是相當於設定操作；  無法直接替換，因為它是隻讀的，無法直接修改，需要先刪除，在設定；
    
 	//元素節點 利用關係替換
    	var body =  document.getElementsByTagName('body')[0]
    	var text = document.createElement('div')	//建立 div 元素節點
    	var letter = document.createElement('li')	//建立 li 元素節點
        var p = document.createElement('p')			//建立 p 元素節點
    	text.appendChild(letter)		//將 li 先放入 div 中
    	body.appendChild(text)
    	text.replaceChild(p,letter) 		//將 letter 替換為 p;  注意：需要替換的元素節點放在前面；
    
    //文字節點 替換子節點
        var p = document.createElement('p') 
        p.innerText = '我是p標籤'		//使用 .innerText  替換掉文字內容
        p.style.background = 'red'
</script>