DOM

DOM

document是内存自动创建的，是dom的最低成对象

所有的标签都是元素节点，换行是文本节点，元素节点返回1，文本节点返回3，属性节点返回2

childNodes：获取所有的子节点

children：获取所有子元素中的元素节点

firstChild在IE里边获取到的是第一个元素节点，DOM浏览器里边获取到的是第一个子节点

处理兼容性问题

eg：var node = oul.firstElementChild || oul.firstChild

获取最后一个节点

eg：var oli = oul.lastElenmentChild;

获取前一个兄弟节点

eg：var node = oul.previousElenmentChild;

获取前一个兄弟节点

eg：var node = oul.nextElenmentChild;

获取父节点

eg：var node4 = oli1.parentNode;

获取到定位父级

eg：var node5 = odiv.offsetParent;

创建一个节点

eg：var oli2 = document.createElement("li");

oli2.innerHTML="test";

将创建好的节点放入dom树结构，默认添加在所有节点的最后

oul.appendChild(oli2);

找到对象，删除里边的子节点：removeChild

获取属性

获取div的属性：var attrArr odiv.attributes 注意获取的属性和元素设置的顺序相反

增加属性：setAttributes("","");

删除属性：removeAttributes("");

得到指定属性的值：getAttributes("");

确定一个已存在的元素时：可以。。。

文本节点操作

eg：创建一个文本节点，将文本节点加入到li中

找到节点添加

appendDate（）：默认将文本放在当前子节点后面

insertDate（）：增加文本放在指定的位置，第一个参数表示位置，第二个参数表示参数内容

deleteDAte（）：删除指定位置文本，第一个参数是位置，第二个参数表示长度

replaceDate（）：替换稳本，第一个参数表示位置，第二个表示长度，第三个参数表示内容3

表格操作

增加td：tr对象调用insertCell() 增加列：表格对象调用insertRow()

删除行：deleteRow()、deleteCell()

获取到所有行：table.rows //得到一个数组

替换节点：replaceNode() 第一个参数是新增的，后一个是要替换的

克隆节点：cloneNode(true/false) 深克隆true：克隆当前节点和其子节点 浅克隆false：只克隆节点

操作下拉框

var osel = document.getElementById("sel1");

第一种方法 //直接操作节点

osel.children

osel.children[i].selected == true

option被选中：option.selected==true

第二种方法 //new一个新的option

osel.options：得到所有的option

osel.options[0].text：获取option的text文本

osel.options[0].value：获取option的value

第三种方法 //selectedIndex获取被选中元素的下标

osel.options[osel.selectedIndex]

多选得到的是一个数组