JavaScript学习笔记——节点操作

创建节点

    新的标签(元素节点) = document.createElement("标签名");

			var a1 = document.createElement("li");
			//创建一个li标签
			var a2 = document.createElement("abcd");
			//创建一个不存在的名为abcd的标签

			console.log(a1);
			console.log(a2);

			console.log(typeof a1);
			console.log(typeof a2);

插入节点

appendChild

    父节点.appendChild(新的子节点);

• 父节点的最后插入一个新的子节点

insertBefore

    父节点.insertBefore(新的子节点,作为参考的子节点)

• 在参考节点前插入一个新的节点
• 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点

补充：

	<div class="box11">
		<div class="box12">div1</div>
	</div>
		
	<div class="box21">
		<div class="box22">div2</div>
	</div>
	
	<script>
		var box11 = document.getElementsByClassName("box11")[0];
        var box22 = document.getElementsByClassName("box22")[0];
        box11.appendChild(box22);
    </script>

上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。
如果调用方法box11.appendChild(box22)，最后产生的结果是：box22会跑到box11中
（也就是说，box22不在box21里面了）

删除节点

    父节点.removeChild(子节点);

用父节点删除子节点，必须要指定是删除哪个子节点

删除自己：

    node1.parentNode.removeChild(node1);

复制节点（克隆节点）

    要复制的节点.cloneNode();  //括号里不带参数和带参数false，效果是一样的。
​
    要复制的节点.cloneNode(true);

• 不带参数/带参数false：只复制节点本身，不复制子节点
• 带参数true：既复制节点本身，也复制其所有的子节点