操作dom树
** appendChild方法
- 添加子节点到末尾
- 特点：类似于剪切黏贴的效果
<body> <div id="div1"> <ul id="ulid11"> <li>tom</li> <li>mary</li> <li>jack</li> </ul> </div> <div id="div2"> </div> <input type="button" value="add1" onclick="add11();"/> <script type="text/javascript"> function add11() { //得到div2 var div2 = document.getElementById("div2"); //获取ul var ul11 = document.getElementById("ulid11"); //把ul添加到div2里面 div2.appendChild(ul11); } </script> </body>
** insertBefore(newNode,oldNode)方法
- 在某个节点之前插入一个新的节点
- 两个参数
* 要插入的节点
* 在谁之前插入
- 插入一个节点，节点不存在，创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
- 代码
/*
1、获取到li13标签
2、创建li
3、创建文本
4、把文本添加到li下面
5、获取到ul
6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
*/
//获取li3 标签
var li13 = document.getElementById("li13");
//创建li
var li15 = document.createElement("li");
//创建文本
var text15 = document.createTextNode("董小宛");
//把文本添加到li下面 appendChild
li15.appendChild(text15);
//获取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蝉</li>之前添加 <li>董小宛</li>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);
*** 不存在 没有insertAfter()方法
<body> <ul id="ulid21"> <li id="li11">西施</li> <li id="li12">王昭君</li> <li id="li13">貂蝉</li> <li id="li14">杨玉环</li> </ul> <input type="button" value="remove" onclick="insert1();"/> <script type="text/javascript"> //删除<li id="li24">杨玉环</li> function insert1() { /* 1、获取到li24标签 2、获取父节点ul标签 3、执行删除（通过父节点删除） */ //获取li3 标签 var li13 = document.getElementById("li13"); //创建li var li15 = document.createElement("li"); //创建文本 var text15 = document.createTextNode("董小宛"); //把文本添加到li下面 appendChild li15.appendChild(text15); //获取到ul var ul21 = document.getElementById("ulid21"); //在<li>貂蝉</li>之前添加 <li>董小宛</li> //insertBefore(newNode,oldNode) ul21.insertBefore(li15,li13); } </script> </body>
** removeChild方法：删除节点
- 通过父节点删除，不能自己删除自己
- /*
1、获取到li24标签
2、获取父节点ul标签
3、执行删除（通过父节点删除）
*/
<body> <ul id="ulid31"> <li id="li21">西施</li> <li id="li22">王昭君</li> <li id="li23">貂蝉</li> <li id="li24">杨玉环</li> </ul> <input type="button" value="remove" onclick="remove1();"/> <script type="text/javascript"> //删除<li id="li24">杨玉环</li> function remove1() { /* 1、获取到li24标签 2、获取父节点ul标签 3、执行删除（通过父节点删除） */ //获取li标签 var li24 = document.getElementById("li24"); //获取父节点 //两种方式 1、通过id获取 ； 2、通过属性 parentNode获取 var ul31 = document.getElementById("ulid31"); //删除（通过父节点） ul31.removeChild(li24); } </script> </body>
** replaceChild(newNode,oldNode)方法: 替换节点
- 不能自己替换自己，通过父节点替换
- 两个参数
** 第一个参数：新的节点（替换成的节点）
** 第二个参数：旧的节点（被替换的节点）
<body> <ul id="ulid41"> <li id="li31">紫衫龙王</li> <li id="li32">白眉鹰王</li> <li id="li33">金毛狮王</li> <li id="li34">青翼蝠王</li> </ul> <input type="button" value="replace" onclick="replace1();"/> <script type="text/javascript"> //<li id="li34">青翼蝠王</li>替换 <li>张无忌</li> function replace1() { /* 1、获取到li34 2、创建标签li 3、创建文本 4、把文本添加到li下面 5、获取ul标签（父节点） 6、执行替换操作 （replaceChild(newNode,oldNode)） */ //获取li34 var li34 = document.getElementById("li34"); //创建li var li35 = document.createElement("li"); //创建文本 var text35 = document.createTextNode("张无忌"); //把文本添加到li下面 li35.appendChild(text35); //获取ul var ul41 = document.getElementById("ulid41"); //替换节点 ul41.replaceChild(li35,li34); } </script> </body>
** cloneNode(boolean): 复制节点
<body> <ul id="ulid41"> <li id="li31">紫衫龙王</li> <li id="li32">白眉鹰王</li> <li id="li33">金毛狮王</li> <li id="li34">青翼蝠王</li> </ul> <div id="divv"> </div> <input type="button" value="copy" onclick="copy1();"/> <script type="text/javascript"> function copy1() { //把ul列表复制到另外一个div里面 /* 1、获取到ul 2、执行复制方法 cloneNode方法复制 true 3、把复制之后的内容放到div里面去 ** 获取到div ** appendChild方法 */ //获取ul var ul41 = document.getElementById("ulid41"); //复制ul，放到类似剪切板里面 var ulcopy = ul41.cloneNode(true) //获取到div var divv = document.getElementById("divv"); //把副本放到div里面去 divv.appendChild(ulcopy); } </script> </body>
** 操作dom总结
* 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换