wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

DOM და ელემენტები, სელექტორები და მოვლენები

Total questions: 57

Worksheet time: 29mins

Name
Class
Date
1.

რომელი მეთოდი აბრუნებს მხოლოდ ერთ ელემენტს მისი უნიკალური ID-ს მიხედვით?

a)

getElementsByClassName()

b)

getElementById()

c)

querySelectorAll()

d)

getElementsByTagName()

2.

რა ტიპის მნიშვნელობას აბრუნებს getElementsByClassName()?

a)

NodeList

b)

HTMLCollection

c)

Array

d)

Object

3.

querySelector() აბრუნებს:

a)

ყველა ელემენტს შესაბამისი selector-ით

b)

მხოლოდ პირველ ელემენტს შესაბამისი selector-ით

c)

ID-ს მქონე ელემენტს

d)

ელემენტების სიას როგორც Array

4.

querySelectorAll() და getElementsByClassName() შორის განსხვავებაა, რომ...

a)

ორივე აბრუნებს HTMLCollection-ს

b)

querySelectorAll აბრუნებს NodeList-ს

c)

getElementsByClassName აბრუნებს NodeList-ს

d)

არცერთი არ აბრუნებს ცოცხალ კოლექციას

5.

getElementsByTagName('div') აბრუნებს:

a)

მხოლოდ ერთი ელემენტს

b)

ყველა div ელემენტს

c)

მხოლოდ პირველი დივს

d)

მხოლოდ იმ ელემენტებს, რომელთაც აქვთ ID

6.

querySelector("#main .item span") იპოვის:

a)

ყველა span ელემენტს მთელ დოკუმენტში

b)

მხოლოდ პირველ span-ს .item კლასის შიგნით, რომელიც არის #main-ის შიგნით

c)

მხოლოდ .item კლასს

d)

არაფერი, რადგან selector არასწორია

7.

რომელი მეთოდით ვერ მოხდება ცოცხალი კოლექციის მიღება?

a)

getElementsByClassName()

b)

getElementsByTagName()

c)

querySelectorAll()

d)

ყველა აბრუნებს ცოცხალ კოლექციას

8.

querySelectorAll('.box') აბრუნებს:

a)

NodeList

b)

HTMLCollection

c)

Array

d)

Object

9.

როგორ მივწვდეთ მეორე ელემენტს querySelectorAll('.item')-ით მიღებული შედეგიდან?

a)

.item[1]

b)

querySelector('.item')[1]

c)

document.querySelectorAll('.item')[1]

d)

document.getElementsByClassName('.item')[1]

10.

querySelector('[data-id="5"]') იპოვის ელემენტს:

a)

class="data-id-5"

b)

id="5"

c)

data-id="5"

d)

name="5"

11.

querySelector('.menu li:last-child') იპოვის:

a)

პირველ li-ს

b)

ბოლო li-ს

c)

ყველა li-ს

d)

პირველ და ბოლო li-ს

12.

querySelectorAll('div > span') იპოვის:

a)

ყველა span ელემენტს, დივის შიგნით

b)

ყველა span ელემენტს მთელ დოკუმენტში

c)

მხოლოდ პირველი span ელემენტს

d)

მხოლოდ დივს

13.

რა განსხვავებაა async და defer შორის?

a)

async ტვირთავს სკრიპტს პარალელურად და ასრულებს დაუყოვნებლივ

b)

defer ტვირთავს სკრიპტს პარალელურად და ასრულებს ჩატვირთვისთანავე

c)

defer ბლოკავს HTML parsing-ს

d)

async ელოდება DOM-ის ჩატვირთვას

14.

defer გამოიყენება როცა გვინდა, რომ:

a)

სკრიპტი შესრულდეს რაც შეიძლება ადრე

b)

სკრიპტი შესრულდეს მხოლოდ მას შემდეგ, რაც HTML დაიტვირთება

c)

სკრიპტი დაიტვირთოს ფონის პროცესში

d)

სკრიპტი იმუშაოს მხოლოდ მაშინ, როცა სხვა სკრიპტიც დასრულდება

15.

querySelector('#header .title') ნიშნავს:

a)

ელემენტს, რომელსაც აქვს კლასი title ნებისმიერ ადგილას

b)

ელემენტს, რომელსაც აქვს id="title"

c)

ელემენტს კლასი title-ით, რომელიც მდებარეობს id="header" ელემენტში

d)

ბოლოებს

16.

თუ გსურს აირჩიო ელემენტი კონკრეტული ტექსტის მიხედვით, შეგიძლია გამოიყენო:

a)

querySelector('[text="value"]')

b)

querySelector(':contains("text")')

c)

ეს არ არის მხარდაჭერილი querySelector-ში

d)

querySelector('.text("value")')

17.

async = true ნიშნავს:

a)

