1.DOM基础
- 什么是DOM :
document ,节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫元素,DOM时,管叫节点; - 浏览器支持情况
IE:10% Chrome:60% FF:99% 支持 - DOM节点
childNodes:子节点
nodeType:节点的类型 nodeType == 3 -> 文本节点nodeType == 1 -> 元素节点
childNodes 和 nodeType配合使用
<head>
<meta charset="UTF-8">
<title>01-DOM基础</title>
<script>
window.onload = function () {
// ul的子节点为li
var oUl = document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++){
//由于在不同的浏览器下,获取到的oUl.childNodes是不一样的;IE6-8会将文本节点也算进去;
//故若想给元素节点修改样式,可以通过 oUl.childNodes[i].nodeType == 1 来获取元素节点,并修改样式;
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
//给所有的li设置背景颜色
if(oUl.childNodes[i].nodeType == 1){
oUl.childNodes[i].style.background = 'red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
abcdefg //文本节点
<span>abcdefg</span> //元素节点
</body>
</html>
- 获取子节点
children:他只包括元素,不包含文本,兼容所有浏览器
故上面的例子可以这样写,简单粗暴!!!
for (var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background = 'red';
}
parentNode:父节点
例子：点击链接，隐藏整个li
parentNode示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-parentNode</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>
<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>
</ul>
</body>
</html>
parentNode应用
- offsetParent
例子：获取元素在页面上的实际位置
主要用作定位时,获取元素的实际父节点.
示例一:给第二个div2设置绝对定位,给div2的父节点div1什么也不设置,那么div2的offsetParent为body.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetParent</title>
<style>
#div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;}
#div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;}
</style>
<script>
window.onload = function () {
oDiv2 = document.getElementById('div2');
alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
示例二:给第二个div2设置绝对定位,给div2的父节点div1设置相对定位,那么div2的offsetParent为div1.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetParent</title>
<style>
#div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;
position: relative;}
#div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;}
</style>
<script>
window.onload = function () {
oDiv2 = document.getElementById('div2');
alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
2.DOM节点(2)
- 首尾子节点
- 有兼容性问题
- firstChild、firstElementChild
- lastChild 、lastElementChild
//IE6-8
//oUl.firstChild.style.background='red';
//高级浏览器
//oUl.firstElementChild.style.background='red';
使用示例
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//IE6-8
//oUl.firstChild.style.background='red';
//高级浏览器
//oUl.firstElementChild.style.background='red';
//给第一个li设置红色背景:由于兼容问题,故需判断下
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
}
else
{
oUl.firstChild.style.background='red';
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
- 兄弟节点 (使用同上)
- 有兼容性问题
- nextSibling、nextElementSibling
- previousSibling、previousElementSibling
3.操纵元素属性
元素属性操作
第一种：oDiv.style.display='block';
第二种：oDiv.style['display']='block';
第三种：Dom方式: oDiv2.setAttribute('display','none');DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
4.用className选择元素
- 如何用className选择元素
- 选出所有元素
- 通过className条件筛选
初级用法
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>
</html>
- 封装成函数
高级用法
<script>
//封装成函数
function getByClass(oParent, sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName('*');//*通配符,获取oParent下面所有的节点
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 aBox=getByClass(oUl, 'box');
for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background='red';
}
};
</script>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>
5.创建、插入和删除元素
- 创建DOM元素
createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点
注意:appendChild(节点) 有两个作用:
(一)如果这个元素是通过createElement(标签名)创建出来的,那么它可以直接添加到新的父级;
(二).如果这个元素有父级, 那么1.先把元素从原有父级上删除;2.再添加到新的父级.
例子：为ul插入li
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function ()
{
//创建节点
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
//添加节点 父级.appendChild(子节点);
oUl.appendChild(oLi);
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</body>
</html>
创建DOM元素,并添加
- 插入元素
insertBefore(节点, 原有节点) 在已有元素前插入 例子：倒序插入li
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function ()
{
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length>0)
{//当aLi 中有元素时,直接插入到最上面
oUl.insertBefore(oLi, aLi[0]);
}
else
{//当aLi 中没有元素时,先添加一个
oUl.appendChild(oLi);
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</body>
</html>
插入DOM:一直插入到第一个位置
- 删除DOM元素
removeChild(节点) 删除一个节点 例子：删除li
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
//a标签的父节点是li
oUl.removeChild(this.parentNode);
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>asfasd <a href="javascript:;">删除</a></li>
<li>5645 <a href="javascript:;">删除</a></li>
<li>ghdfjgj <a href="javascript:;">删除</a></li>
<li>mvbnmvnb <a href="javascript:;">删除</a></li>
</ul>
</body>
</html>
删除DOM元素
6.文档碎片
使用文档碎片在某些情况下可以提高页面效率。
javascript操作dom是一个很耗性能的过程，在某些情况下，不得不进行dom循环操作，我们每次对dom的操作都会触发"重排"，这严重影响到能耗，一般通常采取的做法是尽可能的减少dom操作来减少"重排"。
面对循环操作dom的过程，我们选择使用文档碎片（creatDocumentFragment），将需要添加到dom中的内容一次性添加到文档碎片中，然后将文档碎片添加到dom树，这样就可以有效的减少操作dom的次数。
- 文档碎片可以提高DOM操作性能(理论上)
- 文档碎片原理
- document.createDocumentFragment()
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
//在IE6-8等低版本浏览器上,可以提高下性能;在高级浏览器上提高性能不大,有时候还会降低性能
var oUl=document.getElementById('ul1');
//1.创建文档碎片
var oFrag=document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var oLi=document.createElement('li');
//2.给文档碎片添加元素
oFrag.appendChild(oLi);
}
//3.把文档碎片添加给ul
oUl.appendChild(oFrag);
};
</script>
</head>
<body>
<ul id="ul1"></ul>
</body>
</html>
