DOM

像素是计算机能接受的最小单位 因此对于带有小数的像素值，会舍去小数

操作元素属性方式

1. oDiv.style.display = "none"
2. oDiv.style["display"] = "none"

3. DOM方式

   • 获取: getAttribute
   • 设置: setAttribute
   • 删除: removeAttribute

   oText.setAttribute("value", "text")
   

用class获取元素

oParent.className //获取className

获取节点

子节点

//获取所有自己点
var oUl = document.getElementById("ul1")
oUl.childNodes // 属性 获取到所有 包括文本节点和元素节点
oUl.children //属性 获取所有的元素节点
oUl.nodeType  // 获取节点的节点类型  

子节点 只算自己下一层的所有元素个数

1. 文本节点
   nodetype为 3

2. 元素节点
   nodetype为 1

父节点

oUl.parentNode

首尾节点

firstChild  //获取第一个子节点
firstElementChild //获取第一个元素子节点

lastChild  // 
lastElementChild //

兄弟节点

nextSibling
nextElementSibling

previsionSibling
nextElementSibling

操作节点

创建元素节点

creatElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点 (追加的节点如果已有其它父节点 会先从父节点删除)

插入元素

insertBefore(原有节点) 在原有节点前插入节点

删除元素

removeChild(节点) 删除一个节点

文档碎片

避免多次操作元素 导致页面多次渲染造成的性能问题，将多次操作元素的操作合并，进行一次渲染即可

var oUl = document.getElementById("ul1")
var oFrag = document.createDocumentFragment()
Frag.appendChild(subLiElement)
oUl.appendChild(oFrag)

问题不大，理论上，只有在很多次的元素操作才会出现问题,并且低级浏览器几乎没有任何影响

document.write

会先清空 再写

document是属于浏览器的

我们常使用的document.write('')其实是window.document.write('')的简写