Javascript DOM 基础篇 01

时间：2014-04-29 09:22:45 收藏：0 阅读：383

DOM基础

DOM是什么

答：文件对象模型（Document Object Model，简称DOM），DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构！来自网络

本节了解了下面知识点：

DOM节点

childNodes nodeType

获取子节点

children

parentNode

例子：点击链接，隐藏整个li

offsetParent

例子：获取元素在页面上的实际位置

DOM节点(2)

首尾子节点

有兼容性问题

firstChild、firstElementChild

lastChild 、lastElementChild

兄弟节点

有兼容性问题

nextSibling、nextElementSibling

previousSibling、previousElementSibling

元素属性操作

第一种：oDiv.style.display=“block”;

第二种：oDiv.style[“display”]=“block”;

第三种：Dom方式

DOM方式操作元素属性

获取：getAttribute(名称)

设置：setAttribute(名称, 值)

删除：removeAttribute(名称)

用className选择元素

如何用className选择元素

选出所有元素

通过className条件筛选

封装成函数

 1 <script>
 2 
 3 function getByClass(oParent,ClassName)
 4 {
 5     var result=[];
 6     var aEle=document.getElementsByTagName(‘*‘);//document 在这里应该可以用oUl代替，不知道是不是浏览器的问题，我这里老调试不出来
 7     for(var i=0; i<aEle.length ; i++)
 8     {
 9         if(aEle[i].className==ClassName)
10         {
11             result.push(aEle[i]);
12             }
13         }
14       return result;
15     }
16 
17 
18 window.onload=function ()
19 {
20     var oUl=document.getElementById(‘ull‘);
21     var oBox=getByClass(oUl,‘box‘);
22     for(var i=0;i<oBox.length;i++)
23     {
24         oBox[i].style.background=‘red‘;
25         }
26     /*var aLi=document.getElementsByTagName(‘li‘);
27     for(var i=0;i<aLi.length;i++)
28     {
29         if(aLi[i].className==‘box‘)
30         {
31             //oLi[i].style.background=‘red‘;
32             aLi[i].style.background=‘red‘;
33 
34             }
35         }*/
36     
37     }
38 
39 
40 </script>
41 
42 <!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
43 
44 <body>
45 <ul id="ul1">
46     <li class="box"></li>
47     <li class="box"></li>
48     <li></li>
49     <li></li>
50     <li></li>
51     <li class="box"></li>
52     <li></li>
53 </ul>
54 
55 </body>

Javascript DOM 基础篇 01,码迷,mamicode.com