DOM(document object model)文档对象模型,它是w3c制定的一套标准,这套标准可以让我对 xml ,html文件的操作有一定的规范。下面对dom的层次结构做一定的了解:
1>document: 是所有元素节点的父类
documentElement: document.documentElement
documentType:
documentFragment: 文档碎片,作用在向文档中添加数据时,为减少刷新频率可以用它来做缓存
创建文档碎片:document.createDocumentFragment();
2>Element: 元素,从标签的开头到结束,包含所有的属性和文本
attributes: elements.attributes.XX
createElement(tagname);
3>Text: 文本节点,没有子节点
createTextNode(str);
上面列举的是最常用的document中的层次结构,接着说下对节点的操作及相关方法:
Node Property:
1>nodeType : 节点的类型
nodeType==1 元素节点,nodeType==2 属性节点,nodeType==3文本节点
2>nodeName:节点的名字 <==> tagname
3>nodeValue : 节点值,具体情况具体分析
4>parentNode:当前节点的父节点
5>firstChild:当前元素的第一个子节点
6>lastChild:当前元素的最后一个子节点
7>childNodes:当前元素的所有子节点,包括文本节点
8>previousSibling : 上一个兄弟节点
9>nextSibling: 下一个兄弟节点
Node Method:
1>创建元素节点: document.createElement(tagname)
2>增加节点:parentNode.appendChild(currentElement);
3>删除节点:parentNode.removeChild(currentElement);
4>替换节点:parentNode.appenChild(newElement,oldElement);
4.1>前插: insertBefore(newElement,oldElement);
5>判断元素是否有子节点: hasChildNodes()
6>遍历节点:
遍历方式一:NodeIterator
var iterator = document.createNodeIterator(fromElement,NodeFilter.show_all,HasNotNode,false);
Arguments:
fromElement:从哪里开始检索节点
NodeFilter:节点过滤器,NodeFilter.show_all //现实所有节点
HasNotNode: 要过滤其中的那些元素,自定义function
Methods:
iterator.nextNode()
遍历方式二:NodeWorkerIterator
var iterator = document.createWorkerIterator(fromElement,NodeFilter.show_all,HasNotNode,false);
Arguments:
the same as iterator
Methods:
iterator.nextSibling();
对属性的操作:
Attributes:
items
methods:
getAttribute(name); <==> attributes.getNamedItem(name).value
setAttribute(name,value);<==> attributes.getNamedItem(name).value = newValue;
removeAttribute(name);<==> attributes.getNamedItem(name).value = "";