js课程笔记（二）DOM小结

js课程笔记（二）DOM小结

一、DOMtree

var obj = 获取一个元素

1.父子关系

obj.children //获取obj的所有元素节点

obj.parentNode //获取obj的父元素节点

2.兄弟关系

兼容IE 和[chrome FF(跳过文本节点)]

obj.previousElementSibling||obj.previousSibling //获取obj的上一个兄弟节点

obj.nextElementSibling || obj.nextSibling //获取obj的下一个兄弟节点

3.首尾节点

兼容IE 和[chrome FF(跳过文本节点)]

obj.firstElementChild || obj.firstChild //获取obj的第一个元素节点

obj.lastElementChild || obj.lastChild  //获取obj的最后一个元素节点

二、DOM操作

1.创建

var elem = document.createElement("tagName");

2.添加 （自带剪切功能,拼接完就没有了）

1)obj.appendChild(elem); // 将elem拼接到obj的最后一个子元素

2)obj.insertBefore(elem,插入谁的前面);//将elem拼接到obj的指定子元素（第二个参数）前面

3.删除

obj.removeChild(elem);//将elem从obj中移除掉

三、物体（元素）信息

1.滚动条距离页面顶部的距离

兼容IE 和 chrome FF（位置不可置换）

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

还有左侧的距离

var scroLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

2.可视区窗口高度

var clientHeight = document.documentElement.clientHeight;

3.获取元素盒模型宽高

var oHeight = obj.offsetHeight;//包含padding 和border值在内的高度

var oWidht = obj.offsetWidth;// 包含padding 和border值在内的宽度

**和之前封装的getStyle（获取计算后样式的宽高值得不同），该方式得到的是数据非字符串，并且包含盒模型中的padding和border值在内，而getStyle则只是内容部分。**

var oRHeight = obj.scrollHeight;// 获取obj的实际内容高度,和getStyle类似

var oRWidth = obj.scrollWidth;//获取obj的实际内容宽度，和getStyle类似

4.元素距离定位父级的距离（如果没有定位父级将默认body为其定位父级）

var oLeft = obj.offsetLeft;//元素距离定位父级的左侧距离

var oTop = obj.offsetTop;//元素距离定位父级的上面距离

四、元素属性操作

1.获取

obj.getAttribute("属性名");//获取到obj的属性**的值

2.设置

obj.setAttribute("属性名","属性值");//设置obj的属性**的值为**

3.删除

obj.removeAttribute("属性名");//删除obj的某一属性

***js中设置的属性，通过js获取（.或者[ ]方式），setAttribute则用getAttribute获取，成对使用**

五、innerHTML 和appedChild区别

innerHTML是完全把以前的内容删除重新赋值

appendChild是局部添加，而且绑定事件或者为部分新添加元素设置属性较前者方便。