JavaScript集合.zip资源-CSDN文库

共88个文件

js：26个

txt：16个

html：14个

版权申诉

92 浏览量 2024-08-15 19:40:03 上传评论收藏 1.26MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript集合.zip （88个子文件）

JavaScript-main

DOM

style.css 0B

DOM-01.txt 11KB

index.html 494B

DOM.js 5KB

Logic.txt 219B

VanillaProjects-JS

game

style.css 760B

index-copy.js 1KB

index.html 830B

index.js 2KB

Tvflix

assets

search.js 0B

sidebar.js 0B

movie-card.js 0B

api.js 0B

detail.js 0B

index.js 0B

movie-list.js 0B

global.js 0B

css

style.css 4KB

images

poster-bg-icon.png 825B

play_circle.png 823B

Thumbs.db 132KB

slider-banner.jpg 64KB

slider-control.jpg 925KB

menu.png 355B

logo.png 4KB

tmdb-logo.svg 4KB

search.png 569B

logo.svg 28KB

tmdb-logo.png 8KB

close.png 366B

menu-close.png 397B

star.png 605B

video-bg-icon.png 718B

detail.html 0B

index.txt 2KB

idontknow 70B

movie-list.html 0B

index.html 2KB

favicon.svg 3KB

style-guide.md 2KB

todojs

todo.js 3KB

todo.html 2KB

DOM-properties.txt 8KB

DOMmethods.txt 502B

LearnJS

Number.js 2B

number.txt 0B

Content.txt 1KB

string.txt 244B

Object.js 4KB

Function.js 2KB

array.txt 1KB

Array.js 5KB

index.html 481B

object.txt 5KB

index.js 342B

String.js 0B

function.txt 5KB

classes of nodes (6).jpg 45KB

MethodsJS.text 17KB

DOM recap.txt 11KB

CommonError.txt 3KB

Codewars

Codewars.js 5KB

API

weatherAPI

weather.js 0B

weather.css 0B

weather.html 0B

randomQuote

randomQuote.html 634B

randomQuote.css 934B

randomQuote.js 1KB

jokeGeneratorAPI

jokeGenerator.js 512B

jokeGenerator.css 1KB

jokeGenerator.html 478B

dictionaryApp

dictionaryApp.css 1KB

dictionaryApp.html 746B

dictionaryApp.js 1KB

CRUD

crud.css 0B

crud.js 2KB

crud.txt 351B

crud.html 1KB

countryGuideApp

countryGuideApp.js 1KB

countryGuideApp.css 994B

countryGuideApp.html 998B

testAPI

first.html 530B

first.js 1KB

first.css 390B

.gitignore 0B

MethodsREST.txt 3KB

DOM.txt 27KB

navigation DOM (3).jpg 20KB

