JavaScript DOM API : Вопрос 1 : 16

Какие из утверждений верны для узлов атрибутов?

1) После добавления любого атрибута, у родительского элемента появляется свойство с именем атрибута, через которое можно получить его значение

2) При клонировании элементов, ie6 копирует атрибут class, но сохраняет свойство className

3) Метод getAttribute регистрозависимый

4) В ff и opera узел атрибута имеет свойство firstChild

5) Если у элемента был атрибут onclick, затем к элементу добавилось свойство onclick, их значения не будут совпадать хотя бы в одном из браузеров

6) Значение атрибута можно получить с помощью nodeValue

Какие из утверждений верны для узлов атрибутов?

1) После добавления любого атрибута, у родительского элемента появляется свойство с именем атрибута, через которое можно получить его значение

2) При клонировании элементов, ie6 копирует атрибут class, но сохраняет свойство className

3) Метод getAttribute регистрозависимый

4) В ff и opera узел атрибута имеет свойство firstChild

5) Если у элемента был атрибут onclick, затем к элементу добавилось свойство onclick, их значения не будут совпадать хотя бы в одном из браузеров

6) Значение атрибута можно получить с помощью nodeValue

Как узнать ширину страницы (и видимую, и скроллируемую части)? (Выделите решение, которое будет работать в ie6+, ff2+, opera9+)

1) document.clientWidth

2) Math.max(document.documentElement.clientWidth, document.getElementsByTagName("body")[0].clientWidth)

3) Math.min(document.documentElement.clientWidth, document.clientWidth)

4) document.documentElement.clientWidth

Как узнать ширину страницы (и видимую, и скроллируемую части)? (Выделите решение, которое будет работать в ie6+, ff2+, opera9+)

1) document.clientWidth

2) Math.max(document.documentElement.clientWidth, document.getElementsByTagName("body")[0].clientWidth)

3) Math.min(document.documentElement.clientWidth, document.clientWidth)

4) document.documentElement.clientWidth

Какие из приведенных методов объекта document поддерживаются в ie6, opera9+, ff2+:

Какие из приведенных методов объекта document поддерживаются в ie6, opera9+, ff2+:

Есть такая верстка:

<div id="q" style="float: left;"></div>

Какое выражение кросс-браузерно вернет "left" (переменная q ссылается на нужный div):

Есть такая верстка:

<div id="q" style="float: left;"></div>

Какое выражение кросс-браузерно вернет "left" (переменная q ссылается на нужный div):

Вам нужно повесить обработчик клика на некоторую ноду, какие операции надо выполнить, чтобы результат работал в ie6+, ff2+, opera9+:

1) node.onclick( myFunction );

2) node.addEventListener("click", myFunction, false);

3) node.addEventListener("onclick", myFunction, false);

4) node.attachEvent("onclick", myFunction);

5) Также необходимо проверять наличие (и/или тип) вызываемых методов

6) Необходимо проверять, является ли myFunction функцией при передаче её в метод onclick

Вам нужно повесить обработчик клика на некоторую ноду, какие операции надо выполнить, чтобы результат работал в ie6+, ff2+, opera9+:

1) node.onclick( myFunction );

2) node.addEventListener("click", myFunction, false);

3) node.addEventListener("onclick", myFunction, false);

4) node.attachEvent("onclick", myFunction);

5) Также необходимо проверять наличие (и/или тип) вызываемых методов

6) Необходимо проверять, является ли myFunction функцией при передаче её в метод onclick

Как получить все элементы, следующие после некоторой ноды, как указаны в dom-дереве (XPath ось following):

1) Это возможно только с помощью XPath

2) Это возможно только с помощью jQuery

3) Получить массив родительских элементов (ancestors), для каждого получить все следующие элементы с тем же родителем (following-sibling), для каждого получить все вложенные элементы (descendant-or-self)

Как получить все элементы, следующие после некоторой ноды, как указаны в dom-дереве (XPath ось following):

1) Это возможно только с помощью XPath

2) Это возможно только с помощью jQuery

3) Получить массив родительских элементов (ancestors), для каждого получить все следующие элементы с тем же родителем (following-sibling), для каждого получить все вложенные элементы (descendant-or-self)

У каждой ноды есть свойство nodeType, выберите правильные соответствия:

У каждой ноды есть свойство nodeType, выберите правильные соответствия:

Что возвращает следующая функция (в скобках наименование оси, согласно XPath)?

