JavaScript
Изучаю JavaScript, думал что сложно, но оказалось это были цветочки...
Дошёл до DOM и тут началась настоящая пытка мозгам. Нет я понял структуру дерева, это просто. Но столько понятий и названий, у меня голова болит. Может подскажите как это усвоить. В голове путаница. Как это всё упорячдочить. Вопрос конечно задал на удачу. Врядли кто мне поможет. Но всё же кто учил, дайте советы из своего опыта.
Карпов Денис
28 587
Вот уж DOM точно не самое сложное, есть там вещи и посложнее. А методы и понятия зубрить не надо, их всегда можно посмотреть в справочнике. Ставьте практические задачи и решайте. Например нужно нам отсортировать список по алфавиту. И вот вам оно, родимое, манипулирование с DOM-деревом. Выглядит страшно, но если разобраться что к чему - всё это уже и не так страшно
________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Язвенник</li>
<li>Авран</li>
<li>Валериана</li>
<li>Багульник</li>
</ul>
<script type="text/javascript">
var list = document.getElementById("list");
document.write(list.innerHTML);//выводит список
document.write("<hr />");
document.write(list);//выводит [object HTMLUListElement]
document.write("<hr />");
var listLi = list.getElementsByTagName("li");
document.write(listLi);//выводит [object HTMLCollection]
document.write("<br />");
//document.write(listLi.innerHTML); // выводит undefined
document.write("<hr />");
var sortList = [];
for (i = 0; i < listLi.length; i++) {
sortList.push(listLi[i].innerHTML)
}
document.write("<hr />");
//document.write(sortList.innerHTML); // выводит undefined
sortList.sort();
document.write(sortList); // Выводит Авран, Багульник, Валериана, Язвенник
var listNew = document.createElement("ul");
for (i = 0; i <= sortList.length - 1; i++) {
li = document.createElement ("li");
li.innerHTML = sortList[i];
listNew.appendChild (li);
}
document.write(listNew.outerHTML);
</script>
</body>
</html>
________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Язвенник</li>
<li>Авран</li>
<li>Валериана</li>
<li>Багульник</li>
</ul>
<script type="text/javascript">
var list = document.getElementById("list");
document.write(list.innerHTML);//выводит список
document.write("<hr />");
document.write(list);//выводит [object HTMLUListElement]
document.write("<hr />");
var listLi = list.getElementsByTagName("li");
document.write(listLi);//выводит [object HTMLCollection]
document.write("<br />");
//document.write(listLi.innerHTML); // выводит undefined
document.write("<hr />");
var sortList = [];
for (i = 0; i < listLi.length; i++) {
sortList.push(listLi[i].innerHTML)
}
document.write("<hr />");
//document.write(sortList.innerHTML); // выводит undefined
sortList.sort();
document.write(sortList); // Выводит Авран, Багульник, Валериана, Язвенник
var listNew = document.createElement("ul");
for (i = 0; i <= sortList.length - 1; i++) {
li = document.createElement ("li");
li.innerHTML = sortList[i];
listNew.appendChild (li);
}
document.write(listNew.outerHTML);
</script>
</body>
</html>
Возьми jQuery - там работа с DOM многократно проще и логичнее. А уже потом постепенно переползай на "чистый" JS.
Юрий Сысолов
59 354
Карпов Денис
Джиквери это что новый язык учить. Вообще насколько сложно перейти на него. Там похожий синтаксис?
Ну скажем так, я вообще не понимаю, зачем нужно зубрить команды языка программирования. Нужно знать лишь основные, с которыми ты работаешь, а остальные можно загуглить. Ты же не пианист, чтобы без нот играть.
А вообще практика, практика и ещё раз практика.
Поначалу сложно, а затем становится легче.
А вообще практика, практика и ещё раз практика.
Поначалу сложно, а затем становится легче.
Игорь Ловчиков
в этом вы правы, но этих "основных" тоже немало ;)
хотя, мне кажется, всё приходит с опытом.
хотя, мне кажется, всё приходит с опытом.
Работать, а не зубрить.
Фирзан Бахтияров
2 270
Похожие вопросы
- Стоит ли изучать JavaScript на learn.javascript?
- Имеет ли смысл изучать JavaScript если я полный ноль в веб программировании?
- Здравствуйте. Изучаю javascript, посоветуйте, какой фреймворк лучше всего выбрать для изучения (angular, vue, react)?
- Подскажите книги для изучения javascript? Хочу начать изучать веб программирование javascript подойтет для начала?
- Как лучше/где начать изучать язык JavaScript?
- javascript - при обучение данного яп, стоит ли одновременно изучать его фреймворк, если да, то какой?
- На сколько сложно учить Javascript? и как долго ?
- Есть ли аналоги JavaScript?
- С чего начать учить JavaScript?
- Зачем нужен prototype в JavaScript?
На деле всё просто. Отбираем в массив элементы списка, создаем новый пустой массив, и в цикле кидаем в него содержимое этих элементов. Сортируем массив. И дальше как раз работа с DOM. Создаем элемент ul. Делаем цикл который на каждой итерации:
1) создает новый элемент li
2) содержимым этого элемента делает текущий элемент массива
3) добавляет элемент в ul как дочерний элемент.
Выводим отсортированный список. Работа сделана.