第十二章：第34节DOM——元素节点对象的公共属性
更新于：2017-11-19 17:27:54
节点的创建、追加、复制、删除操作使用上节课的方法都可以做到。有些朋友可能觉着记那么多方法挺繁琐的，用这样的方式往页面中添加HTML标签元素不易读。那这节就介绍一个更好的方法——使用元素节点对象的“innerHTML”属性。
用法：
父节点.innerHTML
获得的值是一个节点元素中的HTML标记代码。可直接为其赋值HTML标记代码。
怎么样？是不是超简单！一个“innerHTML”属性就可以完成上节课中所有方法的功能。代码也更易读更简洁。
innerHTML值中的HTML元素依然可以当成一个元素节点对象被获取到。
只要是元素节点对象都可以使用innerHTML属性，innerHTML是元素对象的公共属性之一，公共属性还有如下：
tagName：标记的名称，等同于nodeName
className：类样式。等同于HTML标记的class属性。如：imgObj.className = “box”
id：等同于HTML标记的id属性
title：等同于HTML标记的title属性
style：等同于HTML标记的style属性。
innerHTML：获取或设置某个节点中的所有HTML内容。与nodeValue只能是纯文本。
divObj.innerHTML = “<img src=’images/dog.gif’ />别的文本”;
offsetWidth：元素的可见宽度。只读属性。
offsetHeight：元素的可见高度。只读属性。
offsetLeft：元素的左偏移量。只读属性。
offsetTop：元素的上偏移量。只读属性。
注：上面这四个属性描述的是标签元素的宽、高、坐标位置，值只能读不能被修改。如果想修改元素的宽、高、坐标位置，可修改元素style属性。
scrollWidth：指元素的完整的宽度，包含滚动条中的内容。只读属性。
scrollHeight：指元素的完整的高度，包含滚动条中的内容。只读属性。
scrollTop：当拖动滚动条时，向上滚动过去的距离。默认scrollTop=0
scrollLeft：当拖动滚动条时，向左滚动过去的距离。默认scrollLeft=0
注：scrollTop、scrollLeft可赋值，滚动条会自动定位到指定的位置。
这节先讲这些，下节课楠神给大家做五个实例，把我们学到的知识应用到实际工作中，让大家看看JS在实际应用中是多么重要。