function f1(node) { 
    return f(node.firstChild); 
 
    function f(cur) { 
        var ret = [cur]; 
        if (cur.firstChild) ret = ret.concat( f(cur.firstChild) ); 
        if (cur.nextSibling) ret = ret.concat( f(cur.nextSibling) ); 
        return ret; 
    } 
} 

Варианты ответа:

1) Произойдет ошибка

2) Все вложенные в node элементы, на первом уровне вложенности (child)

3) Все вложенные в node элементы, на любом уровне вложенности (descendant)

4) Все вложенные в node тэги, на первом уровне вложенности (child)

Что возвращает следующая функция (в скобках наименование оси, согласно XPath)?

function f1(node) { 
    return f(node.firstChild); 
 
    function f(cur) { 
        var ret = [cur]; 
        if (cur.firstChild) ret = ret.concat( f(cur.firstChild) ); 
        if (cur.nextSibling) ret = ret.concat( f(cur.nextSibling) ); 
        return ret; 
    } 
} 

Варианты ответа:

1) Произойдет ошибка

2) Все вложенные в node элементы, на первом уровне вложенности (child)

3) Все вложенные в node элементы, на любом уровне вложенности (descendant)

4) Все вложенные в node тэги, на первом уровне вложенности (child)

Есть элемент <div id="qwe" class="1" direction="2" />. Какие из следующих значений будут выведены следующим скриптом:

var qwe = document.getElementById("qwe"); 
for (name in qwe.attributes)  
    alert(qwe.attributes[name].nodeValue); 

Есть элемент <div id="qwe" class="1" direction="2" />. Какие из следующих значений будут выведены следующим скриптом:

var qwe = document.getElementById("qwe"); 
for (name in qwe.attributes)  
    alert(qwe.attributes[name].nodeValue); 

<div id='visual' style='width:100px;'>левая пятка</div> 
<script type='text/javascript'> 
    var visual = document.getElementById('visual'); 
    visual.style.position = 'fixed'; 
    visual.style.height = window.innerHeight + 'px'; 
</script>

Приведённый код обеспечит следующий эффект:

1) Установит стиль position:fixed и height:(высота окна пикселов) для DIV`а

2) Зависит от браузера

3) Установит стиль position:fixed и height:(высота документа пикселов) для DIV`а

4) Приведёт к появлению исключения

<div id='visual' style='width:100px;'>левая пятка</div> 
<script type='text/javascript'> 
    var visual = document.getElementById('visual'); 
    visual.style.position = 'fixed'; 
    visual.style.height = window.innerHeight + 'px'; 
</script>

Приведённый код обеспечит следующий эффект:

1) Установит стиль position:fixed и height:(высота окна пикселов) для DIV`а

2) Зависит от браузера

3) Установит стиль position:fixed и height:(высота документа пикселов) для DIV`а

4) Приведёт к появлению исключения

Для задачи определения кол-ва символов в текстовом поле по мере их ввода следует учитывать, что?

1) Событие change срабатывает только при уходе фокуса из поля

2) События keyup, keydown, keypress не обрабатывают изменения, введенные с помощью мыши

3) Событие input не работает в opera

4) Событие input по-разному работает в opera и ff

5) Ничего из перечисленного

Для задачи определения кол-ва символов в текстовом поле по мере их ввода следует учитывать, что?

1) Событие change срабатывает только при уходе фокуса из поля

2) События keyup, keydown, keypress не обрабатывают изменения, введенные с помощью мыши

3) Событие input не работает в opera

4) Событие input по-разному работает в opera и ff

5) Ничего из перечисленного

Что будет выведено на страницу следующим кодом?

document.write.call(document, "HELLO");

Что будет выведено на страницу следующим кодом?

document.write.call(document, "HELLO");

При создании анимации следует учитывать, что:

1) Window.setTimeout и window.setInterval могут принимать третий аргумент, который будет передаваться в исполняемую функцию в ie6+, ff2+, opera9+

2) Перемещение абсолютно позиционированных нод быстрее, чем элементов с position: static

3) Предварительный расчет всех значений приведет к более плавной анимации

4) Последние версии современных js-фреймворков не имеют никаких накладных расходов (не обязательных операций относительно максимально оптимизированного алгоритма)

При создании анимации следует учитывать, что:

1) Window.setTimeout и window.setInterval могут принимать третий аргумент, который будет передаваться в исполняемую функцию в ie6+, ff2+, opera9+

2) Перемещение абсолютно позиционированных нод быстрее, чем элементов с position: static

3) Предварительный расчет всех значений приведет к более плавной анимации

4) Последние версии современных js-фреймворков не имеют никаких накладных расходов (не обязательных операций относительно максимально оптимизированного алгоритма)

