javeScript学习 008 DOM节点的操作

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>