html03

来源：互联网发布：lcd1602与单片机连接图编辑：程序博客网时间：2024/04/27 06:25
<!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 odiv =document.getElementById("div3");            var node5 = odiv.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>    <div id="div1" style="position: relative">        <div id="div2">            <div id="div3"></div>        </div>    </div></body></html>
0 0