Javascript中DOM詳解與學習

阿新 • • 發佈：2018-11-01

DOM（文件物件模型）是針對html和XML文件的一個API（應用程式程式設計介面）。DOM描繪了一個層次化的節點樹，允許開發人員新增，移除和修改頁面的某一部分。下面將從這幾個層次來學習。

一、節點層次

1、DOM可以將任何HTML或XML文件描繪成一個由多層節點構成的結構。節點分為幾種不同的型別，每種型別分別表示文件中不同的資訊或標記。每個節點都有各自的特點、資料和方法，另外也和其他節點存在某種關係。

文件節點是每個文件的根節點，文件節點只有一個子節點，即<html>元素，我們稱之為文件元素。文件元素是文件的最外層元素，文件中的其他所有元素都包含在文件元素中，每個文件只能有一個文件元素，在HTML頁面中，文件元素始終都是<html>元素。文件中有四種節點：元素節點、屬性節點、文字節點和註釋節點。總共有12種節點型別，這些型別都繼承自一個基型別。每個節點都有一個nodeType屬性，用於表名節點的型別。

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.DOCUMENT.NODE(9)

我們通常要確定某個節點的型別，就是將nodeType屬性與數字值進行比較，如下：

if(someNode.nodeType == 1){//適用於所有瀏覽器
  alert('Node is an element')  
}

1.1、nodeName和nodeValue屬性

這兩個屬性可以讓你瞭解節點的具體資訊，在使用這兩個值以前，最好是先檢測一個節點的型別。

<! 
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
    <div id="container">
        <p id="text">hello world!</p>
    </div>
     <script type="text/javascript">
         let el = document.getElementById( 
'container');
         if(el.nodeType == 1){
             let name = el.nodeName;
　　　　　　　　let value = el.nodeValue;
             console.log(name)//DIV
　　　　　　　　console.log(value)//null
         }
     </script>
</body>
</html>

1.2、節點關係

Node.childNodes

每個節點都有一個childNodes屬性，其中儲存著一個NodeList物件。NodeList是一種類陣列物件，用於儲存一組有序的節點，可以通過位置來訪問這些節點。

let firstChild = el.childNodes[0]
let secondChild = el.childNodes.item(1)
let count = el.childNodes.length

Node.ownerDocument  //返回當前節點所在的頂層文件物件，即document
Node.nextSibling  //返回緊跟在當前節點後面的第一個兄弟節點
Node.previousSibling  //返回當前節點前面的、距離最近的一個兄弟節點
Node.parentNode   //返回當前節點的父節點
Node.parentElement  //返回當前節點的父Element節點
Node.childNodes   //返回當前節點的所有子節點
Node.firstChild  //返回當前節點的第一個子節點
Node.lastChild   //返回當前節點的最後一個子節點

//parentNode介面
Node.children  //返回指定節點的所有Element子節點
Node.firstElementChild  //返回當前節點的第一個Element子節點
Node.lastElementChild   //返回當前節點的最後一個Element子節點
Node.childElementCount  //返回當前節點所有Element子節點的數目。

1.3、操作節點

Node.appendChild(node)   //向節點新增最後一個子節點
Node.hasChildNodes()   //返回布林值，表示當前節點是否有子節點
Node.cloneNode(true);  // 預設為false(克隆節點), true(克隆節點及其屬性，以及後代)
Node.insertBefore(newNode,oldNode)  // 在指定子節點之前插入新的子節點
Node.removeChild(node)   //刪除節點，在要刪除節點的父節點上操作
Node.replaceChild(newChild,oldChild)  //替換節點
Node.contains(node)  //返回一個布林值，表示引數節點是否為當前節點的後代節點。
Node.compareDocumentPosition(node)   //返回一個7個位元位的二進位制值，表示引數節點和當前節點的關係
Node.isEqualNode(noe)  //返回布林值，用於檢查兩個節點是否相等。所謂相等的節點，指的是兩個節點的型別相同、屬性相同、子節點相同。
Node.normalize()   //用於清理當前節點內部的所有Text節點。它會去除空的文字節點，並且將毗鄰的文字節點合併成一個。

//ChildNode介面
Node.remove()  //用於刪除當前節點
Node.before()  //
Node.after()
Node.replaceWith()

1.4、document節點

1.4.1、document節點的屬性

document.doctype   //
document.documentElement  //返回當前文件的根節點
document.defaultView   //返回document物件所在的window物件
document.body   //返回當前文件的<body>節點
document.head   //返回當前文件的<head>節點
document.activeElement  //返回當前文件中獲得焦點的那個元素。