სკრიპტი იტვირთება სინქრონულად

b)

სკრიპტი იტვირთება პარალელურად HTML parsing-თან

c)

სკრიპტი იტვირთება მხოლოდ ბოლოს

d)

სკრიპტი ტვირთავს CSS-თან ერთად

18.

რომელ შემთხვევაშია სწორი სკრიპტის ჩასმა?

a)

<script src="app.js" defer></script>

b)

<script defer="false" src="app.js"></script>

c)

<script async=false src="app.js"></script>

d)

<script src="app.js" wait></script>

19.

რომელი ატრიბუტი შეასრულებს სკრიპტს DOMContentLoaded-ის შემდეგ?

a)

async

b)

defer

c)

src

d)

preload

20.

როდესაც async და defer ერთად წერია, რომელი მოქმედებს?

a)

ორივე

b)

არცერთი

c)

async

d)

defer

21.

async უკეთესია როცა:

a)

სკრიპტები დამოკიდებულია ერთმანეთზე

b)

სკრიპტები დამოუკიდებელია

c)

გვჭირდება თანმიმდევრული შესრულება

d)

უნდა დაველოდოთ DOM-ს

22.

ახალი ელემენტის შესაქმნელად ვიყენებთ:

a)

createElement()

b)

createNode()

c)

makeElement()

d)

buildElement()

23.

ელემენტის ატრიბუტის დასამატებლად გამოიყენება:

a)

addAttribute()

b)

setAttribute()

c)

appendAttribute()

d)

setAttr()

24.

ელემენტის შიდა ტექსტის შესაცვლელად ვიყენებთ:

a)

.innerHTML

b)

.textContent

c)

.value

d)

.setText()

25.

რომელი მეთოდი ამატებს ახალ ელემენტს DOM-ში?

a)

insertItem()

b)

addElement()

c)

appendChild()

d)

includeNode()

26.

ელემენტის შიდა ტექსტის შესაცვლელად ვიყენებთ:

a)

.innerHTML

b)

.textContent

c)

.value

d)

.setText()

27.

remove() მეთოდი რას აკეთებს?

a)

აშორებს ატრიბუტს

b)

აშორებს ელემენტს DOM-დან

c)

აშორებს მხოლოდ ტექსტს

d)

არაფერს

28.

როგორ მივანიჭოთ კლასის სახელი შექმნილ ელემენტს?

a)

element.setClass('btn')

b)

element.className = 'btn'

c)

element.setAttribute('className', 'btn')

d)

element.addClass('btn')

29.

როგორ შევქმნათ ელემენტი ტექსტით ერთად?

a)

const div = document.createElement('div', 'Hello')

b)

const div = document.createTextNode('Hello')

c)

const div = document.createElement('div'); div.textContent = 'Hello';

d)

document.new('div', 'Hello')

30.

რომელი მეთოდით ვამატებთ მოვლენას ელემენტზე?

a)

element.on()

b)

element.addEventListener()

c)

element.addHandler()

d)

element.bind()

31.

click მოვლენა იძახება როცა:

a)

ელემენტი ფოკუსირდება

b)

მაუსის ღილაკზე ხდება დაჭერა

c)

მაუსი მოძრაობს

d)

ტექსტი იცვლება

32.

click მოვლენა იძახება როცა:

a)

ელემენტი ფოკუსირდება

b)

მაუსის ღილაკზე ხდება დაჭერა

c)

მაუსი მოძრაობს

d)

ტექსტი იცვლება

33.

addEventListener()-ის პირველი არგუმენტი არის:

a)

callback ფუნქცია

b)

მოვლენის სახელი (მაგ. "click")

c)

HTML ატრიბუტი

d)

ელემენტის ID

34.

removeEventListener() გამოიყენება:

a)

მოვლენის გასააქტიურებლად

b)

მოვლენის მოსახსნელად

c)

მოვლენის დასამატებლად

d)

მოვლენის გასანეიტრალებლად

35.

როგორ დავწეროთ click მოვლენა ინლაინად HTML-ში?

a)

<button event="click()">

b)

<button onclick="myFunc()">

c)

<button on="click()">

d)

<button onClick=myFunc>

36.

მოვლენის ობიექტს ვიღებთ:

a)

არგუმენტად ფუნქციაში

b)

window.event ობიექტით

c)

მხოლოდ inline-იდან

d)

ვერ ვიღებთ საერთოდ

37.

თუ გვინდა ერთი მოვლენა ყველა ელემენტზე, ვხმარობთ:

a)

loop-ს და თითოეულზე addEventListener()

b)

მხოლოდ ერთზე მოვახდენთ bind-ს

c)

HTML-ში ერთხელ ვწერთ onclick

d)

event.addAll()

38.

preventDefault() გამოიყენება რომ:

a)

მოვხსნათ ელემენტი

b)

