seregazolotaryow64
@seregazolotaryow64
IT Специалист и самоучка

Как в обычном JavaScript правильно получить доступ к нужному дочернему элементу?

Я впервые работаю с обычным 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 готов;-)
}
  • Вопрос задан
  • 816 просмотров
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
const table = document.getElementsByTagName("table")
в переменной table будет HTMLCollection, а не один элемент.

tabledata = table.childNodes[0] // ошибка, у коллекции нет свойства childNodes
исправить не сложно:
const tables = document.getElementsByTagName("table")
const tabledata = tables[0].childNodes[0]
теперь в tabledata первый узел из первой таблицы. Непонятно только зачем называть пустой текстовый узел словом tabledata.

const columnsdata = tabledata.getElementsByTagName("col"); // ошибка, у пустого текстового узла нет дочерних элементов

Так можно и дальше продолжать. Вы лучше почитайте внимательнее что возвращают методы, которые вы используете. И присмотритесь в querySelector и querySelectorAll
Половину кода можно выбросить заменив на
const table = document.querySelector('table') // первая попавшаяся таблица
const cols = table.querySelectorAll('col') // NodeList c колонками
cols.forEach(col => console.log)

браузер не хочет выполнять выполнять операции с сhildren и childNodes
что значит "не хочет"? На самом деле он не может выполнять те команды, которые вы ему понаписали, и сообщает об ошибке. Которую вы даже не стали приводить в вопросе :)
Ответ написан
Ошибка номер 1
Вы надеетесь что элемент markdown-data точно есть в коде и не делаете ни каких проверок нашли вы что то или нет
Ошибка номер 2
Какой тип возвращает getElementsByClassName
https://developer.mozilla.org/ru/docs/Web/API/Docu...

Просто почитайте теорию по методам которые используете, половина вопросов отпадет.

А еще ест метод debug, на крайняк console.log неужели лениво было самому продебажить свой код ?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы