讀書時間《JavaScript高級程序設計》五：DOM

時間 2019-12-08

標籤讀書時間 javascript 高級程序設計 dom 欄目 JavaScript 简体版

原文原文鏈接

　　DOM（文檔對象模型）是針對HTML文檔的一個API，描繪了一個層次化的節點樹，能夠添加、移除、修改頁面的某一部分。javascript

　　一個簡單的文檔結構css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

　　這個簡單的HTML文檔表示一個層次結構。文檔節點是每一個文檔的根節點。文檔節點只有一個子節點<html>，稱爲文檔元素。html

　　1. Node類型java

　　DOM1定義了一個Node 接口，該接口由DOM中的全部節點類型實現。node

　　nodeType 節點類型瀏覽器

　　　　1：元素節點app

　　　　2：屬性節點dom

　　　　3：文本節點ui

　　　　9：文檔節點this

　　nodeName 元素節點中爲標籤名

　　nodeValue 元素節點中爲null

　　childNodes

　　parentNode 父節點

　　previousSibling 上一個節點

　　nextSibling 下一個節點

　　firstChild 第一個節點

　　lastChild 最後一個節點

　　appendChild 向節點列表末尾添加一個節點

　　insertBefore 插入一個節點到參考節點的前面

　　replaceChild 要插入的節點替換參考節點的位置

　　removeChild 移除一個節點

　　2. Document類型

　　documentElement指向HTML頁中的<html>元素

　　document.documentElement 取得<html>的引用

　　document.body 取得<body>的引用

　　document.title 取得<title>標題

　　document.url 取得完整的URL

　　document.domain 取得域名

　　document.referrer 取得來源頁的URL

　　document.getElementById() 根據ID找到元素

　　document.getElementsByTagName() 根據標籤名找到一組元素

　　document.forms 取得全部的<form>元素

　　document.images 取得全部的<img>元素

　　document.links 取得全部帶href的<a>元素

　　document.write() 寫入文本到輸出流

　　3. Element類型

　 nodeName / tagName 訪問元素的標籤名

nodeName是node 接口上的property，而tagName是element 接口上的property，全部的節點（元素節點，屬性節點，文本節點等12種）都繼承了node接口，而只有元素節點才繼承了element節點，所以nodeName比tagName具備更大的使用範圍。

tagName只能用在元素節點上，而nodeName能夠用在任何節點上，能夠說nodeName涵蓋了tagName，而且具備更多的功能。

　　id 元素在文檔中的惟一標識符

　　 title 有關元素的附加說明信息

　　className 元素的css類名

　　getAttribute() setAttribute() removeAttribute()

　　HTML5規範，自定義特性應該加上 data- 前綴

　　 任何元素的全部特性，均可以經過DOM元素自己的屬性累訪問（只有公認的特性纔會以屬性的形式添加到DOM 對象中）。

　　元素公認的特性使用自己屬性訪問，自定義特性使用getAttribute()

　　全部特性都是屬性，屬性可使用setAttribute()來設置，自定義特性也同樣。

　　document.createElement() 建立元素

　　4. Text類型

　　document.createTextNode() 建立文本節點

　　5. DocumentFragment類型

　　documentFragment在文檔中沒有對應的標記。DOM規定文檔片斷是一種「輕量級」的文檔。

　　-------------------------------------------------------------------

　　1. 動態腳本

function loadJS(url) {
    var doc = document,
        s = doc.createElement('script'),
        head = doc.getElementsByTagName('head')[0];
    s.type = 'text/javascript';
    s.src = url;
    head.appendChild(s);
}

function loadJS(url, callback) {
    var doc = document,
        s = doc.createElement('script'),
        head = doc.getElementsByTagName('head')[0];
    s.type = 'text/javascript';
    if (s.readyState) {
        s.onreadystatechange = function() {
            if (s.readyState == 'loaded' || s.readyState == 'complete') {
                s.onreadystatechange = null;
                callback && callback();
            }
        };
    } else {
        s.onload = function() {
            callback && callback();
        };
    }
    s.src = url;
    head.appendChild(s);
}

