1. 操作常用方法
1.1 访问/获取节点
document.getElementById(id); //返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name); //返回带有指定名称的节点集合 注意拼写:Elements
document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合 注意拼写：Elements
document.getElementsByClassName(classname); //返回带有指定class名称的对象集合 注意拼写：Elements
1.2 创建节点/属性
document.createElement(eName); //创建一个节点
document.createAttribute(attrName); //对某个节点创建属性
document.createTextNode(text); //创建文本节点
1.3 添加节点
document.insertBefore(newNode,referenceNode); //在某个节点前插入节点
parentNode.appendChild(newNode); //给某个节点添加子节点
1.4 复制节点
cloneNode(true | false); //复制某个节点 参数：是否复制原节点的所有属性
1.5 删除节点
parentNode.removeChild(node); //删除某个节点的子节点 node是要删除的节点
注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除操作。通过这个方法，就可以在 IE和 Mozilla 完成正确的操作。
nodeType 属性可返回节点的类型.最重要的节点类型是：
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<th width="30">元素类型</th>
<th>节点类型</th>
</tr>
<tr>
<td>元素element</td>
<td>1</td>
</tr>
<tr>
<td>属性attr</td>
<td>2
</td>
</tr>
<tr>
<td>文本text</td>
<td>3
</td>
</tr>
<tr>
<td>注释comments</td>
<td>8
</td>
</tr>
<tr>
<td>文档document</td>
<td>9
</td>
</tr>
</table>
1.6 修改文本节点
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<th width="30">方法</th>
<th>作用</th>
</tr>
<tr>
<td>appendData(data);</td>
<td>将data加到文本节点后面</td>
</tr>
<tr>
<td>deleteData(start,length);</td>
<td> 将从start处删除length个字符
</td>
</tr>
<tr>
<td>insertData(start,data);</td>
<td>在start处插入字符,start的开始值是0;
</td>
</tr>
<tr>
<td>replaceData(start,length,data);</td>
<td>在start处用data替换length个字符
</td>
</tr>
<tr>
<td>splitData(offset);</td>
<td>在offset处分割文本节点
</td>
</tr>
<tr>
<td>substringData(start,length);</td>
<td>从start处提取length个字符
</td>
</tr>
</table>
1.7 属性操作
getAttribute(name) //通过属性名称获取某个节点属性的值
setAttribute(name,value); //修改某个节点属性的值
removeAttribute(name); //删除某个属性
1.8 查找节点
parentObj.firstChild; //如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObj.firstChild.firstChild.....
parentObj.lastChild; //获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild.....
parentObj.childNodes; //获得节点的所有子节点，然后通过循环和索引找到目标节点
1.9 获取相邻的节点
curtNode.previousSibling; //获取已知节点的相邻的上一个节点
curtNode.nextSlbling; // 获取已知节点的下一个节点
1.10 获取父节点
childNode.parentNode; //得到已知节点的父节点
1.11 替换节点
replace(newNode,oldNode);
2. 获取文本内容
2.1 innerHTML
innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法
element.innerHTML 会直接返回element节点下所有的HTML化的文本内容
<body>
<div>文本</div>
<div>文本</div>
</body>
document.body.innerHTML //返回"<div>文本</div><div>文本</div>";
同样逆向的：
document.body.innerHTM="<div>文本</div><div></div>"会生成
<body>
<div>文本</div>
<div>文本</div>
</body>
！注意 innerHTML方法只能作用于元素节点调用；文本节点并不能使用这个方法返回undefined！
2.2 nodeValue
nodeValue是一个HTML DOM的对象属性；
同样的 可以通过 nodeValue设置节点的文本内容也可以直接返回文本内容
直接用节点对象调用就都可以： 如上例
document.getElementsByTagName(div)[0].childNodes[0].nodeValue //返回“文本”
另外 nodeValue 属性并不只存在于文本节点下 元素节点和属性节点对象也都具有nodeValue属性
属性节点的 nodeValue属性返回属性值
元素节点的 nodeValue属性返回null
2.3 textContent
textContent与innerHTML方法类似会返回对象节点下所有的文本内容
但是区别为 textContent返回的内容只有去HTML化的文本节点的内容 如上例：
document.body.textContent //返回"文本文本" ！注意在DOM中标签换行产生的空白字符会计入DOM中作为文本节点
另外IE8以前不支持textContent属性
2.4 innerText
innerText方法与textContent方法类似 并且和innerHTML一样也是作用于元素节点上
但是浏览器对于这两种方法解析空白字符的机制不一样；不是很常用
类似的还有outText outHTML等类似操作文本相关的方法，不是很常用不介绍了；
最后要提醒一点：文本与文本节点一定要区分，有些方法是依靠元素节点返回子文本内容，有些方法是文本节点返回自身文本内容，文本节点是对象而文本只是字符串；
网友评论