DOM中Element類型：（以下所有的屬性只是唯讀屬性）
一、node.nodeType 以數字值傳回指定節點的節點類型。
存在12 種不同的節點類型，其中可能會有不同節點類型的子節點(前三個為重要)： 
if(ul .nodeType == Node.ELEMENT_NODE){
alert(‘Node is an element’);
}
上述程式碼，在標準瀏覽器下可以正常的運行，在非標準的瀏覽器（ie8之下）下不能正常的運行。
解決辦法：
if(ul.nodeType ==1){ alert(‘Node is an element’); } 使用nodeType屬性與數字比較。
二、nodeName值為元素類型的標籤名稱例如ul、 p等。
nodeValue值為null。
parentNode可能是document或Element，子節點可能。 Element,Text,Comment,ProcessingInstruction, CDATASection, EntityReference。
操作特性
一、HTML元素屬性的方式獲得特性
所有HTML元素透過HTMLElement類型或它的子類型（HTMLDivElement 、HTMLImageElement ）表示，HTMLElement類型是繼承自Element類型，只不過度加了一些特有的屬性，切子類型也有自己特有的屬性和方法，例如img有src，title等特有屬性。特別注意的是由於class是js中的關鍵字，要使用className來取得class 的值。
對於獲取和設定方式以及注意地地方在二三中透過對比的方式表述。
二、element.getAttribute(attributename)傳回指定屬性名稱的屬性值。
這個方法傳入一個屬性名的字串，不區分大小寫。
例如ul.getAttribute(‘class’);由於參數為字串，所以可以使用class不必使用className。透過這個方法可以獲得自訂屬性，在一些含有非關鍵字中使用的字元的屬性名，用這個方法獲得屬性的值特別方便，例如在HTML5規範中，自訂屬性前面應該加上data-前綴以方便驗證，其中包含了非法字元'-',可以使用ul.getAttribute('data-index');獲得。
特別的，當attributename為style時這個方法在IE7之前的版本返回的是一個對象，其他版本的瀏覽器返回的是CSS文本。當attributename為onclick這樣的事件處理程序時這個方法在IE7之前的版本回傳的是一個方法或null，其他版本的瀏覽器回傳的是函數程式碼字串。
透過HTML元素屬性的方式取得特性與getAttribute（）差異比較大。
1、自訂屬性存取上的差異：
解析html程式碼的時候，標準的瀏覽器不會將元素的自訂屬性加入到DOM物件中，在js中透過屬性的方式存取自訂屬性是不存在的結果為undefined，非標準的瀏覽器會將這個自訂屬性加入到DOM物件中，在js中會存取到結果。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ul1" index="hehe"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var ul = document.getElementById('ul1');
alert(ul.id); /*标准与非标准都是div1*/
alert(ul.index);/*标准为undefined 非标准为hehe*/ </script> </body></html>1234567891011121314151617181920212.當屬性為style時，傳回一個對象，當屬性為處理事件時，傳回被複製的函數。
綜上所述，在操縱DOM物件屬性的時候，一般情況下使用HTML元素屬性的方式獲得特性，只有在取得自訂屬性的值和一些含有非法字元的屬性名的值的時候使getAttribute方法。
.
三、element.setAttribute(attributename,attributevalue)加入指定的屬性，並為其賦指定的值。
與HTML元素屬性的方式設定特性的方式相比，這個方法可以加入一些沒有的自訂屬性並賦值，但透過HTML元素屬性的方式設定特性不會被設定。同時這個方法在IE7之前的版本也存在異常，所以除了設定自訂屬性外，其他方式透過HTML元素屬性的方式設定特性。
四、RemoveAttribute()移除特性，但不常使用，IE6之前的版本不支援這個方法。
操作內容
一、childNodes：表示某個元素子節點的集合，回傳NodeList 物件。
在標準瀏覽器下：傳回的子節點包含文字類型、元素類型、註解類型等，特別的包含文字類型中空文字即所謂的換行。
在非標準的瀏覽器下：傳回的子節點中不包含文字類型中空文本，同時與節點位置、解析方式等也有關。
<ul id="ul1"> <li>22222</li>
111111 <!--33333--></ul><script type="text/javascript"> var oul = document.getElementById('ul1');
alert(oul.childNodes.length);</script>在标准浏览器下：得到的结果为5（li元素前的换行空文本，li元素，注释到</li>之间这一段文本，注释，注释到</ul>的空白） 在非标准的浏览器下得到的结果为1 但是将<li>22222</li> 111111互换位置之后得到的结果为2.1234567891011所以当运行下面代码的时候为出问题：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> </head> <body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1'); for(var i = 0; i<oul.childNodes.length; i++){
oul.childNodes[i].style.backgroundColor = 'red';
} /*标准： Cannot set property 'backgroundColor' of undefined*/ /*非标准：（ie8之前）正常*/
</script> </body></html>原因很简单，就是因为在标准浏览器下childNodes返回的子节点中包含非元素类型的节点。12345678910111213141516171819202122232425解決上述問題的方式：
透過nodeType屬性判斷子節點是否為元素類型：
for(var i = 0; i<oul.childNodes.length; i++){
if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
}1234在非法嵌套的html文檔中由於解析方式不同，在標準和非標準瀏覽器下呈現的結果不同，這完全於瀏覽器核心的解析方式有關。如：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> <p>5555555</p> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1'); for(var i = 0; i<oul.childNodes.length; i++){ if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
} </script> </body> </html>1234567891011121314151617181920212223对于一些分标准的浏览器比如ie7 解析的时候他会把这种那个不符合语义的p元素放到最后一个li中，但对于其他的浏览器并不会这样。换句话说，在标准浏览器下p是ul的子节点，但是在非标准的浏览器下p是最后一个li的子节点，这完全和浏览器内核的系欸小方式有关。
由此可以看出，对于在书写html文档的时候，结构化语义是多么的重要，至少能为添加js方便不少。
二、element.childern仅仅返回元素类型的子节点集合，返回NodeList 对象。
Children比childNodes要好得多，因为他仅仅获取那些为元素类型的子节点。但是还是不能免于非法嵌套带来的问题，这本身至于浏览器的近稀饭时有关，与用那种属性没有关系。
三、element.firstChild（firstElementChild）：获取第一个子点
element.lastChild（lastElementChild）：获取最后一个子节点
element.nextSibling（nextElementSibling）：获取相邻的下一个兄弟子节点
element.previousSibling（previousElementSibling）：获取相邻的上一个兄弟节点
以firstChild为例说明一下性质，其他的大同小异。
在标准情况下：返回的结果可能是文本类型（空文本）。
在非标准的情况下：如果有元素子节点，那么一定返回第一个元素类型的子节点。
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /></head><body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1');
alert(oul.firstChild.nodeName); /*标准下text非标准为li*/ </script></body></html>123456789101112131415161718192021解决这种情况
1是firstElementChild。
firstElementChild仅仅是在标准浏览器下有效，在非标准的浏览器下是没有定义的。在标准浏览器下仅仅返回第一个元素类型的子节点，如果没有返回null。
再js中加入：
function firstChild(obj){ if(obj.firstElementChild === undefined){//检测是否为标准浏览器 return obj.firstChild;//不是标准浏览器，用firstChild返回第一个元素子节点，可能为null
}else{ return obj.firstElementChild;//是标准浏览器，用firstElementChild返回第一个元素子节点，可能为null
}
} var oFirst = firstChild(oul); if(oFirst){//判断有没有第一个元素子节点排除空节点的情况
oFirst.style.backgroundColor = 'orange';
}else{
alert('没有第一个元素');
}1234567891011121314152直接用children：推荐
if(oul.children[0]){
oul.children[0].style.backgroundColor = 'orange';
}else{
alert('没有第一个元素');
}123456四、element.parentNode： 当前节点的父级节点，无兼容性问题。
Eg：点击隐藏将这个列表隐藏<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</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> </ul></body></html>123456789101112131415161718192021222324252627五、element.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
非ie7以下的浏览器：
如果没有定位父级 offsetParent 为body
如果有定位父级 offsetParent 为定位父级
Ie7以下的浏览器：
如果没有定位父级 自身没有定位 offsetParent 为body，自身有定位的话 为html
如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上。
如果有定位父级 offsetParent 为定位父级
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; zoom: 1;position: relative;}#div3 {background: orange;}</style><script>window.onload = function() { var oDiv3 = document.getElementById('div3');
alert( oDiv3.offsetParent.id );
}</script></head><body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body></html>1234567891011121314151617181920212223242526272829Div2 zoom：1；属性触发layout，并且div3没有定位，所以在ie7一下的版本父元素div2，同时，div2相对定位，在其他浏览器中父元素为div2。解决了兼容性问题。
六、element.offsetLeft[Top] : 只读 属性
当前元素到定位父级的距离（偏移值）（或者说，到当前元素的offsetParent的距离）
非ie7以下的浏览器：
如果没有定位父级 offsetLeft [top]是到html的距离。
如果有定位父级 是到定位父级的距离。
ie7以下：
如果自己没有定位，无论是否有没有父级定位offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离（没有父级定位情况下是到html的距离）。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; position: relative;}#div3 {background: orange; position: relative;}</style><script>window.onload = function() { var oDiv3 = document.getElementById('div3');
alert( oDiv3.offsetTop );
}</script></head><body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body></html>123456789101112131415161718192021222324252627例子：获得任意一个元素的相对
于页面的位置<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style type="text/css"> body{padding:0; margin:0;} /*由于offsetLeft和offsetParsent在没有定位父级的时候父级不同*/ div{padding: 40px 50px;} #div1{background-color: #008000;} #div2{background-color: #FF0000;position: relative;} #div3{background-color: #FFA500;position:relative;} /*设置position offsetLeft在字节没有定位的时候是相对body的*/ </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">
</div> </div> </div> <script type="text/javascript"> var oDiv = document.getElementById('div3'); function getPosition(obj){ var pos = {left:0, top:0}; while(obj){
pos.left += obj.offsetLeft;
pos.top +=obj.offsetTop;
obj = obj.offsetParent;
} return pos;
}
alert(getPosition(oDiv).left); </script> </body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546七、长高：
element.style.width : 样式宽 = width
element.clientWidth : 可视区宽 = width + padding
element.offsetWidth: 占位宽 = width + padding + border
八、
node.appendChild(node)
node.insertBefore(newnode,existingnode)
node.removeChild(node)
node.replaceChild(newnode,oldnode) node为oldnode的父节点
这几个函数既能操作已有的节点，也能操作动态创建的节点（createElement（））
node.insertBefore(newnode,existingnode)当existingnode当null时在ie下会报错解决的方式就是：用if判断如果为null执行什么操作，否则执行什么操作。
简单的留言板：<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <input type="text" name="text" id="text" /> <input type="button" name="btn" id="btn" value="添加" /> <ul id="ul1"> </ul> <script type="text/javascript"> var text = document.getElementById('text'); var btn = document.getElementById('btn'); var oul = document.getElementById('ul1');
btn.onclick =function(){ var li = document.createElement('li');
li.innerHTML = text.value; var oa = document.createElement('a');
oa.innerHTML = '删除';
oa.href = 'javascript:;';
oa.onclick = function(){
oul.removeChild(this.parentNode);
}
li.appendChild(oa); if(!oul.children[0]){
oul.appendChild(li);
}else{
oul.insertBefore(li,oul.children[0]);
} if(oul.children.length>5){
oul.removeChild(oul.children[oul.children.length-1])
}
} </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
以上是DOM屬性方法及相容性問題詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AMC 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AMPython更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
SublimeText3漢化版
中文版，非常好用
Dreamweaver CS6
視覺化網頁開發工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