　　2. 動態樣式

function loadCSS(url) {
    var doc = document,
        link = doc.createElement('link'),
        head = doc.getElementsByTagName('head')[0];    
    link.type = 'text/css';
    link.href = url;
    head.appendChild(link);
}

function addCSS(css) { 
    var doc = document,
        style = doc.createElement('style'),
        head = doc.getElementsByTagName('head')[0];
    style.type = 'text/css';
    try {
        style.appendChild(document.createTextNode(css));
    } catch (ex) {
        style.styleSheet.cssText = css;
    };
    head.appendChild(style);
}
//addCSS(' div{font-size:100px;} .top{color:red;} ');

　　----------------------------------------------------------------------

　　1. Selectors API

　　querySelector()

　　querySelectorAll()

　　Document DocumentFragment Element能夠調用selector API.

　　2. Element Traversal API

　　------------------------------------------------------

　　1. getElementsByClassName()

function getClass(c, n, t) {
    if (document.getElementsByClassName) return (n || document).getElementsByClassName(c);
    var arr = [],
        re = new RegExp('(^| )' + c + '( |$)'),
        els = (n || document).getElementsByTagName(t || '*'),
        i = 0,
        l = els.length;
    for (; i < l; i++) {
        if (re.test(els[i].className)) arr.push(els[i]);
    }
    return arr;
}

　　2. classList

　　3. 焦點管理

　　document.activeElement 指向DOM中得到了焦點的元素

　　　　得到焦點：頁面載入用戶輸入調用focus()

　　document.hasFocus() 肯定文檔是否得到了焦點

　　4. HTMLDocument變化

　 document.readyState

　　　　loading 正在加載

　　　　complete 加載完成

　　5. 兼容模式

　　document.compatMode

　　　CSS1Compat 標準模式

　　　 BackCompat　混雜模式

　6. head 字符集

　 document.head 取得<head>元素

　 document.charset　取得文檔中使用的字符集或者設置新的字符集

document.defaultCharset 根據默認瀏覽器及操做系統的設置當前文檔的字符集

　7. 自定義數據屬性

　HTML5規定能夠爲元素添加非標準的屬性，但要添加前綴 data-

<div id="test" data-appid="123" data-name="test"></div>

var test = document.querySelector('#test');
console.log( test.dataset.appid ) //123
console.log( test.dataset.name ) //test

　　8. 插入標記

　　innerHTML

　 outerHTML

　　insertAdjacentHTML()

　　9. 控制頁面滾動

　　 scrollIntoView()

　　10. 文檔模式（IE）

　　document.documentMode (IE8+)

　　<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　11. 子節點

　　children 全部元素子節點

　　childNodes 全部子節點包括空白節點

　　12. 後代

　　contains() 某個節點是否是一個節點的後代

function contains(o, p) {
    if (p.contains) {
        return p.contains(o);
    } else if (p.compareDocumentPosition) {
        return !!(p.compareDocumentPosition(o) & 16);
    }
}

　　12. 插入文本

　　innerText

function text(o, v) {
    var len = arguments.length;
    if (len == 1) return o.innerText || o.textContent;
    if (len == 2) o.innerHTML = v;
    return this;
}

　　13. 樣式

　　getComputedStyle

function getStyle(o, n) {
    return o.currentStyle ? o.currentStyle[n] : getComputedStyle(o, null)[n];
}

　　14. 偏移量

　　15. 客戶區大小

　　clientWidth 元素內容區寬度+左右內邊距寬度

　　clientHeight 元素內容區高度+左右內邊距高度

　　16. 滾動大小

　　17. 元素大小位置

　　getBoundingClientRect()

　　left top right bottom

　　...

　　遍歷接口範圍接口......

　　-------------------------------------------------------------

　第10章介紹了DOM節點以及操做節點，11章介紹了新的DOM API以及瀏覽器專有的API：選擇器，焦點，加載等；12章介紹了比較有用的的DOM API：樣式處理，遍歷，範圍等。

相關標籤/搜索

每日一句

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