createElement() 方法可创建元素节点。

此方法可返回一个 Element 对象。

createElement(name)

新创建的 Element 节点，具有指定的标签名。

document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

<script type="text/javascript">
var board = document.getElementById("board");
var e =document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);
</script>
在标签board中加载一个按钮，属性值为“这是测试加载的小例子

<script type="text/javascript">
var board = document.getElementById("board");
var e2 = document.createElement("select");
e2.options[0] = new Option("加载项1", "");
e2.options[1] = new Option("加载项2", "");
e2.size = "2";
var object = board.appendChild(e2);
</script>
在标签board中加载一个下拉列表框，属性值为“加载项1”和“加载项2”

<script type="text/javascript">
var board = document.getElementById("board");
var e3 = document.createElement("input");
e4.setAttribute("type", "text");
e4.setAttribute("name", "q");
e4.setAttribute("value", "使用setAttribute");
e4.setAttribute("onclick", "javascript:alert('This is a test!');");
var object = board.appendChild(e3);
</script>
在标签board中加载一个文本框，属性值为“使用setAttribute”。当点击这个文本框时，会弹出对话框“This is a test!”

appendChild() 方法在节点的子节点列表末添加新的子节点。

insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
通过改变childNodes[0,1,...]来在其它位置插入新的节点

removeChild()

从列表中删除一个项目

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
删除制定的第几个节点
thisNode 删除当前节点
删除当前节点的父节点，即 thisNode.parentNode
如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

remove（）

selectObject.remove(index)
index 必需。规定要删除的选项的索引号。

该方法从选项数组的指定位置移除 <option> 元素。如果指定的下标比 0 小，或者大于或等于选项的数目，remove() 方法会忽略它并什么也不做。

获取节点

childNodes：所有子节点
children：所有是标签类型的子节点
parentNode：父节点
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点
firstChild : 第一个子节点
lastChild：最后一个子节

createElement() 方法可创建元素节点
createTextNode()方法可以创建文本节点
appendChile（node）方法在末尾差如元素
insertBefore(node , targetNode) ; 在指定节点前插入元素
replaceChild （newNode，oldChild）新便签和被替换的老标签的节点

// dom的属性
// className id innerHtml innerText style
var box = document.getElementsByClassName('box')[0];
var box2 = document.getElementsByClassName('box2')[0];
var redDIV = document.getElementsByClassName('redDIV')[0];
// 大小 width height 位置 left top
console.log(box.offsetHeight);// 带边框的高度
console.log(box.clientHeight);// 不打边框的高度可视高度（不包含滚动条和边框等）
console.log(box.scrollHeight);// 滚动的高度
//相对于定位父级的top定位
console.log('111111');
console.log(redDIV.offsetTop);
// 上边框的距离
console.log(redDIV.clientTop);
box.onclick=function(){
console.log(box.scrollTop);// box 滚动上去的那一部分哪个能滚动给那一个用不能滚动的scrollTop一般为零
}
// 窗口宽度
console.log(window.innerWidth); // 不包含工具栏控制台
console.log(window.outerWidth); // outer 包含工具栏控制台

DOM

DOM