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 - 水平滚动条高度(如果存在)