Форум

Nailya · #1 (**permalink**) 22.12.2013, 14:00

Всем привет!

Изучаю js по учебнику, и вот возникла не понятность с firstChild, в учебники пишут, что он возвращает первый дочерний элемент,написала
вот такой скриптик, который почему то выдал объект Тext , а не элемент:

<body>
	
	<p>This is a <i>simple</i> document.</p>
</body>

window.onload=function(){
   
    var childNodes = document.body.firstChild;
		alert(childNodes);
}

По логике первый дочерний эелемент body является элемент

danik.js · #2 (**permalink**) 22.12.2013, 14:13

Сообщение от Nailya

firstChild, в учебники пишут, что он возвращает первый дочерний элемент

Нет, это не так. Он возвращает первый дочерний узел.
А элемент - это firstElementChild, но он отсутствует в IE8.

<body>
     
    <p>This is a <i>simple</i> document.</p>
    <script> alert(document.body.firstElementChild.outerHTML)</script>
</body>

Можно еще использовать children[0], он по идее вернет первый элемент, но в IE, если первым услом будет комментарий - он и будет возвращен (это неправильное поведение), но на практике такое редкость.

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

if (!("firstElementChild" in document.documentElement)) {
    Object.defineProperty(Element.prototype, "firstElementChild", {
        get: function() {
            var element = this.firstChild;
            while (element && element.nodeType != 1) {
                element = element.nextSibling;
            }
            return element;
        }
    });
}

Nailya · #3 (**permalink**) 22.12.2013, 14:27

хорошо, дочерний узел. Я просто изучаю js, и мне в данном примере надо понять,если узел - это, допустим, тег и все, что внутри. Значит дочерним узлом по отношению к body является и firstChild должен вернуть объект Element, а не объект Text

danik.js · #4 (**permalink**) 22.12.2013, 16:06

Сообщение от Nailya

в данном примере надо понять,если узел - это, допустим, тег

Дело в том что пробельные символы тоже образуют узел в DOM-модели.
Первым узлом будет тег вот в таком случае:

<script>onload = function() { alert(document.body.firstChild) }</script>
<body><p>This is a <i>simple</i> document.</p>
</body>

А в этом - будет текстовый узел, содержащий перенос строки, + четыре пробела + перенос строки + четыре пробела.

<script>onload = function() { alert(document.body.firstChild.data.replace(/\n/g, "↵").replace(/ /g, '•')) }</script>
<body>
     
    <p>This is a <i>simple</i> document.</p>
</body>

Nailya · #5 (**permalink**) 22.12.2013, 16:33

danik.js,спасибо за ответ, теперь все прояснилось

Форум

Справочник

Discord чат

Курсы javascript