Я впервые работаю с обычным JavaScript без всяких фреймворков и библиотек.
И для меня очень важно научиться работать с children и childNodes внутри getElementByTagName и getElementsByClassName, чтобы я смог правильно получать доступ к дочерним элементам, как я это делал и в JQuery.
Сталкиваюсь с тем, что браузер не хочет выполнять выполнять операции с сhildren и childNodes и как всё это предтовратить, чтобы такие операции успешно выполнялись, правильно получая при этом доступ к дочерним элементам?
Сообщение JS-компилятора:
Uncaught TypeError: Cannot read property '1' of undefined
at solution (task.js:2)
at index.html:45
solution @ task.js:2
(анонимный) @ index.html:45
Исходник index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>База определений</title>
</head>
<body>
<table>
<colgroup>
<col align="right"/>
<col />
<col align="center"/>
</colgroup>
<thead>
<tr>
<td>Команда</td>
<td>Описание</td>
<th>Реализация</th>
</tr>
</thead>
<tbody>
<tr>
<th>git status</th>
<td>Выводит список добавленных файлов в репозитории</td>
<th>Реализовывается</th>
</tr>
<tr>
<th>git diff</th>
<td>Показать различия в файлах, которые не были инсценированы</td>
<td>Не реализовывается</td>
</tr>
</tbody>
</table>
<div class="markdown-data">
<header>
<strong>Данные в формате Markdown</strong>
</header>
<main>
</main>
</div>
<script src="task.js"></script>
<script>
solution();
</script>
</body>
</html>
Исходник task.js:
function solution() {
const div = document.getElementsByClassName("markdown-data").childNodes[1]; //Получаем доступ к контейнеру, куда будем вставлять сформированную Markdown-разметку
const table = document.getElementsByTagName("table"); //Откуда мы будем брать исходные данные таблицы для полноценной конвертации HTML в Markdown.
const source = [
[
['left','right','center'],
[]
],
[
[':---','---:',':---:'],
[]
]
];
let input; //Здесь будет вывод сконвертированных данных.
div.innerHTML = input;
const columnsGroup = () => {
const tabledata = table.childNodes[0];
const columnsdata = tabledata.getElementsByTagName("col");
let convert;
for (let ci = 0; ci < columnsdata.length; ci++) {
if(columnsdata[ci].hasAttribute("align")){
const colalignres = [columnsdata[ci].getAttribute("align"), source[0][0], source[1][0]];
for (let cdi = 0; cdi < colalignres[1].length; index++) {
if(colalignres[0] == colalignres[1][cdi]){
convert += "| " + colalignres[1][cdi] + " ";
break;
}
}
}
else{
convert += "| " + colalignres[1][2] + " ";
}
}
return convert + "\n";
};
const tableHeader = () => {
const tabledata = table.children[1];
};
const tableContent = () => {
const tabledata = table.children[2];
};
input += tableHeader; //Записывает шапку таблицы
input += columnsGroup; //Записывает метаданные настройки колонок
input += tableContent; //И затем содержимое таблицы и Markdown готов;-)
}
