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
时间： 2024-12-05 16:20:18