点击切换帐号登陆
帐号密码登陆

作为Text文本节点的内容插入

# 作为Text节点的元素内容

## 1. nodeValue

* `nodeType`节点类型为`Text`文本,它的`nodeValue`才有意义
* `Element`元素节点的`nodeValue`为`null`
* 该属性除了在`HTML`文档可用,也适用于`XML`文档

--------------------------------------------

## 2. 示例源码

```html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作为Text节点的元素内容</title>
</head>
<body>
<p>html中文网<strong>欢迎您</strong></p>

<script>
// Node.prototype.nodeValue 属性: 节点的内容
var p = document.getElementsByTagName('p')[0];
console.log(p.childNodes.length);
console.log(p.firstChild);
console.log(p.firstChild.nodeType); // 3 表示是文本类型的节点
console.log(p.firstChild.nodeValue); // 3 表示是文本类型的节点

// nodeValue属性可读可写
p.firstChild.nodeValue = 'php.cn';

// 创建函数,模拟textContent效果
// 递归遍历当前节点也子节点,将文本拼接在一起
// 递归是指在当前函数中,再次调用自已, 类似循环,所以也必须要有终止递归的条件,防止死循环
function textContent(ele) {
var child;  // 遍历的起始节点
var type;   // 当前节点的类型
var res=''; // 最终的返回值

// 从当前元素的第一子节点开始,只要存在,则遍历, 遍历完成再获取下一个兄弟节点
for (child = ele.firstChild; child != null; child = child.nextSibling) {
// 获取当前节点的类型
type = child.nodeType;
// 如果当前节点的类型是Text,即nodeType值为3,则获取它的内容nodeValue
if (type === 3) {
res += child.nodeValue;
// 如果不是文本节点,判断是否是元素节点(值为3)
} else if (type === 1) {
// 如果是元素节点, 则在该节点上递归调用本函数,进入下一次遍历
res += textContent(child);
}
}
// 返回最终的内容文本
return res;
}

var text = textContent(p);
console.log(text);
</script>
</body>
</html>

```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号