DOM2 和 DOM3（《JavaScript 高级程序设计》第 12 章笔记）

样式

计算的样式

myDiv = document.getElementById('myDiv');
var myDivStyle = document.defaultView.getComputedStyle(myDiv, null); //第二个参数可以是伪元素，如“:after”;ie9+
alert(myDivStyle.width);

var myDivStyle = document.defaultView.currentStyle(myDiv); //only IE
alert(myDivStyle.width);

元素大小

偏移量

function getElementLeft(element) {
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while(current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}

function getElementTop(element) {
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

客户区的大小

function getViewport() {
    if(document.compatMode == 'BackCompat') {
        return { //ie7-
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };

    }
}

滚动条的大小

//文档总高度
var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);

//重置滚动
function scrollToTop(element) {
    if(element.scrollTop != 0) {
        element.scrollTop = 0;
    }
}

确定元素大小

function getBoundingClientRect(element) {
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;
    if(element.getBoundingClientRect) {
        if(typeof(arguments.callee.offset) != "number") {
            var scrollTop = document.documentElement.scrollTop;
            var temp = document.createElement('div');
            temp.style.cssText = 'position: absolute;left: 0;top: 0;';
            document.body.appendChild(temp);
            arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
            document.body.removeChild(temp);
            temp = null;
        };

        var rect = element.getBoundingClientRect();
        var offset = arguments.callee.offset;
        return {
            left: rect.left + offset,
            rigfht: rect.right + offset,
            top: rect.top + offset,
            bottom: rect.bottom + offset
        };
    } else {
        var actualLeft = getElementLeft(element);
        var actualTop = getElementTop(element);
        return {
            left: actualLeft - scrollLeft,
            right: actualLeft + element.offsetWidth - scrollLeft,
            top: actualTop - scrollTop,
            bottom: actualTop + element.offsetHeight - scrollTop
        }
    }
}

范围

DOM中的范围

- 用DOM范围实现简单选择

<p id="p1"><b>hello</b> world</p>

var range1 = document.createRange(); //ie9+
var range2 = document.createRange();
var p1 = document.getElementById('p1');
range1.selectNode(p1);
range2.selectNodeContents(p1);

- 用DOM范围实现复杂选择

var range1 = document.createRange(); //ie9+
var range2 = document.createRange();
var p1 = document.getElementById('p1');
var p1Index = -1;
var i, len;
for(i = 0, len = p1.parentNode.childNodes.length; i < len; i++) {
    if(p1.parentNode.childNodes[i] == p1) {
        p1Index = i;
        break;
    }
}
range1.setStart(p1.parentNode, p1Index + 1); //ie not sup
range1.setEnd(p1.parentNode, p1Index + 1);
range2.setStart(p1, 0);
range2.setEnd(p1, p1.childNodes.length);

var p1 = document.getElementById('p1'),
    helloNode = p1.firstChild,
    worldNode = p1.lastChild,
    range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

• 插入DOM范围中的内容

<span style="color: red;">Inserted text</span>

var p1 = document.getElementById('p1'),
    helloNode = p1.firstChild.firstChild,
    worldNode = p1.lastChild,
    range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
var span = document.createElement('span');
span.style.color = 'red';
span.appendChild(document.createTextNode('Inserted text'));
range.insertNode(span);

- 比较DOM范围

range.compareBoundaryPoints()

• 复制DOM范围

var newRange = range.cloneRange();

- 清理DOM范围

range.detach(); //从文档中分离
range = null; //解除引用