Зараз обговорюють

"Тобто є ряд завдань, які взагалі без рекурсії не наважуються."  - це як розуміти? Перефразуй, будь ласка. 

виправив, йшлося про те що деякі завдання можна вирішити лише при використанні рекурсії

Спасибі дуже корисна стаття

А ще щось планується подібного найближчим часом?


Дякую за підтримку, радий що Вам сподобалось!

Так маю вже майже дороблений проект по управлінні Audio файлом, на заміну стандартним клавішам управління HTML5, але ще не встиг відтестувати програвання файлів з інтернету, поки лише локально працює

Надіюсь найближчим часом дороблю й закину

Рахунки

webmoneyeur - E385818210641
usd - Z304643423050
uah - U354026817492
rub - R301704373231easypay80002677bitcoin1F5HRGroUtEQW9HBNbeew8iKh5KQ8vJxzw

Зворотній зв'язок

Для покращення роботи сайту надсилайте свої зауваження:
mailЗауваження
mailПропозиція

Статистика

UkrNET - поисково-информационный ресурс

JavaScript : Пошук та робота з HTML-елементами на сторінці (getElement* та querySelector*)

В даній статті розглянемо, як можна шукати HTML-елементи на сторінці та працювати з ними

getElementById

Якщо елементу HTML присвоєно атрибут id, то JS може отримати доступ до даного елементу за назвою відповідного ідентифікатора (id).

Розглянемо його застосування на прикладі: у нас є елемент div із атрибутом id по натиску кнопки потрібно змінювати його колір червоний/чорний:

<div id="myTestId">Тестовий елемент</div>
<p><input type="button" value="DEMO" onclick="testId()"></p>
<script>
	function testId(){
		var myTestId = document.getElementById('myTestId'); //присвоюємо елемент нашій змінній
		if(myTestId.style.color != 'red'){ //перевіряємо чи відсутній відповідний стиль для тексту
			myTestId.style.color = 'red'; //змінюємо колір тексту на червоний
			alert('Для елемента із атрибутом ' + myTestId.id + ' було змінено колір тексту на ' + myTestId.style.color); //повідомлення про виконані дії
		}
		else{
			myTestId.style.color = 'black'; //змінюємо колір тексту на чорний
			alert('Для елемента із атрибутом ' + myTestId.id + ' було змінено колір тексту на стандартний ' + myTestId.style.color); //повідомлення про виконані дії
		}
	} 
</script>
Тестовий елемент

Як можна замінити початково елемент з ідентифікатором myTestId немає жодних стилів, але після виконання коду на сторінці вже буде присутній, створений, атрибут style із заданими параметрами.

При відсутності стилю з кольором myTestId.style.color поверне пробіл (" ")

Примітка: getElementById повертає значення лише одного елемента, тож якщо ми проводимо пошук в документі в якому є 2, або більше однакових id то результат може бути випадковим. Старайтесь зберігати певну унікальність для атрибутів id.


getElementsByClassName

До елемента можна також доступитись по його назві класу (атрибут class). На відміну від доступу по id, getElementsByClassName повертає колекцію знайдених елементів.

<div class="myTestClass1">Тестовий елемент</div>
<div class="myTestClass1">Тестовий елемент</div>
<div class="myTestClass1">Тестовий елемент</div>
<p><input type="button" value="DEMO" onclick="testClass()"></p>
<script>
	function testClass(){
		var myTestClass = document.getElementsByClassName('myTestClass1'); //присвоюємо елементи нашій змінній
		myTestClass[1].style.fontSize = "36px"; //змінюємо розмір шрифту на 36px для 2-го елемента в знайденій колекції
		alert(myTestClass.length); //виводимо к-ть знайдених елементів в колекції
	}  
</script>
Тестовий елемент
Тестовий елемент
Тестовий елемент

