节点

js中获取元素的宽，高，距离已定位祖先元素左距离与上距离：

• xxx.offsetWidth/offsetHeight = 元素宽/高 + padding + border 返回值为number
• xxx.clientWidth/offsetHeight = 元素宽/高 + padding 返回值为number
• xxx.style.xxx 获取的是元素的内联样式 返回值为字符串

!当元素隐藏起来的时候无法获取它的宽高

设置元素的样式

• xxx.style.xxx 设置的是元素的内联样式 注意+'px'

节点类型常量

• Node.ELEMENT_NODE (1) 元素节点
• Node.ATTRIBUTE_NODE (2) 属性节点
• Node.TEXT_NODE (3) 文本节点
• Node.COMMENT_NODE (8) 注释节点

节点类型常量都是Node对象的属性，但是IE不支持Node对象,但是仍可以使用数值

创建节点

createElement (tagname) 创建标签名为tagname的元素

var oP = document.createElement('p');

节点类型的特性和方法

标签节点

特性/方法	类型/返回类型	说明
nodeName	string	节点名称 普通标签的名称就是tagname 文本节点的标签名是#text 属性节点返回属性名
nodeType	number	节点类型
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
nextSibling	Node	指向后一个兄弟节点 如果这个节点就是最后一个兄弟节点，那么该值为null
perviousSibling	Node	指向前一个兄弟节点 如果这个节点就是第一个兄弟节点，那么该值为null
appendChild(node)	Node	将node添加到childNodes的末尾 oDiv.appendChild(oP); oDiv为父元素节点
replaceChild (newnode,oldnode)	Node	将childNodes中的oldnode替换成newnode oDiv.replaceChild(oA, oP)
removeChild(node)	Node	从childNodes中删除node
insertBefore (newnode,refnode)	Node	在childNodes中的refnode之前插入newnode

nextSibling与previousSibling 在标准浏览器（谷歌 Safari 火狐。。）会找到 回车 空格 在IE浏览器里会直接找到下/前一个元素节点

nextElementSibling 下一个元素节点 标准浏览器里支持 IE浏览器不支持

previousElementSibling 找到前一个兄弟元素节点 标准浏览器 ie浏览器不支持

firstChild 和 lastChild 在标准浏览器中也会找到回车

function first(elem){
  elem = elem.firstChild;
  if (elem.nodeType != 1) {
    elem = next(elem)
  }
  return elem
}

寻找下一个元素节点的函数

function next(elem) {
  do {
    elem = elem.nextSibling
  } while (elem.nodeType != 1)
  return elem
}

function next_new(elem) {
  var ua  = navigator.userAgent
  if(ua.indexOf('MSIE') != -1) { // ie
    elem = elem.nextSibling
  } else { // 标准浏览器
    elem  = elem.nextElementSibling
  }
  return elem
}

寻找前一个元素节点的函数

function pre(elem) {
  do{
    elem = elem.previousSibling
  }while(elem.nodeType != 1)
  return elem
}

function pre_new(elem) {
  var ua = navigator.userAgent;
  if(ua.indexOf('MSIE') != -1) {
    elem = elem.previousSibling
  } else {
    elem = elem.previousElementSibling
  }
  return elem
}

属性节点

设置属性 setAttribute(name, value) 可以直接在HTML里看到属性

oDiv.setAttribute('index', 1)

获取属性 getAttribute(name)

console.log(oDiv.getAttribute('name'))

移除属性 removeAttribute(name)

xxx.index = 1;也可设置属性 但不可以在html中看见

xxx.innerHTML 既可以设置文本也可以获取文本