2018/9/5 Rangeについて javascript

<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>

<p id=”one”>1abcdefghi</p>
<p id=”two”>
2abc
<strong>
強い
</strong>
gh
</p>
<p id=”three”>3abcdefgh</p>
<br><br><br>

<p id=”vanish”>消えろ!!</p>

<script type=”text/javascript”>
var rng1=document.createRange();
var rng2=document.createRange();
var rng3=document.createRange();
var rngs=document.createRange();
var p1=document.getElementById(“one”);
var p2=document.getElementById(“two”);
var p3=document.getElementById(“three”);
var ps=document.getElementsByTagName(“strong”)[0];
var pv=document.getElementById(“vanish”);

rng1.selectNode(p1);

rng2.selectNodeContents(p2);
rng3.selectNodeContents(p3);
rngs.selectNodeContents(ps);
pv.addEventListener(‘mouseover’,function(){
rngs.deleteContents();
//alert(“rng2 vanished”);
//rng3.deleteContents();
//alert(“rng3 vanished”);
rng1.deleteContents();
//alert(“rng1 vanished”);
},false);

//rng.deleteContents();

</script>
</body>
</html>

コンテナとオフセットのオフセットがuhyohyoの説明と実際コンソールの表示が違う。何かあるのか。困り果てる。

あとpsのところを

var ps=document.getElementsByTagName(“strong”);

としてエラーが出て原因がわからず苦労した。エラー内容は

‘selectNodeContents’ on ‘Range’: parameter 1 is not of type ‘Node’.

strong要素が一つしかなくてもノードリストはノードリストなんですよね。やだやだ。


 

コメントを残す

メールアドレスが公開されることはありません。