DOM基础
2016-02-03 18:26
701 查看
DOM的基础知识
JavaScript 三个组成部分：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）。下面我来为大家简单介绍一下DOM，希望对大家有所帮助。
首先，来为大家介绍三个名词：标签、元素、节点。我个人感觉这三个名词表示的东西性质是一样的，只是在不同的位置叫不同的名字罢了。标签用于css文件，元素用于js文件，而节点则是用于我们今天所要学习的DOM中。（一）子节点：childNodes
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
<script>
window.onload=function()
{
var oUl=document.getElementById("ul1");
alert(oUl.childNodes.length);
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>上述案例，我们是以无序列表（ul）来介绍节点的。首先，先让我们看一下这个案例的效果图。
由上述的效果图，可以看出：我们在ul里面建立了5个li，而用childNodes显示的ul子节点的个数却为11，与我们理解上有一定的偏差，但这并不意味着出错。在这里，我需要为大家先解释两个名词：文本节点和元素节点。在上述案例中出现的li其实就是元素节点，而用childNodes表示的子节点中既包括元素节点也包括文本节点。那么，什么是元素节点呢？为了方便大家理解，我用下面这张图片来表示一下什么是文本元素。为了区分，我分别用了不同颜色来表示不同的文本元素（本案例中的文本节点为空）。所以由这张图我们可以知道，上述案例ul的子节点中包括5个元素节点（li），6个文本节点（6种不同的颜色），最终用childNodes表示的节点总个数为11。
（二）节点类型：nodeType
从（一）中我们可以知道oUl的第一个子节点（childNodes[0]）是文本节点，第二个字节点（childNodes[1]）是元素节点。再结合上述两张图片的显示，我们就可以明确的知道：1——>元素节点 3——>文本节点。
下面我们结合childNodes和nodeType来写一个小案例：隔行变色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
<script>
window.onload=function()
{
var oUl=document.getElementById("ul1");
//alert(oUl.childNodes[1].nodeType);
var n1=oUl.childNodes.length;
for(var i=0;i<n1;i++)
{
if(oUl.childNodes[i].nodeType==1)
{
if(i%4==3)
{
oUl.childNodes[i].style.background="pink";
}
else
{
oUl.childNodes[i].style.background="#ccc";
}
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
效果如下：
需要提醒注意的地方是：文本元素不能使用style。上述案例中，用childNodes找到的子节点的下标中：0,2,4,6...（偶数）是文本节点，1,3,5,7,9...（奇数）是元素节点，我们是在1,3,5,7...（奇数）上做相关处理的。
（三）子节点：children
children与childNodes的不同之处在于：children只表示元素节点，不表示文本节点。
（四）父节点：parentNode
应用案例：点击链接，隐藏整个li<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
<script>
window.onload=function()
{
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function()
{
this.parentNode.style.display='none';
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>11111 <a href="javascript:;">隐藏</a></li>
<li>22222 <a href="javascript:;">隐藏</a></li>
<li>33333 <a href="javascript:;">隐藏</a></li>
<li>44444 <a href="javascript:;">隐藏</a></li>
<li>55555 <a href="javascript:;">隐藏</a></li>
</ul>
</body>
</html>
原效果图：
点击隐藏22222后：
再点击隐藏33333后
（五）offsetParent：寻找有定位的父节点
在介绍offsetParent之前，我们先回忆一下在css文件中，绝对定位（absolute）是如何确定位置的。复习css：绝对定位，是根据有定位的父集定位的，如果父元素没有定位，就一级一级的往上找，直到找到有定位的父集。如果不存在有定位的父集，则是根据body定位。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
<style>
#div1{width:200px;height:200px;background:gray;}
#div2{width:100px;height:100px;background:pink; position:absolute;left:50px;top:50px;}
</style>
<script>
window.onload=function()
{
};
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>在这个案例中，div1是父级，div2是子级，div2中采用绝对定位（absolute）,而它的父级div1没有定位。
为了观察出div2是根据谁定位的，我们改变一下div1的位置：在style里添加 margin：50px; 我们可以看出：当div1的位置发生改变时，div2的位置并没有随之改变，所以，div2是根据body定位的。
我们再在原demo中给div1添加定位（position：relative；），重复上述操作可以看出，div2的位置跟随div1位置的变化而变化。（证明：略）
下面我们来介绍一下offsetParent的作用：
<script>
window.onload=function()
{
var oDiv2=document.getElementById("div2");
alert(oDiv2.offsetParent);
};
</script>当div1有定位时：
oDiv2的有定位的父级是：HTML中的div元素（div1）
当div1没有定位时：
[b] oDiv2的有定位的父级是：HTML中的body[/b]
[b]（六）首尾子节点[/b]
①首子节点：firstChild我们用无序列表（ul）来写个小例子，用firstChild将ul的首子节点的背景设置成红色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
<script>
window.onload=function()
{
var oUl=document.getElementById("ul1");
oUl.firstChild.style.background="red";
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
但是，从下面的效果图可以看出我们并未如愿以偿的改变ul首子节点的背景颜色。原因是：firstChild存在兼容性问题。（与childNodes有共同问题）------适用于IE6—8。
在高版本的浏览器中，我们可以使用firstElementChild来代替firstChild使用。但是在低版本的浏览器中却不能使用firstElementChild。所以，我们按照老办法用if-else来解决兼容问题。
window.onload=function()
{
var oUl=document.getElementById("ul1");
//oUl.firstChild.style.background="red";
if(oUl.firstElementChild)
{
//高版本的浏览器
oUl.firstElementChild.style.background="red";
}
else
{
//低版本的浏览器
oUl.firstChild.style.background="red";
}
};效果如下：
②尾子节点：lastChild
同上分析，低版本浏览器使用：lastChild，高版本浏览器使用：lastElementChild。
（七）兄弟节点
下一个兄弟节点：nextSibling（低版本浏览器），nextElementSibling（高版本浏览器）前一个兄弟节点：previousSibling（低版本浏览器），previousElementSibling（高版本浏览器）
分析方法与首尾子节点相同。
（八）DOM方式操作元素属性
首先，我们先回忆一下之前我们是用什么方式来操作元素属性的。第一种：oDiv.style.width="100px"; 第二种：oDiv.style["width"]="100px";
下面我们来介绍第三种方法：DOM方式操作元素属性。
①获取：getAttribute(名称)
②删除：removeAttribute（名称）
③设置：setAttribute(名称，值);
（ ①②基本上用不到，我们来详细介绍一下③） <pre name="code" class="html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
</head>
<body>
<input value="OK">
<p id="demo">点击按钮来设置按钮的 type 属性。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
}
</script>
<p>Internet Explorer 8 以及更早的版本不支持此方法。</p>
</body>
</html>
点击按钮后：
（九）用className查找元素
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
<script>
window.onload=function()
{
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className=="box")
{
aLi[i].style.background="red";
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li class="box">111</li>
<li class="box">222</li>
<li>333</li>
<li>444</li>
<li class="box">555</li>
<li>666</li>
<li>777</li>
</ul>
</body>
</html>
功能：将class="box"的li的背景颜色设置成红色。（效果如下）
由于我们经常会用到使用className来筛选元素，所以我们最好将其封装成一个函数，在使用时可以直接调用。
function getByClass(oParent,sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName("*");
for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}更改上述案例的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM的基础</title>
<script>
function getByClass(oParent,sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName("*");
for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function()
{
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
//getByClass(oUl,'box').style.background="red";
var aBox=getByClass(oUl,'box');
for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background="red";
}
};
</script>
</head>
<body>
<ul id="ul1">
<li class="box">111</li>
<li class="box">222</li>
<li>333</li>
<li>444</li>
<li class="box">555</li>
<li>666</li>
<li>777</li>
</ul>
</body>
</html>
效果如下：
至此，我们就将DOM的一些基础知识就学完了，在接下来的几篇博客里我会继续为大家介绍一些关于DOM的高级操作和一些案例分析，希望对大家有所帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总