//節點集合屬性
document.links  //返回當前文件的所有a元素
document.forms  //返回頁面中所有表單元素
document.images  //返回頁面中所有圖片元素
document.embeds  //返回網頁中所有嵌入物件
document.scripts  //返回當前文件的所有指令碼
document.styleSheets  //返回當前網頁的所有樣式表

//文件資訊屬性
document.documentURI  //表示當前文件的網址
document.URL  //返回當前文件的網址
document.domain  //返回當前文件的域名
document.lastModified  //返回當前文件最後修改的時間戳
document.location  //返回location物件，提供當前文件的URL資訊
document.referrer  //返回當前文件的訪問來源
document.title    //返回當前文件的標題
document.characterSet屬性返回渲染當前文件的字符集，比如UTF-8、ISO-8859-1。
document.readyState  //返回當前文件的狀態
document.designMode  //控制當前文件是否可編輯，可讀寫
document.compatMode  //返回瀏覽器處理文件的模式
document.cookie   //用來操作Cookie

1.4.2、document節點的方法

讀寫方法：

document.open()   //用於新建並開啟一個文件
document.close()   //不安比open方法所新建的文件
document.write()   //用於向當前文件寫入內容
document.writeIn()  //用於向當前文件寫入內容，尾部新增換行符。

查詢節點：

document.querySelector(selectors)   //接受一個CSS選擇器作為引數，返回第一個匹配該選擇器的元素節點。
document.querySelectorAll(selectors)  //接受一個CSS選擇器作為引數，返回所有匹配該選擇器的元素節點。
document.getElementsByTagName(tagName)  //返回所有指定HTML標籤的元素
document.getElementsByClassName(className)   //返回包括了所有class名字符合指定條件的元素
document.getElementsByName(name)   //用於選擇擁有name屬性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）
document.getElementById(id)   //返回匹配指定id屬性的元素節點。
document.elementFromPoint(x,y)  //返回位於頁面指定位置最上層的Element子節點。

生成節點：

document.createElement(tagName)   //用來生成HTML元素節點。
document.createTextNode(text)   //用來生成文字節點
document.createAttribute(name)  //生成一個新的屬性物件節點，並返回它。
document.createDocumentFragment()  //生成一個DocumentFragment物件

事件方法：

document.createEvent(type)   //生成一個事件物件，該物件能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture)  //註冊事件
document.removeEventListener(type,listener,capture)  //登出事件
document.dispatchEvent(event)  //觸發事件

1.5、element元素節點。

1.5.1、元素節點屬性

Element.attributes  //返回當前元素節點的所有屬性節點
Element.id  //返回指定元素的id屬性，可讀寫
Element.tagName  //返回指定元素的大寫標籤名
Element.innerHTML   //返回該元素包含的HTML程式碼，可讀寫
Element.outerHTML  //返回指定元素節點的所有HTML程式碼，包括它自身和包含的的所有子元素，可讀寫
Element.className  //返回當前元素的class屬性，可讀寫
Element.classList  //返回當前元素節點的所有class集合
Element.dataset   //返回元素節點中所有的data-*屬性。

尺寸屬性：

Element.clientHeight   //返回元素節點可見部分的高度
Element.clientWidth   //返回元素節點可見部分的寬度
Element.clientLeft   //返回元素節點左邊框的寬度
Element.clientTop   //返回元素節點頂部邊框的寬度
Element.scrollHeight  //返回元素節點的總高度
Element.scrollWidth  //返回元素節點的總寬度
Element.scrollLeft   //返回元素節點的水平滾動條向右滾動的畫素數值,通過設定這個屬性可以改變元素的滾動位置
Element.scrollTop   //返回元素節點的垂直滾動向下滾動的畫素數值
Element.offsetHeight   //返回元素的垂直高度(包含border,padding)
Element.offsetWidth    //返回元素的水平寬度(包含border,padding)
Element.offsetLeft    //返回當前元素左上角相對於Element.offsetParent節點的垂直偏移
Element.offsetTop   //返回水平位移
Element.style  //返回元素節點的行內樣式

節點相關屬性：

