javascript代码实例教程-html03

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-html03脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
 <!DOCTYPE htML>   <html lang="en">   <head>       <;meta charset="UTF-8">       <tITle></title>       <script>           window.onload = function(){               /*获取到第一个子节点*/               VAR oul= document.getElementById("ul");               /*FirstChild在IE下面获取到的第一个元素节点,DOM浏览器下面获取到的是第一个子节点*/               /*var node = oul.firstChild;               alert(node.nodeName);               console.info(node.nodeName);*/                  /*处理兼容性问题*/               var node = oul.firstElementChild || oul.firstChild;                  console.info(node.nodeName);                     /*获取到最后一个子节点*/               var oli = oul.lastElementChild;               oli.style.backgroundColor = "red";                     /*获取到前一个兄弟节点*/               var node2 = oul.previousElementSibling;               console.info(node2);                  /*获取到后一个兄弟节点*/               var node3 = oul.nextElementSibling;               console.info(node3);                  /*获取到父节点*/               var oli1 = document.getElementById("li1");               var node4 = oli1.parentNode;               console.info(node4);                     /*获取到定位父级*/               var op =document.getElementById("P3");               var node5 = op.offsetParent;               console.info(node5);                     /*创建一个节点*/               var oli2 = document.createElement("li");               oli2.innerHTML ="韦德";               console.info(oli);                  /*nodeValue:只针对文本节点*/               console.info("newli"+oli2.firstChild.nodeValue);                  /*将创建好的节点放入dom树结构,默认添加在所有节点的最后*/              /* oul.appendChild(oli2);*/               oul.insertBefore(oli2,oli1);  /*第一个参数是要加入的节点,第二个参数放的位置*/              }       </script>   </head>   <body>       <h1>天气好</h1>       <ul id="ul">           <li id="li1">新闻</li>           <li>体育</li>           <li>更多</li>          </ul>       <p id="p1" style="position: relative">           <p id="p2">               <p id="p3"></p>           </p>       </p>   </body>   </html>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-html03全部内容,希望文章能够帮你解决javascript代码实例教程-html03所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。