javascript基础一 （DOM基础一）

DOM操作：

一：操作子节点兄弟节点的方法

1：element.fristChild 只读属性第一个元素节点

标准下：firstChild会包含文本类型节点

非标准下：只包含元素节点

element.firstElementChild 只读属性

标准下；获取第一个元素类型的子节点

非标准下：没有这个属性

其他类似的属性还有

2：elment.lastChild || element.lastElementChild

3：element.nextSibling || elment.nextElementSibling

4：elment.perviousSibling || element.perviousElementSibling

二：父节点

1：element.parentNode 只读属性 当前节点的父节点 标准下非标准下都可以使用

2：element.offsetParent 只读 属性 离当前元素最近的一个有定位的父节点

ie7下；如果当前元素没有定位默认是body,如果有定位则是html

layout对offsetParent的影响：

ie7下，如果当前元素的某个父级触发了layout,那么offsetParent就会指向到这个触发了

三：offsetLeft offsertTop

offetLeft[Top] 只读 属性 当前元素到定位父级的距离(偏移值)

1：如果没有定位父级

标准:offsetParent body

ie7以下 offsetLeft -> html

offsetLeft[Top]是到body距离

2：如果有定位父级

其他浏览器：到定位父级的距离

如果自己有定位，那么就到定位父级的距离

if7以下：如果自己没有定位那么offsetLeft[Top]是到body距离

四：width clientWidth offsetWidth

style.width //样式宽

clientWidth
//样式宽+padding (可视区宽)

offsetWidth //样式宽=padding+border (占位宽)

五：DOM属性操作

element.getAttribute(attr) 获取指定元素的指定属性的值

element.setAttribute(attr,value)给指定元素的指定属性设置值

element.removeAttribute(attr)移除指定元素的指定属性

自定义属性:

1用.和[ ]的方法无法操作元素的自定义属性

2getAttribute可以操作元素的自定义属性

img.getAttribute("src") //获取src所写的值，ie7下会寻找路径找出img的绝对路径

六： 元素创建操作

node.createElement(node);

node.appendChild() 方法向节点添加最后一个子节点

node.insertBefore(newnode,existingnode) 方法在指定的已有子节点之前插入新的子节点

newnode：必选 需要插入的节点对象

existingnode：可选 在其插入新节点的子节点

1：在标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加

2：ie下如果第二个参数节点不存在会报错

node.removeChild(node);

node：被删除的节点

node.replaceChild(newnode,oldnode);