层级关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级关系</title> </head> <body> <!--元素不换行的样式--> <!--<ul id="ul"><li>青岛理工</li><li id="li2">山东科技</li><li>清华大学</li></ul>--> <ul id="ul"> <li>青岛理工</li> <li id="li2" class="">山东科技</li> <li>清华大学</li> </ul> </body> <script> /*parentNode:通过子元素获取父元素*/ var li2 = document.getElementById("li2"); var ul = li2.parentNode; console.log(ul); /*childNodes:通过父元素去查找所有的子元素, 有bug，元素和元素之间不允许换行*/ var ul = document.getElementById("ul"); var lis = ul.childNodes; console.log(lis); /*firstChild：通过父元素去查找第一个子元素 * 有bug，元素和元素之间不允许换行 * firstElementChild:通过父元素去查找第一个子元素， * 允许元素换行*/ var ul = document.getElementById("ul"); // var li1 = ul.firstChild; var li1 = ul.firstElementChild; console.log(li1); /*lastChild：通过父元素去查找最后一个子元素 * 有bug，元素和元素之间不允许换行 * lastElementChild:通过父元素去查找最后一个子元素， * 允许元素换行*/ var ul = document.getElementById("ul"); // var li1 = ul.lastChild; var li1 = ul.lastElementChild; console.log(li1); var li2 = document.getElementById("li2"); // var li1 = li2.previousSibling; /*获取前一个同级节点*/ var li1 = li2.previousElementSibling; /*无bug*/ // var li3 = li2.nextSibling; /*获取后一个同级节点*/ var li3 = li2.nextElementSibling; /*无bug*/ console.log(li1); console.log(li3); </script> </html>
创造和增加节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创造和增加节点</title> </head> <body> <img src="../../../img/f3_Android1.png" alt="" id="oldImg"> <button onclick="create()">新增图片</button> <button onclick="clone()">复制图片</button> </body> <script> /*创造和增加节点*/ function create() { var newImg = document.createElement("img"); newImg.src = "../../../img/f3_Android2.png"; var oldImg = document.getElementById("oldImg"); document.body.insertBefore(newImg, oldImg); } function clone() { var oldImg = document.getElementById("oldImg"); var newImg = oldImg.cloneNode(false); document.body.appendChild(newImg); } </script> </html>
作业练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> </head> <body> <ul id="ul"> <!--<li>列表项0</li>--> <li id="li1">列表项1</li> <li>列表项2</li> <li id="li3">列表项3</li> <!--<li>列表项3</li>--> <li>列表项4</li> <li>列表项5</li> <!--<li>列表项6</li>--> </ul> <button onclick="insert1()">新增列表项0</button> <button onclick="clone3()">再增列表项3</button> <button onclick="insert6()">新增列表项6</button> </body> <script> function insert1() { var li0 = document.createElement("li"); //创建一个新的列表项 li0.innerHTML = "列表项0"; //给新的列表项填充内容 var li1 = document.getElementById("li1"); //找到li1 var ul = document.getElementById("ul"); //找到ul ul.insertBefore(li0, li1); //在li1前边加li0，就是排序 } function insert6() { var li6 = document.createElement("li"); //新增列表项 li6.innerHTML = "列表项6"; //列表项填内容 var ul = document.getElementById("ul"); //找到ul ul.appendChild(li6); //在ul后边新增li6，即把li6贴在最后边 } function clone() { var li3 = document.getElementById("li3"); /*clone(): * 参数为false：只复制标签，标签内的内容和子元素不复制 * 参数为true：不仅复制标签，标签内的内容和子元素也复制*/ var newLi3 = li3.cloneNode(true); ul.insertBefore(newLi3, li3); } </script> </html>
remove和replace节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>remove和replace节点</title> </head> <body> <button onclick="remove()">删除图片</button> <button onclick="replace()">替换图片</button> <img src="../../../img/f3_Android1.png" alt="" id="img1"> </body> <script> function remove() { var img = document.getElementById("img1"); document.body.removeChild(img) } function replace() { var img = document.getElementById("img1"); var newImg = document.createElement("img"); newImg.src = "../../../img/f3_Android3.png"; document.body.replaceChild(newImg, img); //用newImg替换img } </script> </html>