JavaScript

                                                          javaScript-----BOM--DOM

 

BOM:
window
    方法：3种弹窗；close();open();！！！计时函数！！！
    属性：history，location，document
history
    方法：history.forword();前进
          history.back();后退
          history.go(?);跳转到历史的哪个页面
location
    属性:host;hostname;href
    方法:刷新location.reload()
         跳转location.replace("跳转的URL || 相对路径");
document对象
    方法:找到元素标签（getElementById();getElementsByTagName();
    getElementsByName();getElementsByClassName()）
    元素标签对象:
    方法：innerHTML获得文本值或者设置文本值，value获得属性值或者设置属性值
    .style修改样式
！！！！代码调试
多看控制台，实在不行debug（请看变量）

window对象的两个重要方法，定时器
讲解这两个方法的传参.


DOM:

1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:
第一部分:节点属性
a:parentNode 返回节点的父节点
b:childNodes 返回子节点集合,可以for循环遍历
c:firstChild 返回节点的第一个子节点, 空白内容算第一个文本节点
d:lastChile 返回最后一个子节点 同上
e:nextSibling 返回下一个节点 空白内容算第一个文本节点
f:previousSibling 返回上一个节点 同上

第二部分:元素属性
a:firstElementChild 第一个是元素的子节点,避开空节点
b:lastElementChild 最后一个是元素的子节点,避开空节点
c:nextElementSibling 下一个是元素的弟节点,避开空节点
d:previousElementSibling 上一个是元素的兄节点,避开空节点

第三部分:操作节点的属性
a:getAttribute("属性名字") 获得属性的值
b:setAttribute("属性名字","属性值") 用来设置属性的值

节点分很多种:常规: 标签节点 属性节点 文本节点
nodeType 1 2 3
nodeName 标签名 属性名 #text
nodeValue null 属性值 文本内容
对应的: Element Attribute Text

考虑浏览器兼容 用 || 例如:var node=node.firstChild || node.firstElementChild;

2.创建和访问节点
a:createElement(TagName) 创建一个节点
b:FatherNode.append(ChildNode) 添加子节点到父节点的末尾
c:insertBefore(A,B) 将A节点添加到B节点之前
d:cloneNode(Node) 复制指定的节点,返回新节点

3.删除和替换节点
a:removeChild(TagName) 操作删除某个父节点的指定子节点
b:replaceChild(newChild,oldChild) 替换某个父节点的指定子节点为新的子节点

4.操作节点样式
a:获取并修改 style属性 例: 获取节点 .style.color="red"; 说明:获取的是内部样式的style属性
b:获取并修改 className属性 例: 获取节点 .className="myClass";
c:获取外部样式style属性
语法:元素.currentStyle.样式属性; IE浏览器支持
语法:document.defaultView.getComputedStyle(元素,null).属性; 非IE浏览器支持

5.获取元素位置 一般是只读属性...........
参考:http://www.w3school.com.cn/jsref/dom_obj_all.asp
例子:document.offsetHeight 获取元素的高度
注意:兼容性问题,获得滚动条时:document.documentElement.scrollTop || document.body.scrollTop

6.补充知识点:
onclick事件除了直接放在 input标签内 还可以 : 事件源.onclick=function(){JS代码};
滚动条事件 window.onScroll = function(){};