JS第一节笔记（10）————JS节点操作

节点操作

节点的查找

<div>
	<p class="one">
		<span></span>
	</p>
	<p class="two"></p>
</div>

var box=document.getElementByTagName("div")
var one=document.getElementByClassName("one")
var two=document.getElementByClassName("two")
console.log(one.parentNode)//当前节点的父节点
console.log(one.childNodes)//当前节点的所有子节点，包含文本节点（如“回车”）
console.log(one.children)//当前节点的所有子元素节点
console.log(one.firstChidren)//当前子节点的第一个子节点（包括文本节点）
console.log(one.lastElementChild)//当前节点的最后一个子元素节点
console.log(one.lastChild)//当前节点的最后一个子元素节点（包括文本节点）
console.log(one.previousSibling)//当前节点的前一个兄弟节点包含文本节点
console.log(one.previousElementSibling)//当前节点的前一个兄弟节点
console.log(one.nextSibling)//当前节点的后一个兄弟节点（包含文本节点）
console.log(one.nextElementSibling)//当前节点的后一个兄弟元素节点

创建节点

var p =document.creatElement(节点的名字)//创建节点
	p.innerHTML=""
	p.innerText=""

innerHTML 往节点内添加或者替换内容（文本或者元素）
innerText 往节点内添加或者替换内容（只有文本）

<div>
	<p>  </p>
</div>

var box=document.getElmentsTagName("div")
	div.appendChild("p")
	div.insertBefore("p,目标节点（如div.firstChild）")
	div.cloneNode(true/false)
	div.removeChild("需要删除的节点")

div.appendChild(“p”)
父节点.appendChild(“新节点”) 往父节点的末尾添加新节点
div.insertBefore(“p,目标节点（如div.firstChild）”)

div.insertBefore(“p,目标节点（如div.firstChild）”)
父节点.insertBefore(“新节点，目标节点”)
将新节点添加到目标节点的前面

div.cloneNode(true/false)
克隆节点
如果括号里是true，将该节点及其所有的子节点全部复制
如果括号里是false，将该点复制，不包含子节点

div.removeChild(“需要删除的节点”)
通过父节点删除子节点