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>
View Code

文档碎片的使用:

 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>
View Code
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>
View Code

 

你可能感兴趣的:(dom)