這次帶給大家深入JavaScript之DOM應用，使用JavaScript之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>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>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是深入JavaScript之DOM應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
