интересный момент в Dom 4

WEB_bobby · 29 апр 2007, 14:51

Если попытаетесь добавить разметку в значение текстового узла, браузер обработает ее как обычный текст, вот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>
<p id="sample4">Вот <b>текст</b>, который будем изменять.</p>

<p>
<a href="" onclick="document.getElementById('sample4').firstChild.nodeValue = '<b>If something`s</b> hard to do...'; return false;">меняем раз</a>
::
<a href="" onclick="document.getElementById('sample4').firstChild.nodeValue = '...then it`s <i>not worth</i> doing!'; return false;">меняем еще</a>
</p> 

</body>
</html>

1.Есть ли способ добавить в текстовый узел теги именно как теги?
2. Интересно, что браузер и в дальнейшем, при обращении к nodeValue понимает
 как текст, а не как теги. Получается, что браузер где-то у себя делает
заметку что это не теги а текст?И притом только на момент выполнения программы. Интересно зачем надо было такие имхо дурацкие правила
создавать. Если уж ты хочешь тег текстом то для этого есть и другие способы(правда забыл как именно

- давно дело было - если не трудно напомните)

Oscar · 29 апр 2007, 19:24

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
Вот текст, который будем изменять.


<a href="" onclick="document.getElementById('sample4').innerHTML = 'If something`s hard to do...';

return false;">меняем раз</a>
::
<a href="" onclick="document.getElementById('sample4').innerHTML = '...then it`s not worth

doing!'; return false;">меняем еще</a>


</body>
</html>[/HTML]

WEB_bobby · 29 апр 2007, 20:07

Oscar писал(а):[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
Вот текст, который будем изменять.


<a href="" onclick="document.getElementById('sample4').innerHTML = 'If something`s hard to do...';

return false;">меняем раз</a>
::
<a href="" onclick="document.getElementById('sample4').innerHTML = '...then it`s not worth

doing!'; return false;">меняем еще</a>


</body>
</html>[/HTML]

- А без innerHTML?

Oscar · 29 апр 2007, 21:52

WEB_bobby,
а чем, интересно, innerHTML не нравится?

вот вариант без него, чистый DOM :

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function first() {
while(document.getElementById("sample4").firstChild) {
document.getElementById("sample4").removeChild(document.getElementById("sample4").firstChild);
}
var b = document.createElement("b");
var text = document.createTextNode("If somethins's");
b.appendChild(text);
document.getElementById("sample4").appendChild(b);
var text2 = document.createTextNode(" hard to do...");
document.getElementById("sample4").appendChild(text2);
}

function second() {
while(document.getElementById("sample4").firstChild) {
document.getElementById("sample4").removeChild(document.getElementById("sample4").firstChild);
}
var text = document.createTextNode("...then it's ");
document.getElementById("sample4").appendChild(text);
var i = document.createElement("i");
var text2 = document.createTextNode("not worth");
i.appendChild(text2);
document.getElementById("sample4").appendChild(i);
var text3 = document.createTextNode(" doing!");
document.getElementById("sample4").appendChild(text3);
}
</script>
</head>

<body>
Вот текст, который будем изменять.
<a href="" onclick="first(); return false;">меняем раз</a> :: <a href="" onclick="second(); return false;">меняем еще</a>
</body>
</html>[/HTML]

__Yuri__ · 30 апр 2007, 06:56

А уж если быть совсем догматиками объектно(node)-ориентрованной парадигмы и идти в передовых рядах поборников концепции отделения смысловой информации от оформления, то следует применять SPAN и CSS.

WEB_bobby · 30 апр 2007, 13:14

дом тоже надо понимать!