H5基础知识第十二课时(节点的查看、添加和删除)

1.查看节点

childNodes 获取当前元素节点的所有节点

firstChild 获取当前元素节点的第一个子节点

lastChild 获取到哪个区元素节点的最后一个子节点

ownerDocument 获取该节点的文档根节点

parentNode 获取当前节点的父节点

previousSibling 获取当前节点的前一个同级节点

nextSibling 获取当前节点的后一个同级节点

attributes 获取当前元素节点的所有属性节点集合

<table>

<tr>

<td id="t1">1</td>

<td>2</td>

<td>3</td>

</tr>

</table>

<script>

var t1=document.getElementById("t1");

// 获取父元素节点

var tr=t1.parentNode;

tr.style.backgroundColor="yellow";

// 获取子元素节点

var t3=tr.lastElementChild;

t3.style.color="red";

// 前一个元素节点

var t2=t3.previousElementSibling;

t2.style.color="blue";

</script>

2.创建和增加节点的方法

createElement(): 创建节点

appendChild(): 末尾追加方式插入节点

insertBefore(): 在指定节点前插入新节点

cloneNode(true/fals): 克隆节点 当为true是将被克隆的节点内容一起克隆 为fals或为空时，只克隆节点

<div id="d"></div>

<div id="s">sweed</div>

<script>

var d=document.getElementById("d");

<!--创建一个节点-->

var a=document.createElement('a');

a.href="JS05.html";

a.innerText="对对对";

// 在末尾添加节点

d.appendChild(a);

var p=document.createElement('p');

p.innerText="dgg";

// 在a节点前添加节点

d.insertBefore(p,a);

var s=document.getElementById("s");

// 克隆节点

var s1=s.cloneNode(true);

d.appendChild(s1);

</script>

3.删除和替换节点

removeChild():删除节点

replaceChild(): 替换节点