DOM（一）一些屬性方法介紹以及相容性問題
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>
2.當屬性為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.
所以當執行下面程式碼的時候為出問題：
<!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返回的子節點中包含非元素型別的節點。
解決上述問題的方式：
通過nodeType屬性判斷子節點是否為元素型別：
for(var i = 0; i<oul.childNodes.length; i++){
if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
}
在非法巢狀的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>
對於一些分標準的瀏覽器比如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>
解決這種情況
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('沒有第一個元素');
}
2直接用children：推薦
if(oul.children[0]){
oul.children[0].style.backgroundColor = 'orange';
}else{
alert('沒有第一個元素');
}
四、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>
五、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>
Div2 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>
例子：獲得任意一個元素的相對
於頁面的位置
<!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>
七、長高：
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>
相關推薦
DOM（一）一些屬性方法介紹以及相容性問題
DOM中Element型別：（以下所有的屬性僅僅是隻讀屬性） 一、node.nodeType 以數字值返回指定節點的節點型別。 存在 12 種不同的節點型別，其中可能會有不同節點型別的子節點(前三個為重要)： if(ul.nodeType == No
你不知道的 Virtual DOM（一）：Virtual Dom 介紹
前言 目前最流行的兩大前端框架，React和Vue，都不約而同的藉助Virtual DOM技術提高頁面的渲染效率。那麼，什麼是Virtual DOM？它是通過什麼方式去提升頁面渲染效率的呢？本系列文章會詳細講解Virtual DOM的建立過程，並實現一個簡單的Diff演
異步線程池的實現（一）-------具體實現方法
fun format 測試 路徑 線程池。 用戶體驗 deb tar clas 本篇是這個內容的第一篇，主要是寫:遇到的問題，和自己摸索實現的方法。後面還會有一篇是總結性地寫線程池的相關內容（偏理論的）。 一、背景介紹 朋友的項目開發到一定程度之後，又遇到
優秀開源軟件學習系列（一）——從零學習Spring4以及學習方法分享
文檔 軟件 準備 相關性 培訓 獎勵 在哪裏 方式 列表 一、目的1.掌握Spring4怎樣使用，以便將這個框架作為自己的一項技能。2.掌握Spring官網是怎樣介紹其產品的，在心中對Spring有最官方的、最直觀的了解。在Spring的相關領域，能夠知道怎麽下載Sprin
Jmeter（一）工具的簡單介紹(z)
名稱 auto 動態 read 需要 系統資源 數據 等等 ras 一、JMeter介紹 Apache JMeter是100%純JAVA桌面應用程序，被設計為用於測試客戶端/服務端結構的軟件(例如web應用程序)。它可以用來測試靜態和動態資源的性能，例如：靜態文件
webservice學習總結（一）-- WebService相關概念介紹
IT strong 資源 fire 求和 log AC service服務 為什麽 一、WebService是什麽？ 基於Web的服務：服務器端整出一些資源讓客戶端應用訪問（獲取數據） 一個跨語言、跨平臺的規範（抽象） 多個跨平臺、跨語言的應用間通信整合的方案（實際）
RabbitMQ消息隊列（一）: Detailed Introduction 詳細介紹
image 用戶 sco ice eject 企業 取數 pro ket 原文地址：https://blog.csdn.net/anzhsoft/article/details/19563091 1 歷史 RabbitMQ是一個由erlang開發的AMQP（Advance
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
JS之DOM（一）
滿足 del dom3 () 樹節點 也會 name屬性 api 對象 一、DOM簡介 什麽是DOM？簡單地說，DOM是是針對HTML和XML文檔的一個API，一套對文檔的內容進行抽象和概念化的方法。 學習過ORM的同學可能知道ORM是將數據庫中的表映射到類，建立一個表和類
支援向量機學習（一）·統計學習方法
支援向量機 1 線性可分支援向量機 線性可分支援向量機和線性支援向量機假設輸入空間與特徵空間為一一對應關係，並將輸入空間中的輸入對映為特徵空間中的特徵向量。非線性支援向量機利用一個從輸入空間到特徵空間的非線性對映將輸入對映為特徵向量，所以輸入都是由輸入空間到特徵空間，支援向量機的
Flume學習之路 （一）Flume的基礎介紹
日誌 cbc oot 安裝 image 可擴展 服務器 提交 ffffff 一、背景 Hadoop業務的整體開發流程：從Hadoop的業務開發流程圖中可以看出，在大數據的業務處理過程中，對於數據的采集是十分重要的一步，也是不可避免的一步。 許多公司的平臺每天會產生大量的日誌
Java是如何快速煮成C 的 （一） 相似的方法 2
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
Java基礎（一）Java本地方法
1、Java本地方法概念 Java中的方法分為兩種：Java方法和本地方法。 Java方法由Java語言編寫，編譯成位元組碼，儲存在class檔案中。 本地方法由其他語言編寫，編譯成與處理器相關的機器程式碼，本地方法儲存在動態連結庫（如ddl中）。 本地方法的存在的意義，主要在於Ja
原生JS去重（一）--兩種方法去掉重複字元
所謂“去重”，即是去掉重複的字元。本篇部落格講述兩種方式去重，一種是比較簡單但程式碼比較囉嗦點的，另一種是有點深度但是簡潔的。 我直接寫JavaScript程式碼了。 方式一： function deleteRepetionChar(arr){ //先判斷輸入進
Netty深入分析與Dubbo實戰解析（一）——網路程式設計模型介紹
Linux網路程式設計模型介紹 Linux核心將所有外部裝置都看作一個檔案來操作，對一個檔案的讀寫操作會呼叫核心提供的系統命令，返回一個file descriptor（fd，檔案描述符）。而對一個socket的讀寫也會有相應的描述符。描述符就是一個數字，它指向核心中的一個結構體（檔案路徑
行java之道（一）學習的方法
行java之道（一）學習的心得 自序 我是一名普通的JAVA開發從業者，接下來一段時間我會更新一些自己的心得體會，之所以想要這麼做，一是因為自己早有將自己的心得體會記錄下來的願景；二是因為自己在近來招聘中所遇見的應聘者誇誇其談框架，卻對基礎答非所問
Spring框架學習之路（一）——Spring框架基本介紹
Spring的出現是為了取代EJB（Enterprise JavaBean）的臃腫、低效、脫離現實的缺點。Spring致力於J2EE應用的各層（表現層、業務層、持久層）的解決方案，Spring是企業應用開發的“一站式”選擇。 1.Spring定義： Spring是分層的J
(Java)集合框架（一）Collection介面方法、Iterator迭代器、增強for迴圈
【Collection介面】 import java.util.ArrayList; import java.util.Collection; /* * Collection介面中的方法 是集合中所有實現類必須擁有的方法 * 程式演示，使用Collection
負載均衡技術（一）———負載均衡技術介紹
此文已由作者張小剛授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 本文主要是對負載均衡技術進行一個簡單的介紹，並結合在實際生產環境中負載均衡技術的應用情況，讓大家對負載均衡技術，以及這一技術在公司的應用情況有一個簡單的瞭解。 什麼是負載均衡技術 負載均衡技術，是現代計算機領域的
ROS（一）：檔案系統介紹
ROS的檔案系統 一個catkin軟體包稱為一個程式包package，package主要包含兩個主要檔案: （1）package.xml：package的描述資訊 （2）CMakeList.txt：構建package的主要CMake檔案，用於呼叫Catkin的函式與巨集，解析p