原生jsdom

㈠ js和dom是什麼關系

BOM是瀏覽器對象模型，用來獲取或設置瀏覽器的屬性、行為，例如：新建窗口、獲取屏幕解析度、瀏覽器版本號等。
DOM是文檔對象模型，用來獲取或設置文檔中標簽的屬性，例如獲取或者設置input表單的value值。
BOM的內容不多，主要還是DOM。

由於DOM的操作對象是文檔（Document），所以dom和瀏覽器沒有直接關系。

㈡ 常見的DOM操作有哪些

前言

DOM（Document Object Model）即文檔對象模型，針對 HTML 和 XML 文檔的 API（應用程序介面）。DOM 描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM 脫胎於 Netscape 及微軟公司創始的 DHTML（動態 HTML），但現在它已經成為表現和操作頁面標記的真正跨平台、語言中立的方式。

閱讀目錄

基本概念
節點創建型api
頁面修改型API
節點查詢型API
節點關系型api
元素屬性型api
元素樣式型api

總結

文本整理了javascript操作DOM的一些常用的api，根據其作用整理成為創建，修改，查詢等多種類型的api，主要用於復習基礎知識，加深對原生js的認識。

基本概念

在講解操作DOM的api之前，首先我們來復習一下一些基本概念，這些概念是掌握api的關鍵，必須理解它們。

Node類型

DOM1級定義了一個Node介面，該介面由DOM中所有節點類型實現。這個Node介面在JS中是作為Node類型實現的。在IE9以下版本無法訪問到這個類型，JS中所有節點都繼承自Node類型，都共享著相同的基本屬性和方法。

Node有一個屬性nodeType表示Node的類型，它是一個整數，其數值分別表示相應的Node類型，具體如下：

Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12

假設我們要判斷一個Node是不是元素，我們可以這樣判斷
if(someNode.nodeType == ){ console.log("Node is a element"); }
這些Node類型中，我們最常用的就是element，text，attribute，comment，document，document_fragment這幾種類型。
我們簡單來介紹一下這幾種類型：

Element類型

Element提供了對元素標簽名，子節點和特性的訪問，我們常用HTML元素比如div，span，a等標簽就是element中的一種。Element有下面幾條特性：

（1）nodeType為1
（2）nodeName為元素標簽名，tagName也是返回標簽名
（3）nodeValue為null
（4）parentNode可能是Document或Element
（5）子節點可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

㈢ 如何用js獲取id 元素內容

可以使用js的attr方法實現用js獲取id元素內容。

具體步驟如下：

需要准備的材料分別是：電腦內、瀏覽器、容ultraedit。

1、在ue編輯器中新建一個空白的html文件，js文件。

㈣ js原生dom對象和jQuery對象可以混合使用嗎

Dom原生對象和jQuery對象的區別：
1.jquery選擇器得到的jquery對象和標準的 javascript中的document.getElementById()取得的dom對象是 兩種不同的對象類型，兩者不等價 ；
註：js原生獲取的dom是一個對象，jQuery對象就是一個數組對象，其實就是選擇出來元素的數組集合。所以說他們兩者是不同的對象類型不等價。
2.jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法. 亂使用會報錯。
例如（文章下面有兩個踩坑經歷。）：
$("#id").html();
document.getElementById("id").innerHTML;
意思是指：獲取ID為id的元素內的html代碼。這兩段代碼 結果相同，但中間的取值過程不同 。
即：$("#id").innerHTML、document.getElementById("id").html()之類的寫法都是錯誤的。
註：jQuery是從js衍生出來的，師出同源，但是jQuery是 經過一系列操作 之後，將其封裝成了一個個不同的方法，學習jQuery開始就應當樹立正確的觀念，分清jQuery對象和DOM對象之間的區別，之後學習 jQuery就會輕松很多的。

㈤ JS之DOM操作

DOM： Document Object Model，文檔對象模型；js提供了豐富的api來操作文檔內容。
DOM樹： html文檔中的內容是以樹形結構排布，html是DOM樹根，html下只有兩個子標簽head、body
節點： DOM將所有的分支端都成為節點。節點有很多類型，常見的節點類型有：文本節點、元素節點。
可以通過 nodeType查看節點類型 ： 1元素節點、3文本節點

