直接附上代码
<div id="div_big">
改变本层,不改变里面的,可以使用jq
<div id="div1">
例如:改变我,但不改变 #div1内的其他元素的值
(内层元素数量,层数不确定)
<div id="hyt">
<span id="span_1">content</span>
<span id="span_2">content</span>
</div>
</div>
<div id="div3">
例如这个 就有很多层了
<div id="hyt1">
<span id="span_11">content</span>
<span id="span_21">content</span>
<div>2
<span>
1
</span>
<div>3
<div>2
<span>55555</span>
<div>3</div>
</div>
</div>
</div>
</div>
</div>
<div>TODO <span>content</span> </div>
</div>
最好和规范的方式是:把文字放到相应标签里面,处理快捷效率也高。
纯文本也是节点 要用原生js取 而且不好用选择器
如果你一定要满足这个变态要求的话,只能每次更改时先把div1内的所有内容取出,然后用正则去匹配替换掉需要替换的内容。。
最简单的方法就是用个span标签包裹内容,每次替换span标签内的内容就OK了。
文字本身也是一个父节点.childNodes数组中的节点。
在现代浏览器中,访问节点本身.textContent属性即可。
在老浏览器里我忘了,查一下。再不济用.replaceChild(document.createTextNode,)总是可以的。
<div>
只换这里
<input value="不换这里,证据是编辑完这个框里的文字后不会受影响">
<button onclick="this.parentNode.childNodes[0].textContent='换成这个';">
点击更换(先进浏览器)
</button>
<button onclick="this.parentNode.replaceChild(document.createTextNode('换成这个'),this.parentNode.childNodes[0]);">
老版本IE点这个(兼容先进浏览器)
</button>
</div>
说这样不行的,能给出你的代码吗?
先明确一个问题:文本只会位于一处,还是分散在各个元素之间?
是这种:
<div>
blablabla
<div>...</div>
<div>...</div>
</div>
还是这种?
<div>
blablabla
<div>...</div>
blablabla
<div>...</div>
</div>
来了!
<div id="div1">
<div>...</div>
blablabla
<div>...</div>
</div>
<button id="btn">修改</button>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var div1 = document.getElementById('div1');
var nodes = div1.childNodes;
var node;
for (var i = 0; i < nodes.length; i++) {
node = nodes[i];
if (node && node.nodeType === 3 && node.nodeValue.trim().length > 0) {
node.nodeValue = 'Change me!';
break;
}
}
};
</script>
先转成字符串,然后正则,再转回去。这样有点麻烦。
还是建议写规范点,不然后续修改会很麻烦