Якщо за допомогою такого доступу до елемента колекції myTestClass[1] звернутись до відсутнього елемента (не входить в колекцію), скрипт викличе помилку і зупинить своє виконання! Якщо б в нашому прикладі ми звернулись до елемента з індексом 3 ми б не отримали ніякого результату візуально, в браузері, так як колекція починається з 0 і максимальний індекс елемента у нас - 2. Щоб дізнатись максимальний індекс можна використати var count = myTestClass.length - 1

Повідомлення про помилку можна переглянути у розділі Console в "Інструментах розробника" - F12(для Chrome). Там також можна переглядати елементи сторінки і змінювати їх прямо в браузері, що дуже зручно для тестування дизайну тощо (та пам'ятайте що всі зміни пропадають після перезавантаження сторінки й слід копіювати написаний код завчасно) + багато іншого (поклацайте самостійно)

Примітка: getElementsByClassName також включає в колекцію класи в яких шукана назва є частиною назви класу (при умові що ця частина є окремим словом в назві). В нашому прикладі відповідно отримуємо 3 елементи в колекції, якщо б шукали "myTestClass 1" відповідно був би 1

Пошук по класу підтримується всіма сучасними браузерами, окрім IE8.


getElementsByTagName

Забезпечує пошук елементів за назвою самого тегу. getElementsByTagName також повертає колекцію елементів.

<div class="myTestClass2">
	<div>Тестовий елемент</div>
	<div>Тестовий елемент</div>
</div>
<p><input type="button" value="DEMO" onclick="myTestTag()"></p>
<script>
	function myTestTag(){
		var myTestClass = document.getElementsByClassName('myTestClass2'); //присвоюємо елементи нашій змінній
		var myTestTag = myTestClass[0].getElementsByTagName('div'); //присвоюємо елементи нашій змінній
		alert(myTestTag.length); //виводимо к-ть знайдених елементів в колекції
	}  
</script>
Тестовий елемент
Тестовий елемент

Так як це також колекція до неї можна доступатись через наявні індекси myTestTag[i]

Особливістю getElementsByTagName є те що ми можете передати як параметр пошуку "*" і отримати всі елементи

<div class="myTestClass1">
	<p>Тестовий елемент 1.1</p>
	<p>Тестовий елемент 1.2</p>
	<p>Тестовий елемент 1.3</p>
	<p>Тестовий елемент 1.4</p>
</div>
<p><input type="button" value="DEMO" onclick="myTestTag2()"></p>
<script>
	function myTestTag2(){
		var myTestClass = document.getElementsByClassName('myTestClass3'); //присвоюємо елементи нашій змінній
		var myTestTag = myTestClass[0].getElementsByTagName('*'); //отримує колекцію усіх елементів які належать першому div
		var count = myTestTag.length - 1; //визначаємо останній елемент колекції
		alert(myTestTag[count].innerHTML); //виводимо текст останнього елемента в колекції першого div
	}
</script>

Тестовий елемент 1.1

Тестовий елемент 1.2

Тестовий елемент 1.3

Тестовий елемент 1.4

Тестовий елемент
Тестовий елемент

Примітка: innerHTML як і інші властивості повертає та задає значення! При присвоєнні значення конкретному елементу буде змінено весь текст на заданий


getElementsByName

Дозволяє здійснювати пошук елементів по атрибуту name. Повертає колекцію елементів.

Наприклад отримаємо значення елементів форми:

<form onsubmit="return myTestName()" style="border:1px solid; padding:5px; width:410px;">
	<input type="text" name="myLogin" placeholder="Введіть логін" minlength=5 maxlength=10 required>
	<input type="password" name="myPass" placeholder="Введіть пароль" pattern="(?=.*\d)(?=.*[a-zA-Z]).{6,}" minlength=6 maxlength=15 required>
	<input type="submit" value="DEMO">
</form>		
<script>
	function myTestName(){			
		var myTestLogin = document.getElementsByName('myLogin'); //присвоюємо елементи нашій змінній
		var myTestPass = document.getElementsByName('myPass'); //присвоюємо елементи нашій змінній
		alert('Користувач: ' + myTestLogin[0].value + ' пароль: ' + myTestPass[0].value); //виводимо введені користувачем значення
		return false; //повертаємо false так як ми нікуди не відправляємо форму
	}
</script>

Обмеження поля myLogin:

- потрібно ввести мінімум 5 символів, але максимум 10

- поле обов'язкове

Обмеження поля myPass:

- потрібно ввести мінімум 6 символів, але максимум 15

- поле обов'язкове

- може містити лише цифри та латинські літери

- повинна бути як мінімум одна цифра

Примітка: до появи HTML 5 getElementsByName повертав лише ті елементи які мали підтримку атрибуту name (iframe, a, input та інші). В нових браузерах (IE10+) тег немає значення.

Використовується дуже рідко


querySelectorAll

Отримує всі елементи які відповідають заданому селектору. Повертає колекцію елементів.

Примітка: для пошуку також підтримуються псевдо класи (:hover,:active,:first-child,:last-child)

Давайте виберемо із div елемента текст останніх абзаців p:

<div class="myTestClass4">
	<div>
		<p>Тестовий елемент 1.1</p>
		<p>Тестовий елемент 1.2</p>
		<p>Тестовий елемент 1.3</p>
		<p>Тестовий елемент 1.4</p>
	</div>
	<div>
		<p>Тестовий елемент 2.1</p>
		<p>Тестовий елемент 2.2</p>
		<p>Тестовий елемент 2.3</p>
		<p>Тестовий елемент 2.4</p>
	</div>
</div>
<div class="myTestClass4">Тестовий елемент</div>
<p><input type="button" value="DEMO" onclick="mySelectorAll()"></p>
<script>
	function mySelectorAll(){
		var myTestClass = document.getElementsByClassName('myTestClass4'); //присвоюємо елементи нашій змінній
		var mySelector = myTestClass.querySelectorAll('div > p:last-child'); //вибираємо колекцію елементів
		alert(mySelector[0].innerHTML + " " + mySelector[1].innerHTML); //виводимо отримані 2 записи
	}
</script>

Тестовий елемент 1.1

Тестовий елемент 1.2

Тестовий елемент 1.3

Тестовий елемент 1.4

Тестовий елемент 2.1

Тестовий елемент 2.2

Тестовий елемент 2.3

Тестовий елемент 2.4

Тестовий елемент


querySelector

Працює аналогічно querySelectorAll, але повертає не колекцію а лише один елемент (перший).

Наприклад document.querySelector('div > p:last-child') буде дорівнювати тому ж що і наш mySelector[0], але в даному випадку ми виберемо одразу перший елемент, а не всю колекцію, а потім з неї 1 елемент


view644like0dislike0 avatard_l4w clock 2017-02-28 21:08

Коментарі:



Для даної статті відсутні коментарі

Про нас

"Programmers World" розроблено з метою полегшення в освоєнні навичок програмування, та поширення матеріалів з сфери ІТ Українською мовою.

Кожен бажаючий може безкоштовно користуватися ресурсами сайту, щоб:

- Вивчати теоретичні аспекти мов програмування

- Переглядати практичне застосування теорії при виконанні різних міні проектів з відкритим кодом

- Розміщати свої завдання на форумі для допомоги в їх реалізації, або готового коду який може бути корисний іншим користувачам

- Спілкуватись з іншими користувачами та обмінюватись досвідом

Сайт функціонує на безопланій основі та ентузіазмі розробника, якщо Ви бажаєте долучитись до розвитку даного проекту то можете пожертвувати кошти на рахунки розміщені в блоці "Допомога сайту".

Сайт

Зареєстровані користувачі можуть скористатися системою діалогів, в профілі користувача, для отримання потрібної інформації. Написати!

Також Ви можете використати форми відправки Зауважень та Пропозицій.


Електронна пошта

Ви можете звертатись на нашу поштову скриньку site.programmersworld@gmail.com

www.000webhost.com