JS基础——innerHTML、CSS-DOM

　　1.innerHTML属性

现如今的浏览器几乎都支持属性innerHTML,但这个属性并不是W3C DOM标准的组成部分。它始见于微软公司的ＩＥ４浏览器，并从那时被其他的浏览器接受，innerHTML属性用于获取或替换HTML元素的内容。

Window.onload=function(){

Var testdiv=document.getElementById(“testdiv”);

Alert(testdiv.innerHTML);

}

<div id=”testdiv”>

<p>This is<em>my</em>content.</p>

</div>

结果为：<p>This is<em>my</em>content</p>

很明显，innerHTML属性毫无细节而言。要想获得细节，就必须使用DOM方法和属性。不仅可以用它来读出元素的HTML内容，还可以用它把HTML内容写入元素。

语法：Object.innerHTML

注意：

I.Object是获取的元素对象

II.注意书写，innerHTML区分大小写

　　2..CSS-DOM

三位一体的网页

(1)结构层

(2)表示层

(3)行为层

I.结构层：由HTML或XHTML之类的标记语言负责创建。

II.表示层：由CSS负责创建

III.行为层：负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScropt语言和DOM主宰的领域。

不过，在这三种技术之间存在着一些潜在的重叠区域，DOM技术可以用来改变网页的结构，例如createElement()和appendChild()之类的DOM方法能够动态的创建和添加HTML内容。

在CSS身上也可以找到这种技术相互重叠的例子。例如:hover和:focus之类的预定义符号（术语称之为“伪class属性”）使我们可以根据用户触发事件来改变的呈现效果。

className属性

与其使用DOM脚本去直接改变某个元素的样式信息，不如通过javascipt代码去刷新这个元素的class属性。

className属性是一个可读/可写的属性，而且凡是元素节点都有这个属性。

我们可以用className属性检索某给定元素的class属性值：

element.className

用className属性和赋值操作符设置某给定元素的class属性：

Element.className=value

这个技巧只有一个不足：通过className属性设置某个元素的class属性值将替换（而不是追加）该元素现有的一切class设置。