一、DOM操作技术
1.动态脚本
<html> <body> </body> </html>
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function say(){alert('hi')}";
document.body.appendChild(script);
say();
</script>
以上版本,safari3.0之前的版本不能支持，但却允许使用文本节点技术来指定代码，故做出兼容的代码如下：
<script>
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
// 除IE浏览器外，所有浏览器都支持这种方式
script.appendChild(document.createTextNode(code));
}catch(ex){
// IE浏览器支持的方式
script.text = code;
}
document.body.appendChild(script);
}
loadScriptString("function say(){alert('Hello World')}");
say();
</script>
2.动态样式
3.DOM扩展
1) querySelector()方法
此方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有匹配的元素，返回null
var body = document.querySelectory("body");
通过Document类型调用querySelector()方法时，会在文档范围内查找匹配的元素。而通过Element类型调用该方法时，只会在该元素后代元素的范围内
查找匹配的元素。
2)querySelectorAll()方法接收的参数与querySelector()一样，都是一个CSS选择符，它返回一个NodeList实例。
var ps = document.getElementById("myDiv").querySelectorAll("p"); // 取得myDiv中的所有p元素
3)HTML5对类相关的补充
a)getElementsByClassName()
方法接收一个参数，包含一个或多个类名的字符串，返回带有指定类的所有元素NodeList。传入多个类名时，类名的
先后顺序不重要，以空格分隔。
var all = documents.getElementsByClassName("a b");
b)classList属性
HTML5新增了一种操作类名的方式，可以让操作更安全也更简单，那就是为所有的元素添加classList属性。classList是新集合类型
DOMTokenList的实例。这个新类型含有length属性，还定义了如下方法：
add(value)：将制定的字符串添加到列表中，如果已存在，则忽略
contains(value)：存在返回true，反之false
remove(value)：从列表中删除指定的字符串
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
示例：
<div class = "a b c"></div>
div.classList.remove("b"); // 删除b类
div.classList.add("d"); // 添加d类
4)HTML5焦点管理
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button) // true
以上例子中使用了activeElement属性，这是HTML5添加的辅助焦点管理的属性。这个属性始终会引用DOM中当前获得焦点的元素。
document.hasFocus()方法，用于确定文档是否获得了焦点
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); // true
通过检测焦点，可以知道用户是否正在与页面进行交互
4.元素大小
1.偏移量
-
-
- offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上下边框的高度。
- offsetWidth:元素在水平方向上占用的空间大小，以像素计。包括元素的高度、（可见的）垂直滚动条的高度、左右边框的高度。
- offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离
- offsetTop:元素的上外边框至包含元素的上内边框的像素距离
-
其中， offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent
属性中。 offsetParent 属性不一定与 parentNode 的值相等。例如， <td>元素的 offsetParent 是
作为其祖先元素的<table>元素，因为<table>是在 DOM 层次中距<td>最近的一个具有大小的元素。
要想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent
的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。以下两个函数就可以用于分别
取得元素的左和上偏移量。
function getElementLeft(element) { var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null) { actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; }
2.客户区大小
元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientHeight和clientWidth
3.滚动大小
-
-
- scrollHeight:在没有滚动条的情况下，元素内容的总高度（包括内边距）
- scrollWidth:在没有滚动条的情况下，元素内容的总高度（包括内边距）
- scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
- scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
-
这篇博客里有DOM扩展的总结：https://www.cnblogs.com/xiaohuochai/p/5821803.html#anchor3