1.childNodes(属性) 子--节点(node)--集合(s) (返回数组)————————————一般不用
只包含一级子节点,不包含后辈孙级以下的节点,但是节点类型有非常多种(12种),比如元素节点,文本节点,属性节点等等
children(属性) 子节点集合 (返回数组)
与childNodes属性的区别是 只包含【元素类型】节点
2.nodeType(属性) 节点类型
也就是读当前元素的节点类型
3.attributes(属性) 属性列表集合 (返回数组)
下面给一些返回值帮助理解
元素.attributes[0] // [object Attr] 属性对象/数组对象
元素.attributes[0].name 才能获取当前属性的名称,如id,style 元素.attributes[0].value才能获取当前属性的值 比如“haha”;
4.firstChild(属性) :元素.firstChild返回第一个子节点 (但是包含所有节点类型,也就是说会返回文本节点、属性节点、元素节点等)
firstElementChild(属性): 元素.firstElmentChild返回第一个子节点(但是只包含元素类型的节点)
同样的有两个属性:lastChild and lastElementChild,返回最后一个子节点,区别一样
5.nextSibling && nextElementSibling 下一个--兄弟节点
previousSibling && previousElementSibling 上一个-兄弟节点
同上
6. parentNode :当前节点的父级节点 (最近一层的父节点)
offsetParent: 当前节点的父级节点 (离当前元素最近的、有定位的父节点)基本上和CSS上的定位没什么区别,比如一堆父元素只要一个有position:relative 那么就会返回那个定义了位置的父元素 【如果没有定位父级时,默认返回body】
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置【如果没有定位父级时,默认返回html】
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置【如果没有定位父级时,默认返回html】
符一个用到这三个属性的函数:
function poshaha(obj){ var obj=document.getElementById("oDiv1"); var top=0; while(obj){ top+=obj.offsetTop obj=obj.offsetParent } return top }
7.createElement 用法如下:
8.offsetWidth.offsetHeight
返回元素可见区域的宽度,不带单位,单位为px。可见宽度包括元素本身、padding、border。margin不属于可见区域,如果有滚动条,没被显示出来的那部分也不属于可见区域。
9.appendChild ():
意为给一个元素添加一个子元素(节点),添加的节点会作为子节点排在所有子节点的最后
父级.appendChild(新添节点);(和jquery的append用法一样)
insertBefore():
将新的元素插入至一个元素的前面 ,但是比较麻烦的是你得找到两个参数共同的爸爸。
父级.insertBefore(新的元素,被插入的元素)
【这两个方法都在父级上操作】
removeChild()
删除节点
父级.removeChild(要删除的元素【放在变量中】)