JavaScript DOM编程艺术 学习笔记（八、九）

JavaScript DOM编程艺术学习笔记（八）充实文档的内容

display:inline 把本来纵向排列的设置成一行 从而横向排列

display:block 让横向排列的元素独占一行 而不是在同一行横着往后排

display:none 可以让其不出现

有的浏览器会把title属性的内容显示为弹出式的提示框有些会把它们显示在状态栏里

对于标记而言，选用html还是xtml是你的自由 重要的是不管选用哪种文档类型 使用的标记必须与选用的doctype一致

所有元素：var quoteElements = quotes[i].getElementsByTagName(“*”) 会返回所有的元素（tag）

JavaScript DOM编程艺术学习笔记（九）CSS-DOM

浏览器里看到的网页其实是由以下三层信息构成的共同体：

结构层 表示层  行为层

结构层：由html或者xhtml之类的标记 语言负责创建。标签对网页内容的语义做出描述

表示层：由css负责完成 描述页面内容如何呈现

行为层：负责内容应该如何响应事件这一问题

这三种技术之间存在一些潜在的重叠区域。例如用dom可以改变网页结构，诸如createElement和appendChild等创建和添加标记(tag)

css上也有这种重叠，如:hover :focus之类的伪类允许你根据用户触发事件改变元素呈现效果。

元素节点的属性 如parentNode nextSibling previousSibling childNodes firstChild lastChild 告诉我们文档中各个节点的关系信息

nodeType nodeName 属性包含元素本身的信息

文档每个元素节点都有一个属性style 

style包含元素样式 查询style属性将返回一个对象而不是简单的字符串 样式都存放在style对象的属性里

如果要获取元素的font-family可以用element.style.fontFamily 因为-号不能出现在函数或者变量名里。background-color也会写成backgroundColor等这种驼峰式的命名

但是在外部样式表css里声明的样式不会进入style对象，在文档的head部分声明的样式也是如此，只有在元素标记里插入style属性才可以用dom style属性去查询

如:<p id=“example” style=“color:gray;font:12px”>这样

即style属性只能返回内嵌样式！

但是在js里拿到元素 然后用elem.style.color这种方式去设置颜色 就能在js里拿到值

css允许:hover等伪类根据html元素的状态改变样式，dom也可以通过onmouseover等事件对html元素的状态变化做出响应

如果不想使用dom直接设置或者修改那么多样式，可以设置一个className 然后在css里设置那个class

原来是elem.style.color = “black” 现在改成elem.className = “intro” 然后css里 .intro{color:black}

如果你是想追加而不是替换属性，用elem.className += “ disclaimer”（注意前方有个空格）不过追加前当然要检查是否为空 如果已经有属性了再追加 没有就直接设置