DOM API

element.outerHTML

outerHTML属性可以获取该DOM元素及其后代节点所形成的序列化的HTML片段，改变outerHTML属性可以用来把所属元素替换成为给定字符串解析后的DOM节点。
例子:

// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>

d = document.getElementById("d");
console.log(d.outerHTML);

// 字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// 显示在console窗口中

// HTML:
// <div id="container"><div id="d">This is a div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // logs "DIV"

d.outerHTML = "<p>This paragraph replaced the original div.</p>";
console.log(container.firstChild.nodeName); // logs "P"

// id为d的div元素已经不在文档树中(不在页面中显示,但仍然在内存中)
// 新的P元素替换了div元素

当一个元素因为修改自身的 outerHTML 属性而被替换时，指向该元素的变量仍然指向替换前的元素
如果一个元素是该文档的根节点,那么改变它的outerHTML会抛出异常

element.clientWidth/element.clientHeight(只读属性)

计算公式: clientWidth = css width + css padding - 水平滚动条高度(如果存在)