DOM应用
父级.removeChild(子节点);
父级.appendChild(子节点);
父级.insertBefore(子节点, 在谁之前);
创建元素：
1 <script> 2 window.onload = function(){ 3 var oBtn=document.getElementById('btn1'); 4 var oUl=document.getElementById('ul1'); 5 var oTxt=document.getElementById('txt1'); 6 7 oBtn.onclick=function (){ 8 var oli = document.createElement('li'); 9 var ali = document.getElementsByTagName('li'); 10 11 oli.innerHTML = oTxt.value; 12 if(ali.length>0){ 13 oUl.insertBefore(oli, ali[0]); 14 }else{ 15 oUl.appendChild(oli); 16 } 17 } 18 } 19 </script> 20 </head> 21 22 <body> 23 <input id="txt1" type="text"/> 24 <input id="btn1" type="button" value="创建li"/> 25 <ul id="ul1"> 26 </ul> 27 </body>
文档碎片的使用：
1 <script> 2 window.onload=function () 3 { 4 var oUl=document.getElementById('ul1'); 5 var oFrag=document.createDocumentFragment(); 6 7 for(var i=0;i<10000;i++) 8 { 9 var oLi = document.createElement('li'); 10 11 oFrag.appendChild(oLi); 12 } 13 14 oUl.appendChild(oFrag); 15 }; 16 17 </script> 18 </head> 19 20 <body> 21 <ul id="ul1"> 22 </ul>
childNodes nodeType
获取子节点
children parentNode
例子：点击链接，隐藏整个li
offsetParent
例子：获取元素在页面上的实际位置
firstChild、firstElementChild、lastChild 、lastElementChild的使用
1 <script> 2 window.onload=function () 3 { 4 var oUl=document.getElementById('ul1'); 5 6 //IE6-8 7 //oUl.firstChild.style.background='red'; 8 9 //高级浏览器 10 //oUl.firstElementChild.style.background='red'; 11 12 if(oUl.firstElementChild) 13 { 14 oUl.firstElementChild.style.background='red'; 15 } 16 else 17 { 18 oUl.firstChild.style.background='red'; 19 } 20 }; 21 </script> 22 </head> 23 24 <body> 25 <ul id="ul1"> 26 <li>1</li> 27 <li>2</li> 28 <li>3</li> 29 </ul> 30 </body>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述