想总结一下DOM操作的一些原生方法和属性,一直迟迟没有动手,今天就来侃侃:
1.DOM元素属性:
(1)childNodes 记录元素有多少直接子节点
注意:第一,是直接子节点;第二:在标准浏览器中直接子节点包含空白文本节点,在IE下不包含;
(2)firstChild 取得第一个子节点
问题:如何获取子节点的内容? 答案揭晓:innerHTML属性;
(3)lastChild 取得最后一个子节点
(4)nextSibling 取得下一个相邻节点
(5)nodeValue 取得文本节点的文本内容
注意:只有文本节点才有nodeValue,文本节点的nodeType为3,元素节点的nodeType为1;
(6)parentNode 取得该元素的父节点
(7)previousSibling 取得上一个相邻节点
2.DOM元素方法
(1)getElementById() 参数为某节点的id值 取得以id为参数的节点;
(2)getElementsByTagName()参数为元素节点名称 取得某个节点类型的数组
(3)getElementsByName()参数为某个或者某一系列节点name属性值 取得包含name属性值的一个元素数组;
(4)hasChildNodes() 无参数,返回一个boolean,判断某个元素时候拥有子节点,有则返回true,反之false;
(5)getAttribute() 参数为属性节replaceChild点名称,返回该节点该属性值;
(6)setAttribute()两个参数,第一个为属性节点名称,第二个为属性节点值,无返回值,设置该节点属性值;
3.操作DOM元素
(1)createElement() 创建一个节点,参数为节点名称;
(2)createTextNode()创建一个文本节点,参数为文本值;
(3)A.appendChild(B)将B添加到A中;
(4)parent.insertBefore(new,old) 将new作为parent的子节点插入到old前面;old为可选;new永远为parent的子节点;
(5)removeAttribute(name)移除属性名称为name的属性节点;
(6)removeChild(child)移除child子节点;
(7)parent.replaceChild(new,old)new节点替换old节点;
(8)操作table
var _table = document.createElement("table"); table.insertRow(i); row.insertCell(i); table.row[i].cell[i]; table.deleteRow(i); table.deleteCell(i);