გავაუქმოთ ელემენტის ნაგულისხმევი ქცევა

c)

გავაუქმოთ მოვლენა მთლიანად

d)

გავწყვიტოთ კოდი

39.

რომელი მოვლენისას ყველაზე ხშირად გამოიყენება preventDefault()?

a)

resize

b)

submit

c)

mouseover

d)

scroll

40.

event.preventDefault() უნდა დაიწეროს:

a)

მოვლენის გარეთ

b)

მოვლენის შიგნით

c)

HTML ატრიბუტში

d)

main.js-ის თავში

41.

რომელი მოვლენისას ყველაზე ხშირად გამოიყენება preventDefault()?

a)

resize

b)

submit

c)

mouseover

d)

scroll

42.

event.preventDefault() უნდა დაიწეროს:

a)

მოვლენის გარეთ

b)

მოვლენის შიგნით

c)

HTML ატრიბუტში

d)

main.js-ის თავში

43.

თუ გვინდა form არ გაგზავნოს გვერდი, უნდა გამოვიყენოთ:

a)

stopPropagation()

b)

preventDefault()

c)

stopImmediatePropagation()

d)

cancelEvent()

44.

preventDefault() და stopPropagation() შორის განსხვავებაა, რომ...

a)

preventDefault აჩერებს bubbling-ს

b)

preventDefault აჩერებს ნაგულისხმევ ქცევას

c)

ორივე ერთი და იგივეა

d)

stopPropagation აჩერებს ნაგულისხმევ ქცევას

45.

თუ ლინკზე დავაწვებით და არ გვინდა რომ წავიდეს სხვა გვერდზე:

a)

return false

b)

event.preventDefault()

c)

event.stop()

d)

stopPropagation()

46.

preventDefault() მუშაობს მხოლოდ მაშინ, როცა:

a)

მოვლენა ბლოკირებადია

b)

მოვლენა DOM-ის root-ზეა

c)

მოვლენა მხოლოდ click ტიპისაა

d)

მოვლენა ფორმიდანაა

47.

რა ტიპის ობიექტს აბრუნებს document.querySelectorAll()?

a)

Array

b)

HTMLCollection

c)

NodeList

d)

Object

48.

NodeList და HTMLCollection შორის მთავარი განსხვავებაა, რომ...

a)

NodeList ყოველთვის ცოცხალია (live)

b)

HTMLCollection ყოველთვის სტატიკურია

c)

NodeList ჩვეულებრივ სტატიკურია, HTMLCollection კი ცოცხალი

d)

NodeList არ შეიცავს ელემენტებს

49.

როგორ შეიძლება NodeList-ში ელემენტებზე iteration?

a)

მხოლოდ for ციკლით

b)

მხოლოდ forEach()-ით

c)

მხოლოდ map()-ით

d)

NodeList iteration არ უჭერს მხარს

50.

როგორ ვაქციოთ NodeList ნამდვილ Array-ად?

a)

Array.from(nodeList)

b)

nodeList.toArray()

c)

new Array(nodeList)

d)

nodeList.convert()

51.

NodeList-ის ელემენტზე წვდომა ხდება როგორ?

a)

nodeList.get(index)

b)

nodeList[index]

c)

nodeList.itemName(index)

d)

nodeList.select(index)

52.

შემდეგი კოდის შედეგად რა მოხდება?

const nodes = document.querySelectorAll('p');

nodes[0].textContent = 'Hello';

a)

შეცვლის ყველა <p> ელემენტს

b)

შეცვლის მხოლოდ პირველ <p> ელემენტს

c)

შეცვლის ბოლო <p> ელემენტს

d)

გამოიტანს შეცდომას

53.

რა მიუთითებს this გლობალურ კონტექსტში (ბრაუზერში)?

a)

window ობიექტზე

b)

document ობიექტზე

c)

undefined-ზე

d)

null-ზე

54.

რა იქნება this მნიშვნელობა შემდეგ კოდში?
const user = {

name: "Nina",

getName() {

return this.name;

}

};

console.log(user.getName());

a)

undefined

b)

"Nina"

c)

Error

d)

"this.name"

55.

რა დაბრუნდება შემდეგ კოდში strict რეჟიმში ('use strict')?
function showThis() {

console.log(this);

}

showThis()

a)

window

b)

globalThis

c)

undefined

d)

{}

56.

რას მიუთითებს this arrow ფუნქციაში?

a)

ფუნქციის საკუთარ კონტექსტზე

b)

გლობალურ ობიექტზე

c)

იმ გარე კონტექსტზე, სადაც შეიქმნა

d)

null-ზე

57.

შემდეგ კოდში რას დააბრუნებს this?
const btn = document.querySelector('button');

btn.addEventListener('click', function() {

console.log(this);

});

a)

window

b)

თავად btn ელემენტს

c)

undefined

d)

document