DOM的概念

文本格式的HTML文档转化为DOM后，成为一棵由各节点组成的树

Core-DOM之获取节点对象
getElement系列的获取节点所谓节点就是上面流程图的document下面的

Core-DOM之根据层次方式访问节点
层次方式就是通过本节点用来访问其他节点

或者下面的是匹配IE浏览器的element属性
注意：nextSibling与nextElementSibling之间的区别在于不同浏览器认不同的属性。


Core-DOM之节点类型，主要关注1和3

实例：

重点HTML-DOM之CRUD概要
1.操作节点的属性（name，value，src等）
2.创建和插入节点
3.删除和替换节点
1.HTML-DOM之标记属性的读写
语法：
1，获取某个节点的属性方法
节点 . getAttribute（“属性名”）；
2.设置节点某个属性方法
节点 . setAttribute(“属性名”，“属性值”);

2.HTML-DOM之创建并添加节点
创建节点：
document.createElement(“tagName”);
父节点添加子节点在最后面：
父节点.appendChild(新子节点)
父节点.把新节点添加在旧节点的前面：
子节点.parentNode.insertBefore（新兄弟，旧兄弟）
克隆或者复制某个节点：
某个节点.cloneNode（deep）；
其中的deep为false为浅克隆

3.HTML-DOM之删除和替换节点
父节点删除子节点：
父节点。removeChild（node）
父节点替换子节点：
父节点。replaceChild(newNode,oldNode)


CSS-DOM的主要操作
1.操作节点样式
2.获取元素的样式

CSS-DOM之style属性的读写
CSS属性转为style.样式属性的规则：去‘-’ ，改‘-’后第一个字母为大写。

DOM新的事件
1.onclick
2.onmouseover
3.onmouseout
4.onmousedowm

CSS-DOM之className属性的读写

CSS-DOM之style属性的浏览器兼容性和设置与实际值不同时的解决方案

javascript经典浮动广告的实现
涉及的相关属性有:

代码说明，参看示例
总结
BOM和DOM
BOM = Browser Object Model 浏览器对象模型
与浏览器互动的对象结构

window对象方法：
交互——prompt()/alert()/confirm()
处理窗体——open()/close()
定时相关——setTimeout(“js代码”, ms)/setInterval(“js代码”, ms)
clearTimeout(varName)/clearInterval(varName)
获到节点对象——getElementById()
obj.innerHTML和obj.innerText
window对象属性
location/history

    location.href           可以改变浏览的URL
    location.reload()       刷新  history。go(0);

    history.back()          history.go(-1)
    history.forward()       history.go(1)

Date对象的getXXX()
Math对象的random()/round()/floor()/ceil()

DOM=Document Object Model 文档对象模型

Core-DOM/HTML-DOM/CSS-DOM

Core-DOM
获取节点对象的方法
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
在DOM的层次结构中访问的属性
找父亲 obj.parentNode
找兄弟
上一个哥哥 obj.previousSibling obj.previousElementSibling
下一个弟弟 obj.nextSibling obj.nextElementSibling
找儿子
第一个儿子 obj.firstChild obj.firstElementChild
最后一个儿子 obj.lastChild obj.lastElementChild
所有儿子 obj.childNodes
节点的三个常用属性
nodeName 标记名称
nodeValue 文本节点时，文本内容
nodeType 1标记，2是属性，3是文本，8是注释

HTML-DOM
节点操作
节点属性的读写 obj.getAttribute(name) obj.setAttribute(name,value)
创建并添加节点
创建节点 document.createElement(tagName)
添加节点
父节点.appendChild(新子节点)
旧节点.parentNode.insertBefore(新节点, 旧节点)

    删除和替换节点
                父节点.removeChild(子节点)
                要删除的节点.parentNode.removeChild(要删除的节点)
                被替换的旧节点.parentNode.replaceChild(新节点, 被替换的旧节点)

CSS-DOM
style属性 CSS属性名去-，改-后的第一个字母为大写
className属性
也可以通过HTML-DOM的属性操作来改变样式
obj.setAttribute(“style”, “font-size:12px;color:red;”);
obj.setAttribute(“class”, “RedBold clear”);

    读取style属性时，浏览器兼容性解决方案：IE方案和标准方案

    IE方案：         obj.currentStyle.属性名
    标准方案：   document.defaultView.getComputedStyle(obj,null).属性名