DOM修改
document.createElement("TagName")
可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
并将创建好的对象作为返回值返回
document.createTextNode("textContent")
可以用于创建一个文本节点对象，
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
appendChild()
向一个父节点中添加一个新的子节点
语法：父节点.appendChild(子节点)
insertBefore()
可以在指定的子节点前插入新的子节点
语法：父节点.insertBefore(新节点，旧节点)
replaceChild()
可以使用指定的子节点替换已有的子节点
语法：父节点.replaceChild(新节点，旧节点)
removeChild()
可以删除一个子节点
语法：父节点.removeChild(子节点)
推荐方式：子节点.parentNode.removeChild(子节点)
使用innerHTML也可以完成DOM的增删改的相关操作，一般我们会将上述方法与innerHTML结合使用，
比方说用innerHTML向节点中添加文本，而不是使用相比之下更为麻烦的document.createTextNode()配合appendChild()来实现此功能。
a元素要添响应函数时，取消a元素的默认行为：
在响应函数的最后添加return false;或者将html中a标签的href属性值改为javascript:;
新添加的元素响应函数不起作用
是因为响应函数在页面加载完就绑定好了，新添加的元素需要再绑定一次。
响应函数中的数组索引问题
如果响应函数是给一个数组设置的，外有一个for循环，for循环会在页面加载完成之后立即执行，而响应函数会在被点击时才执行（这里为onclick），此时for循环早已执行完毕，所以此时在响应函数内输出i，i将为固定值。
使用DOM操作CSS
通过JS修改元素的样式
语法：元素.style.样式名 = 样式值
注意：如果CSS的样式名中含有-，
这种名称在JS中是不合法的，如background-color，
需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写
比如：backgroundcolor ---------> backgroundColor
borderwidth ---------> borderWidth
我们通过style属性设置的样式都是内联样式，由于内联样式的优先级比较高，
所以我们通过JS来修改的样式，往往会立即生效，
但是如果样式中设置了!important，此时样式将具有最高优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要使用!important
读取元素的当前样式
通过style属性读取
语法：元素.style.样式名
注意：通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
使用getComputedStyle()（IE8以上，其它任何浏览器）
这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
参数：
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般传null
例子：
获取元素的宽度
getComputedStyle(box , null).width;(不会返回auto，会返回真实的数值)
通过该方法读取到样式都是只读的不能修改
使用currentStyle（只支持IE，且只支持IE8以上）
语法：
元素.currentStyle.样式名
例子：
box.currentStyle.width
通过这个属性读取到的样式是只读的不能修改
实现在所有浏览器包括IE8中兼容读取样式的方法
1 /* 定义一个函数，用来获取指定元素的当前的样式 2 3 参数： 4 5 obj 要获取样式的元素 6 7 name 要获取的样式名 8 9 */ 10 11 function getStyle(obj , name){ 12 13 //对象.属性不存在，不会报错，会返回undefined，如果直接寻找对象，（当前作用域到全局作用域）找不到会报错 14 15 if(window.getComputedStyle){ 16 17 //正常浏览器的方式，具有getComputedStyle()方法 18 19 return getComputedStyle(obj , null)[name]; 20 21 }else{ 22 23 //IE8的方式，没有getComputedStyle()方法 24 25 return obj.currentStyle[name]; 26 27 } 28 29 //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name]; 30 31 }
其他的样式相关的属性(以下样式都是只读的)
clientWidth
clientHeight
元素的可见宽高，包括元素的内容区和内边距的宽度，返回一个数字，可以直接进行计算
offfsetWidth
offsetHeight
整个元素的宽高，包括内容区、内边距、边框
offsetParent
可以用来获取当前元素的定位元素
会获取离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body
offsetLeft
offsetTop
当前元素相对于定位父元素之间的偏移量
scrollWidth
scrollHeight
可以获取元素整个滚动区域的宽高
scrollTop
scrollLeft
可以获取垂直和水平滚动条滚动的距离
判断滚动条是否滚动到底
垂直滚动条
scrollHeight -scrollTop = clientHeight
水平滚动
scrollWidth -scrollLeft = clientWidth
其余属性和方法详见文档，javascript----->DOM----->元素对象
学识浅薄，如有错误，恳请斧正，在下不胜感激。