Element.children   //包括當前元素節點的所有子元素
Element.childElementCount   //返回當前元素節點包含的子HTML元素節點的個數
Element.firstElementChild  //返回當前節點的第一個Element子節點  
Element.lastElementChild   //返回當前節點的最後一個Element子節點  
Element.nextElementSibling  //返回當前元素節點的下一個兄弟HTML元素節點
Element.previousElementSibling  //返回當前元素節點的前一個兄弟HTML節點
Element.offsetParent   //返回當前元素節點的最靠近的、並且CSS的position屬性不等於static的父元素。

1.5.2、element節點的方法

位置方法：

getBoundingClientRect()  
// getBoundingClientRect返回一個物件，包含top,left,right,bottom,width,height // width、height 元素自身寬高
// top 元素上外邊界距視窗最上面的距離
// right 元素右外邊界距視窗最上面的距離
// bottom 元素下外邊界距視窗最上面的距離
// left 元素左外邊界距視窗最上面的距離
// width 元素自身寬(包含border,padding) 
// height 元素自身高(包含border,padding) 

getClientRects()   //返回當前元素在頁面上形參的所有矩形。

// 元素在頁面上的偏移量  
var rect = el.getBoundingClientRect()  
return {   
  top: rect.top + document.body.scrollTop,   
  left: rect.left + document.body.scrollLeft  
}

屬性方法：

Element.getAttribute()：讀取指定屬性  
Element.setAttribute()：設定指定屬性  
Element.hasAttribute()：返回一個布林值，表示當前元素節點是否有指定的屬性  
Element.removeAttribute()：移除指定屬性

查詢方法：

Element.querySelector()  
Element.querySelectorAll()  
Element.getElementsByTagName()  
Element.getElementsByClassName()

事件方法：

Element.addEventListener()：新增事件的回撥函式  
Element.removeEventListener()：移除事件監聽函式  
Element.dispatchEvent()：觸發事件

//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

// event物件  
var event = window.event||event;    

// 事件的目標節點  
var target = event.target || event.srcElement;

// 事件代理  
ul.addEventListener('click', function(event) {   
  if (event.target.tagName.toLowerCase() === 'li') {   
    console.log(event.target.innerHTML)   
  }  
});

二、css操作

1、類名操作

//ie8以下
Element.className  //獲取元素節點的類名
Element.className += ' ' + newClassName  //新增一個類名

//判斷是否有某個類名
function hasClass(element,className){
  return new RegExp(className,'gi').test(element.className);
}

//移除class
function removeClass(element,className){
  element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),'');
}

//ie10 
element.classList.add(className)  //新增
element.classList.remove(className)  //刪除
element.classList.contains(className)  //是否包含
element.classList.toggle(className)  //toggle class

2、style操作

element.setAttribute('style','')

element.style.backgroundColor = 'red'

element.style.cssText //用來讀寫或刪除整個style屬性

element.style.setProperty(propertyName,value)  //設定css屬性
element.style.getPropertyValue(property)  //獲取css屬性
element.style.removeProperty(property)  //刪除css屬性
操作非內聯樣式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
//偽類
window.getComputedStyle(el,':after')[attrName]

注：更詳細的內容參考：https://www.kancloud.cn/dennis/tgjavascript/241852?utm_source=caibaojian.com

Javascript中DOM詳解與學習

Javascript中DOM詳解與學習

javascript中this詳解（史上最簡單易理解的講解，包你不再找錯this指向）

JavaScript(2)---DOM詳解

[js高手之路] dom常用節點屬性兼容性詳解與應用

Dockerfile中的COPY和ADD指令詳解與比較

js學習筆記----JavaScript中DOM擴充套件的那些事

一文詳解深度學習在命名實體識別(NER)中的應用

Linux系統中定時任務cron和crontab命令詳解與配置規則說明

JavaScript變動事件詳解（刪除節點與插入節點事件）

入門|詳解機器學習中的梯度消失、爆炸原因及其解決方法

Redis中的字串特性詳解與原始碼解讀

Android中ImageSwitcher詳解（注意與圖片瀏覽器的區別）

【機器學習】機器學習Top10演算法，教你選擇最合適的那一個！一文讀懂ML中的解析解與數值解...

JavaScript基礎複習(二) DOM詳解

JAVA中ListIterator和Iterator詳解與辨析

JavaScript基礎複習(二) DOM詳解

Java中CAS詳解（悲觀鎖與樂觀鎖）

Hive中壓縮使用詳解與效能分析

C++中lambda表示式詳解與原理分析

斯坦福CS231n 2017最新課程：李飛飛詳解深度學習的框架實現與對比

Javascript中DOM詳解與學習

相關推薦