獲取節點
document.getelementbyid(idname)document.getelementsbyname(name)document.getelementsbyclassname(classname)document.getelementsbytagname(tagname)document.queryselector('h1')document.queryselectorall('div')[node].parentnode// 返回當前元素所有子元素節點物件，只返回元素節點
[node].children
// 返回當前元素所有子節點，包括文字，html，屬性節點。（回車也會當做乙個節點）
[node].childnodes
// 返回當前元素的第乙個子節點物件，一般輸出換行物件(#text)
[node].firstchild
// 返回當前元素的最後乙個子節點物件,一般輸出換行物件(#text)
[node].lastchild
// 返回當前元素的第乙個子元素物件，
[node].firstelementchild
// 返回當前元素的最後乙個子元素物件,
[node].lastelementchild
// 返回當前元素的下乙個兄弟節點 沒有就返回null,一般輸出換行物件(#text)
[node].nextsibling
// 返回當前元素上乙個兄弟節點 沒有就返回 null,一般輸出換行物件(#text)
[node].previoussibling
// 返回當前元素的下乙個兄弟元素節點 沒有就返回null
[node].nexteleemntsibling
// 返回當前元素上乙個兄弟元素節點 沒有就返回 null
[node].previouselementsibling
// 返回元素的所有文字，包括html**；需要設定就賦值
[node].innerhtml
// 返回當前元素的自身及子代所有文字值，只是文字內容，不包括html**；需要設定就賦值
[node].innertext
// 返回節點的型別,數字形式（1-12）
// 常見幾個1：元素節點，2：屬性節點，3：文字節點。
[node].nodetype
// 設定元素的樣式時使用style
[node].style.color="red";
// 括號傳入屬性名，返回對應屬性的屬性值
[node].getattribute(attributename)
// 傳入屬性名及設定的值
[node].setattribute(attributename,attributevalue)
// 刪除元素中的指定屬性
[node].removeattribute(attributename)
document.createelement("div") // 舉例：div 元素document.createtextnode(string)document.createattribute("class") // 舉例：class屬性[node].clonenode() // 引數deep，是否轉殖這個節點下的所有內容[parentnode].insertbefore(newnode,existingnode)[parentnode].replacechild('newnode','oldnode')找到需要刪除的子元素，然後使用 parentnode 屬性來查詢其父元素：
//刪除當前節點下指定的子節點，刪除成功返回該被刪除的節點，否則返回null
[parentnode].removechild(node)
解析 html：在這一步瀏覽器執行了所有的載入解析邏輯，在解析 html 的過程中發出了頁面渲染所需的各種外部資源請求。
計算樣式：瀏覽器將識別並載入所有的 css 樣式資訊與 dom 樹合併，最終生成頁面 render 樹（:after :before 這樣的偽元素會在這個環節被構建到 dom 樹中）。
計算圖層布局：頁面中所有元素的相對位置資訊，大小等資訊均在這一步得到計算。
繪製圖層：在這一步中瀏覽器會根據我們的 dom **結果，把每乙個頁面圖層轉換為畫素，並對所有的**檔案進行解碼。
整合圖層，得到頁面：最後一步瀏覽器會合併合各個圖層，將資料由 cpu 輸出給 gpu 最終繪製在螢幕上。（複雜的檢視層會給這個階段的 gpu 計算帶來一些壓力，在實際應用中為了優化動畫效能，我們有時會手動區分不同的圖層）。
幾棵樹dom 樹：解析 html 以建立的是 dom 樹（dom tree ）：渲染引擎開始解析 html 文件，轉換樹中的標籤到 dom 節點，它被稱為「內容樹」。
cssom 樹：解析 css（包括外部 css 檔案和樣式元素）建立的是 cssom 樹。cssom 的解析過程與 dom 的解析過程是並行的。
渲染樹：cssom 與 dom 結合，之後我們得到的就是渲染樹（render tree ）。
布局渲染樹：從根節點遞迴呼叫，計算每乙個元素的大小、位置等，給每個節點所應該出現在螢幕上的精確座標，我們便得到了基於渲染樹的布局渲染樹（layout of the render tree）。
繪製渲染樹：遍歷渲染樹，每個節點將使用 ui 後端層來繪製。整個過程叫做繪製渲染樹（painting the render tree）。
瀏覽器核心 渲染引擎 js引擎
渲染引擎的職責就是渲染，即在瀏覽器視窗中顯示所請求的內容，也可以說是對html文件進行解析並將其顯示在頁面上的工具 不同的瀏覽器有不同的渲染引擎，對於渲染引擎的使用總結如下 渲染引擎 firefox使用gecko引擎 ie使用trident引擎 2015年微軟推出自己新的瀏覽器，原名叫斯巴達，後改名...
瀏覽器核心 移動端瀏覽器核心
主流瀏覽器核心 1 ie瀏覽器 trident核心 2 firefox瀏覽器 gecko核心 3 safari瀏覽器 webkit核心 4 chrome瀏覽器 blink核心 blink是webkit的乙個分支 5 opera瀏覽器 最初是presto，後來是webkit，現在是blink核心 擴充...
常見瀏覽器 瀏覽器核心
常見瀏覽器介紹 瀏覽器是網頁執行的平台，常用的瀏覽器有ie 火狐 firefox 谷歌 chrome safari和opera等。我們平時稱為五大瀏覽器。瀏覽器核心 理解 瀏覽器核心又可以分成兩部分 渲染引擎 layout engineer 或者 rendering engine 和 js 引擎。渲...