1.DOM基礎(chǔ)
- 什么是DOM :
document ,節(jié)點(diǎn)! 其實(shí)說的都是一個(gè)東西, CSS時(shí)管叫標(biāo)簽, JS時(shí)管叫元素,DOM時(shí),管叫節(jié)點(diǎn); - 瀏覽器支持情況
IE:10% Chrome:60% FF:99% 支持 - DOM節(jié)點(diǎn)
childNodes:子節(jié)點(diǎn)
nodeType:節(jié)點(diǎn)的類型 nodeType == 3 -> 文本節(jié)點(diǎn)nodeType == 1 -> 元素節(jié)點(diǎn)
childNodes 和 nodeType配合使用
<head>
<meta charset="UTF-8">
<title>01-DOM基礎(chǔ)</title>
<script>
window.onload = function () {
// ul的子節(jié)點(diǎn)為li
var oUl = document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++){
//由于在不同的瀏覽器下,獲取到的oUl.childNodes是不一樣的;IE6-8會(huì)將文本節(jié)點(diǎn)也算進(jìn)去;
//故若想給元素節(jié)點(diǎn)修改樣式,可以通過 oUl.childNodes[i].nodeType == 1 來獲取元素節(jié)點(diǎn),并修改樣式;
//nodeType==3 -> 文本節(jié)點(diǎn)
//nodeType==1 -> 元素節(jié)點(diǎn)
//給所有的li設(shè)置背景顏色
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 //文本節(jié)點(diǎn)
<span>abcdefg</span> //元素節(jié)點(diǎn)
</body>
</html>
- 獲取子節(jié)點(diǎn)
children:他只包括元素,不包含文本,兼容所有瀏覽器
故上面的例子可以這樣寫,簡單粗暴!!!
for (var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background = 'red';
}
parentNode:父節(jié)點(diǎn)
例子：點(diǎn)擊鏈接说庭，隱藏整個(gè)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應(yīng)用
- offsetParent
例子：獲取元素在頁面上的實(shí)際位置
主要用作定位時(shí),獲取元素的實(shí)際父節(jié)點(diǎn).
示例一:給第二個(gè)div2設(shè)置絕對(duì)定位,給div2的父節(jié)點(diǎn)div1什么也不設(shè)置,那么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); //結(jié)果:[object HTMLBodyElement] 父節(jié)點(diǎn)為body;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
示例二:給第二個(gè)div2設(shè)置絕對(duì)定位,給div2的父節(jié)點(diǎn)div1設(shè)置相對(duì)定位,那么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); //結(jié)果:[object HTMLDivElement] 父節(jié)點(diǎn)為div;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
2.DOM節(jié)點(diǎn)(2)
- 首尾子節(jié)點(diǎn)
- 有兼容性問題
- firstChild然磷、firstElementChild
- lastChild 、lastElementChild
//IE6-8
//oUl.firstChild.style.background='red';
//高級(jí)瀏覽器
//oUl.firstElementChild.style.background='red';
使用示例
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//IE6-8
//oUl.firstChild.style.background='red';
//高級(jí)瀏覽器
//oUl.firstElementChild.style.background='red';
//給第一個(gè)li設(shè)置紅色背景:由于兼容問題,故需判斷下
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>
- 兄弟節(jié)點(diǎn) (使用同上)
- 有兼容性問題
- nextSibling刊驴、nextElementSibling
- previousSibling姿搜、previousElementSibling
3.操縱元素屬性
元素屬性操作
第一種：oDiv.style.display='block';
第二種：oDiv.style['display']='block';
第三種：Dom方式: oDiv2.setAttribute('display','none');DOM方式操作元素屬性
獲取：getAttribute(名稱)
設(shè)置：setAttribute(名稱, 值)
刪除：removeAttribute(名稱)
4.用className選擇元素
- 如何用className選擇元素
- 選出所有元素
- 通過className條件篩選
初級(jí)用法
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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>
- 封裝成函數(shù)
高級(jí)用法
<script>
//封裝成函數(shù)
function getByClass(oParent, sClass)
{
var aResult=[];
var aEle=oParent.getElementsByTagName('*');//*通配符,獲取oParent下面所有的節(jié)點(diǎn)
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.創(chuàng)建捆憎、插入和刪除元素
- 創(chuàng)建DOM元素
createElement(標(biāo)簽名) 創(chuàng)建一個(gè)節(jié)點(diǎn) appendChild(節(jié)點(diǎn)) 追加一個(gè)節(jié)點(diǎn)
注意:appendChild(節(jié)點(diǎn)) 有兩個(gè)作用:
(一)如果這個(gè)元素是通過createElement(標(biāo)簽名)創(chuàng)建出來的,那么它可以直接添加到新的父級(jí);
(二).如果這個(gè)元素有父級(jí), 那么1.先把元素從原有父級(jí)上刪除;2.再添加到新的父級(jí).
例子：為ul插入li
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function ()
{
//創(chuàng)建節(jié)點(diǎn)
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
//添加節(jié)點(diǎn) 父級(jí).appendChild(子節(jié)點(diǎn));
oUl.appendChild(oLi);
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="創(chuàng)建li"/>
<ul id="ul1">
</ul>
</body>
</html>
創(chuàng)建DOM元素,并添加
- 插入元素
insertBefore(節(jié)點(diǎn), 原有節(jié)點(diǎn)) 在已有元素前插入 例子：倒序插入li
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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)
{//當(dāng)aLi 中有元素時(shí),直接插入到最上面
oUl.insertBefore(oLi, aLi[0]);
}
else
{//當(dāng)aLi 中沒有元素時(shí),先添加一個(gè)
oUl.appendChild(oLi);
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="創(chuàng)建li"/>
<ul id="ul1">
</ul>
</body>
</html>
插入DOM:一直插入到第一個(gè)位置
- 刪除DOM元素
removeChild(節(jié)點(diǎn)) 刪除一個(gè)節(jié)點(diǎn) 例子：刪除li
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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標(biāo)簽的父節(jié)點(diǎn)是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是一個(gè)很耗性能的過程，在某些情況下攻礼，不得不進(jìn)行dom循環(huán)操作业踢，我們每次對(duì)dom的操作都會(huì)觸發(fā)"重排"，這嚴(yán)重影響到能耗礁扮，一般通常采取的做法是盡可能的減少dom操作來減少"重排"。
面對(duì)循環(huán)操作dom的過程瞬沦，我們選擇使用文檔碎片（creatDocumentFragment）太伊，將需要添加到dom中的內(nèi)容一次性添加到文檔碎片中，然后將文檔碎片添加到dom樹逛钻，這樣就可以有效的減少操作dom的次數(shù)僚焦。
- 文檔碎片可以提高DOM操作性能(理論上)
- 文檔碎片原理
- document.createDocumentFragment()
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function ()
{
//在IE6-8等低版本瀏覽器上,可以提高下性能;在高級(jí)瀏覽器上提高性能不大,有時(shí)候還會(huì)降低性能
var oUl=document.getElementById('ul1');
//1.創(chuàng)建文檔碎片
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>
