一.节点.
1.父节点:parentNode;
2.兄弟节点:
(1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling);
(2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling);
3.子节点:
(1).选中第一个子节点:firstElementChild(在Ie中用firstChild);
(2).选中最后一个子节点:lastElementChild(在ie中用lastChild);
(3).选中所有的子节点:children(在ie中用childNodes);
二.dom节点的操作;
1.创建节点;
createElement;如:var lis=document.createElement(“li”);
2.添加节点;
(1).appendChild();添加孩子在盒子的最后面;
(2).insertBefore();插入节点,如:lis.insertBefore(pi,pi1);pi为插入的节点;pi1为被插入的节点;
如果pi1为:null则默认生成的盒子放到最后面;否则放到pi1前面;
3.移除节点;
removeChild();如:lis.removeChild(pi1);既能移除本来就有的,有能移除自定义添加的;
4.克隆节点;
cloneNode();如: lis.appendChild(pi1.cloneNode());
5.替换节点;
replaceClid();
三.offset家族;(js中有一套方便的获取元素尺寸的方法);
1.操作对象.offsetLeft 和offsetTop,(返回一个数,而style.left返回一个带单位的字符串); 偏移量左,对于高级浏览器,是自己的外边框到定位父容器内边框的距离.兼容性差,不同浏览器要考虑不同适配;对于ie6,ie7,和高级一样,对于ie8是从父容器的外边框开始算的;
2.操作对象.offsetParent 每个标签对象都有这个属性,获得自己偏移参考的盒子,对于高级浏览器,指的是参考有定位的父容器,如果都没有定位,参考body;跟自己有没有定位无关; 对于Ie6.ie7 如果自己没有定位,1.父容器定位了,找父容器,2.父容器没定位参考自己的祖先元素中离自己最近的有width或者有height的元素;如果自己定位了,就是自己祖先元素中离自己最近的有定位的元素;
(自定位,父无边;)能保证在浏览器中兼容;
3.offsetWidth和offsetHeight 一个盒子的offsetＷidth值就是自己的 width+左右padding+左右border的宽度;如果盒子没有宽度,所有浏览器都将把px值当做offsetWidth,而不是100%;如果盒子没有高度,用文字撑的,所有浏览器都将把px值当做offsetHeight;
四.client家族;
clientWidth和clientHeight 就是自己的width+padding的值.如果盒子没有宽度,所有浏览器都将把px值当做clentWidth,而不是100%;如果盒子没有高度,用文字撑的,Ie6 的clientHeight是0;其他浏览器都是数值;
偏移量家族的属性只能获取不能修改;
五.scroll家族;
scrollTop和scrollLeft;
scrollTop 被卷去的头部;就是当滚动滚轮浏览器网页的时候网页隐藏在屏幕上方的距离;
六.其他;
1.scrollWidth 大小是内容的大小;
2.window.screen.Width 获得屏幕分辨率的宽;
七.event的常见属性;(高级浏览器直接写event.对于Ie6.用window.event;)
1.event.offsetX 光标相对于自己盒子边框内侧的水平位置,不包括边框;
2.event.offsetY 光标相对于自己盒子的垂直位置;
3.pageX 光标相对于网页的水平位置;(适配不好);
4.pageY 光标相对于网页的垂直位置;
5.screenX 光标相对于屏幕的水平位置;
6.screenY 光标相对于屏幕的垂直位置;
7.clientX 光标相对于网页的水平位置(可见区域);
8.clientY 光标相对于网页的垂直位置(可见区域);