• JavaScript操作DOM元素的一些基础方法与属性

  ---

  (一)cloneNode()方法

  该方法在使用会返回一个它复制得到后的一个节点副本，传参为boolean类型，如果传递一个true那么它将递归复制当前节点的全部子孙节点,否则它只会复制当前节点。

  "app">
  			<span class="One">
  				你好
  			span>
  			<div class="One">
  				哈哈
  			div>
  			<p class="Two">
  				不好
  			p>
  		

• <script>
• let a = document.querySelector('#app') //获取id为app的第一个DOM元素
• let b = a.cloneNode(true);
• console.log(b);
• let c = a.cloneNode(false);
• console.log(c);
• let d = a.cloneNode();
• console.log(d);
• script>


 

（二）childNodes属性

该属性以NodeList的形式返回一个包含该节点的子节点集合，需要注意的是它会返回所有类型的节点包含注释节点和文本节点等。

"app">
			<span class="One">
				<div>你好div>
				<div>456div>
			span>
			<div class="One">
				哈哈
			div>
			<p class="Two">
				不好
			p>
		

<script>

let a = document.querySelector('#app') //获取id为app的第一个DOM元素

console.log(a.childNodes)

script>

 

（三）nodeType属性

nodeType会判断该节点为什么节点，返回一个数值，如果节点是一个元素节点，返回 1。如果节点是属性节点,返回 2。如果节点是一个文本节点，返回 3。如果节点是一个注释节点，返回 8。

"app">
			<span class="One">
				<div>你好div>
				<div>456div>
			span>
			<div class="One">
				哈哈
			div>
			<p class="Two">
				不好
			p>
		

<script>

let a = document.querySelector('#app') //获取id为app的第一个DOM元素

for(let i=0;ichildNodes.length;i++){

console.log(a.childNodes[i].nodeType)

}

script>

 

（四）nodeValue属性

nodeValue会根据节点的类型来返回节点的值，通常用来返回元素的文本。

"app">
			123
			class="One">
				<div>你好div>
				<div>456div>
			
			<div class="One">
				哈哈
			div>
			<p class="Two">
				不好
			p>
		

（五）parentNode属性 

parentNode属性会返回该节点的父节点，如果该节点没有父节点，那么就返回null。

（六） replaceChild方法

replaceChild(a,b)可以将某个子节点替换为另一个。里面必须传递两个参数，前一个a你要插入的节点对象，后一个b你要移除的节点对象。

"app">
			你好
		
		<div id="root">
			不好
		div>
		<script>
			let tmp=document.querySelector('#app')
			let tmpNode=tmp.cloneNode(true)
			root.parentNode.replaceChild(tmpNode,root)
		script>