DOM經常使用操做

時間 2019-11-06

標籤 dom 經常使用欄目 HTML 简体版

原文原文鏈接

本篇文章主要總結了經常使用的dom操做，方便平時查閱。javascript

--------------------------------圖片來自參考連接2css

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。html

對 DOM 操做，咱們使用最多的就是經過 document 對象。java

document 對象是一個內置對象，咱們能夠經過它的許多屬性和方法來獲取和操做 dom 。node

由上圖能夠看出：jquery

<html> = document.documentElement；
<body> = document.body；
<head> = document.head；
document = node.ownerDocument；//隨意一個節點，可經過該屬性獲取 document 對象；
複製代碼

文檔經常使用操做

一、element 對象查詢

document.getElementById(id);&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;//返回對擁有指定id的第一個對象進行訪問

document.getElementsByName(name);&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;//返回帶有指定名稱的節點集合

document.getElementsByTagName(tagname); &emsp;&emsp;//返回帶有指定標籤名的對象集合&emsp; 

document.getElementsByClassName(classname);  //返回帶有指定class名稱的對象集合 

document.querySelector(selectorName)	//返回符合CSS選擇器的第一個對象

document.querySelectorAll(selectorName)	//返回符合CSS選擇器的對象集合

document.createElement(name)	//建立一個html元素
複製代碼

接下來，咱們先複習一些基本的概念：正則表達式

節點（node）是 DOM 層次結構中任何類型對象的通用名稱。node 能夠是內置 DOM 元素之一，例如document或document.body，也能夠是HTML中指定的HTML標記，例如或api

，也能夠是文本節點（系統將一個文本塊保存在另外一個元素中）。數組

簡而言之，node 是任何DOM對象。瀏覽器

元素（element）是特定類型的 node，能夠在HTML中使用HTML標記直接指定，而且能夠具備id或類等屬性。

因此 node 具有的屬性與方法， element 因爲繼承自 node，也相應具有了這些屬性與方法。

二、element 家族遍歷

myElement.children		//只獲得 element 子節點集 
myElement.firstElementChild	
myElement.lastElementChild
myElement.previousElementSibling
myElement.nextElementSibling
複製代碼

因爲 element 繼承自 node ，因此如下屬性也具有：

myElement.childNodes
myElement.firstChild
myElement.lastChild
myElement.previousSibling
myElement.nextSibling
myElement.parentNode
myElement.parentElement
複製代碼

三、element 屬性操做

element.attributes	//返回該元素全部屬性節點的一個實時集合是個類數組對象
element.getAttributeNames() 	//返回一個Array，該數組包含指定元素（element）的全部屬性名稱

element.getAttribute(attributeName);
element.setAttribute(attributeName, value);

element.hasAttribute(attributeName);
element.removeAttribute(attributeName);

element.hasAttributes();   // 是否有屬性設置
複製代碼

除此以前，還有四個概念較爲常見：innerHTML、outerHTML、innerText 、outerText，以圖做爲說明：

------------------來自參考連接1

四、element樣式操做

4.一、element 類操做

element.className	//返回一個字符串
element.classList	//返回一個類數組
複製代碼

className 是可讀寫屬性，可使用

element.className += 'fool'

來增長類名，或者經過正則表達式來刪除或更改類名：

element.className = element.className.replace(/^bold$/, '');

classList 也提供了一些方法來操做元素的類名：

element.classList.add()	//增長一個 class。
element.classList.remove()	//移除一個 class。
element.classList.contains()	//檢查當前元素是否包含某個 class。
element.classList.toggle()	//將某個 class 移入或移出當前元素。
element.classList.item()	//返回指定索引位置的 class。
element.classList.toString()	//將 class 的列表轉爲字符串。
複製代碼

4.二、獲取樣式方法

window.getComputedStyle 方法返回的對象是隻讀的，能夠用於檢查元素的樣式（包括由一個<style>元素或一個外部樣式表設置的那些樣式）。

window.getComputedStyle(myElement)	//返回的style是一個實時的 CSSStyleDeclaration 對象，當元素的樣式更改時，它會自動更新自己。返回值只讀。
複製代碼

Element.getBoundingClientRect 方法返回元素的大小及其相對於視口的位置。能夠用這個方法來獲取元素的位置。
```
element.getBoundingClientRect（）.top
element.getBoundingClientRect（）.left
複製代碼
```

讀取元素的行內樣式，能夠直接使用：

element.style	//用來讀寫該元素的行內樣式信息
複製代碼

4.三、其餘 element 操做方法

element.matches(cssSelector) //表示當前元素是否匹配給定的 CSS 選擇器
element.scrollIntoView(Boolean)  //讓當前的元素滾動到瀏覽器窗口的可視區域內。
複製代碼

五、Dom 更改

element.appendChild(element);
element.removeChild(element);

element.replaceChild(element1, element2);

parentElement.insertBefore(newElement, referenceElement);	//插入子元素
複製代碼

六、有趣的事件

接下來要介紹的幾個方法，不算太爲常見的事件操做，不過做者近期有用到，在這裏給你們做爲了解，仍是頗有意思的~

觀察元素是否進入視窗口內：

io = new IntersectionObserver()
複製代碼

觀察元素屬性是否發生變化:

var observer = new MutationObserver();
複製代碼

這兩個方法就不展開講解了，有興趣的能夠參考後面的參考連接相關文章~

七、參考連接

一、原生 JavaScript 的 DOM 操做彙總：harttle.land/2015/10/01/…

二、The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)：www.sitepoint.com/dom-manipul…

三、Element對象：javascript.ruanyifeng.com/dom/element…

四、IntersectionObserver API 使用教程： www.ruanyifeng.com/blog/2016/1…

五、MutationObserver：developer.mozilla.org/zh-CN/docs/…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。