Dom节点操作常用方法和获取文本内容
2017-12-04 00:00
344 查看
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等类似操作文本相关的方法,不是很常用不介绍了;
最后要提醒一点:文本与文本节点一定要区分,有些方法是依靠元素节点返回子文本内容,有些方法是文本节点返回自身文本内容,文本节点是对象而文本只是字符串;
相关文章推荐
- DOM 操作中几种获取文本内容的方法
- 获取文本节点内容(nodeValue)的方法。
- Dom节点操作常用方法
- JavaScript DOM和节点以及获取元素的常用方法
- javascript操作DOM节点常用方法
- Dom节点操作常用方法
- Zookeeper命令行操作(常用命令;客户端连接;查看znode路径;创建节点;获取znode数据,查看节点内容,设置节点内容,删除节点;监听znode事件;telnet连接zookeeper)
- js dom操作获取节点的一些方法
- JavaScript 节点操作Dom的常用属性和方法
- Zookeeper命令行操作(常用命令;客户端连接;查看znode路径;创建节点;获取znode数据,查看节点内容,设置节点内容,删除节点;监听znode事件;telnet连接zookeeper)
- 【经验积累】JS,HTML DOM 在dom操作获取节点时,要注意文本节点的问题
- jQuery用contents方法取非DOM节点中的文本内容
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
- dom(一)——获取文本内容的方法
- 怎么用js操作dom节点的一些方法
- 准备总结javascript中dom节点操作,获取节点值操作
- javascript常用函数方法(DOM基本操作)
- 总结的一些jquery获取更改dom元素常用方法
- 原生JS操作DOM的一些常用方法集合【转】
- js获取节点 dom操作