JSDOM之节点

javascript-节点属性详解

根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点

一、如何获得节点引用

　　1.旧的获取节点引用方式 　　　　getElementById() 　　　　getElementByTagName()　　//获取的是HTML中的所有标签，返回的顺序是它们在文档中的顺序 　　　　getElementByName()　　　　//Name属性不唯一，所以该方法返回的是元素的数组，而不是一个元素

劣势： 　　1.浪费内存 　　2.逻辑性不强

2.通过节点 关系属性 获得节点的引用 　　　　elementNode.parentNode 　　//获得父节点的引用　　　　elementNode.childNodes 　　//获得子节点的集合　　　　elementNode.firstChild 　　//获得第一个子节点　　　　elementNode.lastChild 　　//获得最后一个子节点/　　　　elementNode.nextSibling 　　//获得下一个兄弟节点的引用　　　　elementNode.PReviousSibling 　　//获得上一个兄弟节点的引用

　　　　elementNode.offsetParent //用来获取该对象定位的那个父元素

劣势:兼容性不好。

二、节点的信息(属性)

　　　　节点类型 节点名字 节点值 　　　　nodeType(数值) nodeName nodeValue

　　　　元素节点 1 标签名 null 　　　　属性节点 2 属性名 属性值　　　　文本节点 3 #text 文本　　　　注释节点 8 #comment 注释的文字　　　　文档节点 9 #document null

三、兼容性的方法

　　　　/^/s+$/

　　　　Javascript-节点的增、删、改、查实例讲解

一、创建节点

1>创建元素节点 　　　　document.createElement("元素标签名"); 2>创建属性节点 　　　　document.createAttribute("属性名"); 　　　　对象.属性="属性值" 　　　　对象.setAttribute(属性名,属性值)　 　　　　对象.getAttribute(属性名,属性值)

3>创建文本节点 　　　　对象.innerHTML=""; 　　　　document.createTextNode("文本");

二、追加到页面当中

　　　　父对象.appendChild(追加的对象) 插入到最后 　　　　父对象.insertBefore(要插入的对象,之前的对象) 插入到最后

三、修改(替换)节点

　　　　父对象.replaceChild(要修改的对象,被修改的);

四、删除节点

　　　　父对象.removeChild(删除的对象)　　　　如果确定要删除节点，最好也清空内存 对象=null;