Чем отличается scrollHeight от offsetHeight:

1) offsetHeight показывает занимаемую элементом высоту, а scrollHeight - высоту вложенного контента

2) offsetHeight показывает занимаемую элементом высоту, без учета горизонтальной полосы прокрутки, а scrollHeight является их суммой

3) offsetHeight показывает занимаемую элементом высоту, а scrollHeight - максимум из высоты вложенного контента или offsetHeight

4) offsetHeight показывает занимаемую элементом высоту, без учета горизонтальной полосы прокрутки, а scrollHeight - высоту горизонтальной полосы прокрутки

Чем отличается scrollHeight от offsetHeight:

1) offsetHeight показывает занимаемую элементом высоту, а scrollHeight - высоту вложенного контента

2) offsetHeight показывает занимаемую элементом высоту, без учета горизонтальной полосы прокрутки, а scrollHeight является их суммой

3) offsetHeight показывает занимаемую элементом высоту, а scrollHeight - максимум из высоты вложенного контента или offsetHeight

4) offsetHeight показывает занимаемую элементом высоту, без учета горизонтальной полосы прокрутки, а scrollHeight - высоту горизонтальной полосы прокрутки

Есть такая верстка:

<div id="q">:<span id="w">a</span>:</div> 
<div id="q2"></div> 

Что произойдет после исполнения следующего скрипта:

var element = document.getElementById("w"); 
element.onclick = function() { alert("!"); }; 
document.getElementById("q2").appendChild(element); 

Варианты ответа:

1) Ошибка

2) В элементе #q2 создастся такой же span, onlclick _не_ будет отрабатывать

3) В элементе #q2 создастся такой же span, onlclick будет отрабатывать

4) span будет перенесен в #q2 (onlclick будет отрабатывать, element будет ссылаться на ноду)

Есть такая верстка:

<div id="q">:<span id="w">a</span>:</div> 
<div id="q2"></div> 

Что произойдет после исполнения следующего скрипта:

var element = document.getElementById("w"); 
element.onclick = function() { alert("!"); }; 
document.getElementById("q2").appendChild(element); 

Варианты ответа:

1) Ошибка

2) В элементе #q2 создастся такой же span, onlclick _не_ будет отрабатывать

3) В элементе #q2 создастся такой же span, onlclick будет отрабатывать

4) span будет перенесен в #q2 (onlclick будет отрабатывать, element будет ссылаться на ноду)

Есть такая верстка:

<div id="q"> 
    <div id="w"> 
        <div id="e">click</div> 
    </div> 
</div> 

И такой скрипт:

document.getElementById("q").addEventListener("click", on, false); 
document.getElementById("w").addEventListener("click", on, false); 
document.getElementById("e").addEventListener("click", on, false); 
function on(evt) { 
    alert(evt.target.id +" > "+ evt.currentTarget.id); 
} 

В Firefox и Opera при клике по слову "click" выведется:

1) e > e, e > w, e > q - сколько обработчиков, столько и алертов; target не меняется

2) e > e, w > e, q > e - currentTarget не меняется

3) e > e, w > w, q > q - target аналогичен currentTarget

4) e > e, e > w, e > q - обработка клика по #e, и 
w > w, q > q - обработка клика по #w, и 
q > q - обработка клика по #q

5) прошлый вариант (шесть алертов), но в обратном порядке (#q, #w, #e)

6) произойдет ошибка: для подобных целей следует использовать originalTarget и rangeParent

Есть такая верстка:

<div id="q"> 
    <div id="w"> 
        <div id="e">click</div> 
    </div> 
</div> 

И такой скрипт:

document.getElementById("q").addEventListener("click", on, false); 
document.getElementById("w").addEventListener("click", on, false); 
document.getElementById("e").addEventListener("click", on, false); 
function on(evt) { 
    alert(evt.target.id +" > "+ evt.currentTarget.id); 
} 

В Firefox и Opera при клике по слову "click" выведется:

1) e > e, e > w, e > q - сколько обработчиков, столько и алертов; target не меняется

2) e > e, w > e, q > e - currentTarget не меняется

3) e > e, w > w, q > q - target аналогичен currentTarget

4) e > e, e > w, e > q - обработка клика по #e, и 
w > w, q > q - обработка клика по #w, и 
q > q - обработка клика по #q

5) прошлый вариант (шесть алертов), но в обратном порядке (#q, #w, #e)

6) произойдет ошибка: для подобных целей следует использовать originalTarget и rangeParent