https://learn.javascript.ru/dom-nodes#primer-dom Зміст Браузерне оточення, специфікації DOM-дерево Навігація по DOM Пошук: getElement, querySelector -------------------------------------------- Браузерне оточення, специфікації =>> УРОК 1 -------------------------------------------- Мова програмування JavaScript спочатку була створена для веббраузерів. Платформою може бути браузер, або вебсервер(Node.js забезпечує функції сервера) або інший хост.Тобто платформа,це функціональність тоді це - середовище.Середовище надає власні об’єкти та додаткові функції до базової мови. що ми маємо, коли JS працює в веббраузері window 1.document(DOM) 2.BOM(navigator,screen,location,frames,history,XMLHttpRequests) 3.JS(Object,Array,Function) Існує “корінний” об’єкт, що називається window. Він має дві ролі: По-перше, це глобальний об’єкт,який містить змінні, які мають бути доступними скрізь. По-друге, він являє собою “вікно браузера” та надає способи для керування ним. -------------------------- Document Object Model =>> -------------------------- Document Object Model – HTML документ представляє весь контент сторінки у вигляді дерева як об’єкти, де кожен тег являється вузлом-елементом,ці елементи створюють ієрархічну структуру, де кожен елемент може мати батьківський, дочірній та сусідні елементи. об’єкт document – це головна “точка входу” до сторінки. Ми можемо взаємодіяти з сторінкою використовуючи цей об’єкт. (i) - DOM – не лише для браузерів існують також,але й наприклад для скриптів сервера, які завантажують HTML-сторінку. ------------------------------- BOM (Browser Object Model) =>> ------------------------------- Browser Object Model – це додаткові об’єкти, надані браузером (хост-середовищем) для роботи з усім, крім документа.(наприклад navigator.userAgent,navigator.platform,location,також функції alert,confirm,prompt) -------------------- DOM-дерево =>>УРОК 2 -------------------- document.body - це об'єкт для тега <body>. html,head,body - це є вузли-елементи. -------------------- Автовиправлення =>> -------------------- Якщо браузер стикається з некоректно написаним HTML-кодом, він автоматично коригує його під час побудови DOM. !!Таблиці завжди містять <tbody> <table id="table"><tr><td>1</td></tr></table> => <tbody> - браузер сам добавляє -------------------- Інші типи вузлів =>> -------------------- Є й інші типи вузлів, крім елементів і текстових вузлів це коментар(#comment) Навіть директива <!DOCTYPE...>, яку ми ставимо на початку HTML, також є DOM-вузлом. Навіть об'єкт document, який представляє весь документ, формально є DOM-вузлом. Існує 12 типів вузлів. Але на практиці ми в основному працюємо з 4 з них: /документ\ – «вхідна точка» в DOM. /вузли-елементи\ – HTML-теги, основні будівельні блоки. /текстові вузли\ – містять текст. /коментарі\ – іноді в них можна включити інформацію, яка не буде показана, але доступна в DOM для читання JS. --------------------------- Навігація по DOM =>> УРОК 3 --------------------------- Усі операції з DOM починаються з об’єкта document. Це головна “точка входу” в DOM. З нього ми можемо отримати доступ до будь-якого вузла. -------------------------------------------------------------------- Навігація по вузлам,нащаткам,сусідам -------------------------------------------------------------------- 1.Батьківський вузол доступний як parentNode. 2.Дочірні вузли – елементи, які вкладені у батьківський вузол. 3.Нащадки – всі ЕЛЕМЕНТИ, які вкладені у ВУЗОЛ, включаючи дітей, їхніх дітей. 4.Сусідні вузли – це дочірні вузли їх може бути декілька, які є НАЩАТКАМИ одного батька. Приклад 1: <div class="wrapper"> <h1>Заголовок</h1> <ul class="list"> <li>Перший пункт</li> <li>Другий пункт</li> <li>Третій пункт</li> </ul> <p>Підсумок</p> </div> Всього вузлів: 5 - <div>, <h1>, <ul>, <li>, <p>. Дочірні вузли <div class="wrapper">: <h1>, <ul>, <p>. Сусідні вузли <div class="wrapper">: відсутні, оскільки <div class="wrapper"> єдиний дочірній вузол відповідного рівня ієрархії DOM. Наслідуючі(нащадки) вузли <div class="wrapper">: <h1>, <ul>, <li> (три елементи), <p>. childNodes – спеціальний ітеративний об’єкт-псевдомасив. (i) - Колекції DOM доступні лише для зчитування (i) - DOM колекції живі (i) - не використовуйте for..in для перебору колекцій, for of -------------------------------------------- Пошук: getElement, querySelector =>> УРОК 4 -------------------------------------------- 1.elem.querySelector(css) повертає перший елемент, що відповідає даному CSS-селектору document.querySelector('#age-table td') document.querySelector('form[name="search"]') 2.document.getElementById(id) - <div id="elem-content">Елемент</div>//містить дефіс(не можна) => але так можна window['elem-content'] 3.elem.querySelectorAll(css), який повертає всі елементи всередині elem(має статичну колекцію,як фіксований масив,а старі методи пошуки видають живу колекцію) document.querySelectorAll('#age-table label') клас #age-table > label 4.elem.matches(css) нічого не шукає, він просто перевіряє, чи відповідає elem заданому CSS-селектору. Він повертає true або false. 5.closest шукає предка і повертається знайдений предок. ----------------------------------------------- Властивості вузлів: тип, тег та вміст =>УРОК 5 ----------------------------------------------- ---------------- Класи DOM ву�

评论收藏

内容反馈

版权申诉