12|DOM2和DOM3

01|DOM變化

Node類型的變化
1. localName：不帶命名空間前綴的節(jié)點名稱精盅。
2. namespaceURI：命名空間 URI 或者（在未指定的情況下是）null挟裂。
3. prefix：命名空間前綴或者（在未指定的情況下是）null马昙。
Document類型的變化
1. createElementNS(namespaceURI, tagName)：使用給定的 tagName 創(chuàng)建一個屬于命名空
  間 namespaceURI 的新元素.
2. createAttributeNS(namespaceURI, attributeName)：使用給定的 attributeName 創(chuàng)
  建一個屬于命名空間 namespaceURI 的新特性.
3. getElementsByTagNameNS(namespaceURI, tagName)：返回屬于命名空間 namespaceURI
  的 tagName 元素的 NodeList.
Element類型變化
1. getAttributeNS(namespaceURI,localName)：取得屬于命名空間 namespaceURI 且名為
  localName 的特性
2. getAttributeNodeNS(namespaceURI,localName)：取得屬于命名空間 namespaceURI 且
  名為 localName 的特性節(jié)點
3. getElementsByTagNameNS(namespaceURI, tagName)：返回屬于命名空間 namespaceURI
  的 tagName 元素的 NodeList
4. hasAttributeNS(namespaceURI,localName)：確定當前元素是否有一個名為 localName
  的特性逗概，而且該特性的命名空間是 namespaceURI
5. removeAttriubteNS(namespaceURI,localName)：刪除屬于命名空間 namespaceURI 且名
  為 localName 的特性
6. setAttributeNS(namespaceURI,qualifiedName,value)：設(shè)置屬于命名空間 namespace?URI 且名為 qualifiedName 的特性的值為 value
7. setAttributeNodeNS(attNode)：設(shè)置屬于命名空間 namespaceURI 的特性節(jié)點
NamedNodeMap類型的變化
1. getNamedItemNS(namespaceURI,localName)：取得屬于命名空間 namespaceURI 且名為
  localName 的項
2. removeNamedItemNS(namespaceURI,localName)：移除屬于命名空間 namespaceURI 且名
  為 localName 的項
3. setNamedItemNS(node)：添加 node锹锰，這個節(jié)點已經(jīng)事先指定了命名空間信息
框架的變化

訪問內(nèi)聯(lián)文檔的框架對象,如果說內(nèi)聯(lián)寬假來自其它域或者不同子域,或者使用了不同的協(xié)議,那么訪問對應(yīng)的文檔對象的時候就會報錯!

const myFrame = document.getElementById("myFrame");
const frameDocument = myFrame.contentDocument || myFrame.contentWindow.document;

02|樣式

其中比較重要的就是偏移量

offsetLeft/offsetTop 元素邊框到包含元素內(nèi)邊框的距離
offsetWidth/offsetHeight 元素寬高包括滾動條,邊框
offsetParent:保存包含元素的引用

offset.png

獲取元素在頁面中的偏移量:

const getElementLeft = element=>{
    let actualLfet = element.offsetLeft;
    let current = element.offsetParent;
    while(current!==null){
            actualLfet +=  current.offsetLeft;
            current = current.offsetParent;
    }
    return actualLeft;
}

const getElementTop = element=>{
    let actualTop = element.offsetTop;
    let current = element.offsetParent;
    while(current!==null){
            actualTop +=  current.offsetTop;
            current = current.offsetParent;
    }
    return actualTop;
}

需要注意的點就是,偏移量是只讀的,每次獲取都需要重新計算,因此建議用第三方變量保存偏移量的值! 提升性能

客戶區(qū)大小:

clientWidth:元素內(nèi)容及其內(nèi)邊距所占據(jù)的寬度大小
clientHeight:元素內(nèi)容及其內(nèi)邊距所占據(jù)的高度大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>JS Bin</title>
        <style type="text/css">
            border:1px dashed red;
            width:100px;
            height:100px;
        </style>
    </head>
    <body>
        <div id="mydiv" data-appid="12345" data-myname="probedream"></div>
        <script>
            const getElement = selector=>document.querySelector(selector)
            console.log(getElement("#mydiv").clientWidth);//100
        </script>
    </body>
</html>

獲取視口大小:

let  clientWdith = document.body.clientWidth || document.documentElement.clientWidth; 
let  clientHeight = document.body.clientHeight || document.documentElement.clientHeight;

滾動區(qū)域大小:

 scrollHeight //在沒有滾動條的情況下拳亿，元素內(nèi)容總高度（內(nèi)容+內(nèi)邊距）
 scrollWidth
 scrollLeft //被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù)
 scrollTop //被隱藏在內(nèi)容區(qū)域上方的像素數(shù),通過設(shè)置該值可以讓滾動條滾動到響應(yīng)位置

文檔總高度兼容方案:

let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let docHeight = Math.max(scrollHeight,clientHeight);

元素大小的確定:

getBoundingClientRect(client);

返回一個矩形對象,并且包含四個屬性:

left
top
right
bottom

元素在頁面中相對于視口的位置! 基本上最重要的或者說最基礎(chǔ)的內(nèi)容就差不多了!