特殊的元素節點：
1、html元素

2、body元素

3、head元素

節點操作的api（屬性和方法）
1、nodeName：只讀屬性，可以讀取節點名稱

2、nodeType：只讀屬性，讀取節點類型

3、 hasChildNodes()：判斷調用方法的節點是否存在子節點，存在返回true，不存在返回false。
主流瀏覽器會將換行符、製表符、空格當做文本節點處理，IE9以下會忽略它們。

4、childNodes：只讀屬性，獲得節點的子節點集合，子節點集合是一個類數組結構，有數組特點無數組方法

5、firstChild：獲得節點的第一個子節點

6、lastChild：獲得節點的最後一個子節點

7、querySelector()：
參數：string類型，css選擇器
作用：獲得文檔中第一個符合選擇器條件的節點
兼容：在IE9以下不支持

8、 querySelectorAll()： // 獲得的都是靜態集合
參數：string類型，css選擇器
作用：獲得文檔中所有符合選擇器條件的節點集合（類數組結構）
兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素節點。

9、previousSibling：獲取節點的前一個兄弟節點

10、nextSibling：獲取節點的後一個兄弟節點

11、parentNode：獲得節點的父節點（父節點一定是元素節點）

12、removeChild()：節點刪除它的指定子節點
DOM操作元素：暫時不用的隱藏、一定不用的刪除。

13、cloneNode()：克隆一個節點
參數：boolean類型，true深克隆，false淺克隆，默認淺克隆
深克隆：不僅克隆節點和節點的屬性，還會克隆節點的子節點
淺克隆：只克隆節點和節點的屬性，不會克隆節點的子節點

14、a.replaceChild(b,c)：用b替換c
其中a是c的父節點，c是文檔上已經存在的節點，b可以是節點也可以是已存在節點，被替換的節點會從文檔結構中刪除。

15、a.replaceWith(b)：用b替換a
a已存在的節點，b可以是新節點也可以是已存在節點，被替換的節點從DOM樹刪除。

16、a.insertBefore(b,c)：在c前面插入b
其中，a是c的父節點，c是已經存在的節點，b是新節點

17、a.appendChild(b)：在a末尾追加b

a是父節點，b是a的子節點, c是子節點

元素節點的相關api
1、getElementsByTagName()：根據標簽名獲得元素集合（類數組結構）

區別：HTMLCollection 是動態集合，NodeList 是靜態集合。

2、createElement()：根據標簽名創建新元素

3、id：讀寫屬性，可以讀取或設置元素的id值

4、className：讀寫屬性，可以讀取或設置元素的class值

5、classList：讀取標簽的類名集合（類數組結構）

add()：為元素新增類名，如果類名已存在不會重復添加

remove()：刪除元素指定類名，如果類名不存在不會執行操作

元素的屬性分為兩類：
一類是元素本里就擁有的屬性，例如：id、class、style、src、herf、target、alt、title、type、value等等，這些屬性可以在js中直接通過.語法讀取或設置。
再一類是我們為了解決問題給元素添加的自定義屬性，這些屬性在js中無法直接通過.語法讀取，需要通過操作方法訪問。
6、setAttribute(name,value)
參數：name表示要設置的屬性名，value要為屬性設置的值
無返回值

7、getAttribute(name)
參數：name表示要讀取的屬性名
返回值：返回屬性的值，如果屬性不存在會返回null

8、removeAttribute(name)
參數：name表示要刪除的屬性名
無返回值

說明：setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地屬性和自定義屬性。

element拓展：
兼容：以下屬性、方法在IE9以下不支持。

1、children：讀取元素的所有元素子節點集合（類數組）

2、parentElement：讀取元素的父元素節點

3、previousElementSibling：讀取前一個元素兄弟節點

4、nextElementSibling：讀取後一個元素兄弟節點

5、firstElementChild：讀取第一個元素子節點
6、lastElementChild：讀取最後一個元素子節點
7、remove(): 將調用方法的元素從DOM結構中刪除