Dom节点操作常用方法和获取文本内容@慕课网原创_慕课网

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>
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等类似操作文本相关的方法，不是很常用不介绍了；

最后要提醒一点：文本与文本节点一定要区分，有些方法是依靠元素节点返回子文本内容，有些方法是文本节点返回自身文本内容，文本节点是对象而文本只是字符串；