讀JS高級API筆記_(DOMDOM2DOM3)哎呀——園齡才9個月啊 - diligenceday－IT工程師數位筆記本

文章出處

---恢復內容開始---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM2 && DOM3  || HTML5DOMAPI</title>
</head>
<body>
<div>
    <p>12312</p>
    <ul>
        <li>1</li>
        <li>11</li>
        <li>111</li>
        <li>1111</li>
    </ul>
</div>
<script>
    root = document.querySelector('div');
    //帶命名空間的文檔結構
    /*
    <xhtml:body xhtml:class="xx">
    </xhtml:body>
    */
    root.localName //不帶XML空間前綴的tagName
    document.doctype.publicId
    //"-//W3C//DTD XHTML 1.0 Transitional//EN"
    document.doctype.systemId
    //"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    
    document.importNode; //解決不同DOM類型之間的DOM&node移動操作
    document.defaultView //window 當前的window環境
    //document.contentDocument /*for標準*/|| document.contentWindow.document /*for IE*/
    document.styleSheets
    document.scripts
    
    /* style */
    style = {
        cssText : '', //樣式
        length : '', //有幾個樣式
        getPropertCssValue : '',
        getPropertyValue : '',
        "item(index)" : '', //返回第索引個的樣式
        removeProperty : '',
        setProperty : ''
    };
    
    //HTML5元素遍歷 //NodeIterator ,treeWalker
    var iterator = document.createTreeWalker(root,NodeFilter.SHOW_ELEMENT,filter,false);
    function filter( node ){ //有點想 ARRAY.prototype.sort方法
        return node.tagName.toLowerCase() === 'li' ?
        NodeFilter.FILTER_ACCEPT :  //接受這個節點
        NodeFilter.FILTER_SKIP      //過濾掉這個節點
    };
    node = iterator.nextNode(); //專有方法 nextNode() 和previousNode() ，取得節點的元素
    while( node != null){
        console.log(node.tagName);
        node = iterator.nextNode();
    };
    //獲取range方法，
    var range = document.createRange();
    range.selectNode(root);
    console.log( range );
    //range.setStart(obj,offset)
    //range.setEnd(obj,offset)
    //range.extraContent;
    //range.cloneContent;
    //range.insertNode;
    //range.surrandContent(span);
    //range.collapse( true or false );
    //range.compareBoundaryPoints(0 || 1 || 2 || 3,range2);
    root.classList;
    root.classList.contain;
    root.classList.add;
    root.classList.remove;
    root.classList.toggle;
    
    document.activeElement; //默認body
    /*
    data-xx ; dataSet.xx = 1; 存數據的，實現更快訪問
    */;
    
    //[
        //beforebegin,
        //afterbegin,
        //beforeend,
        //afterend
    //]
    root.insertAdjacentElement
    root.insertAdjacentText
    root.insertAdjacentHTML
    root.insertAdjacentBefore
    
    //HTML5 scrollAPI
    document.body.scrollIntoView()
    
    document.domain //可以實現同一個域名不同二級域名的跨域，但是只能document.domain更改一次,否則會報錯
    root.nodeType  === '3' ? root.normalize()&&root.splitText('aaa/*這個是切割標志符*/') : ''
    document.createComment('\'xxx');
    var aDiv = document.getElementsByTagName('div'); //這個aDiv是根據頁面自動更新的
</script>
</body>
</html>