Создать объект JavaScript из HTML-кода

ProgramBox

Создать объект JavaScript из HTML-кода

Post author:admin
Запись опубликована:25 апреля, 2023
Post category:Вопросы по программированию

#javascript #object #dom

#javascript #объект #dom

Вопрос:

HTML

 <div id="html">
  <ul>
    <li id="myFolder" type="folder">myFolder
      <ul>
        <li id="myFolder/fonts" class="empty" type="folder">fonts</li>
        <li id="myFolder/index.html" type="file">index.html</li>
        <li id="myFolder/js" type="folder">js
          <ul>
            <li id="myFolder/js/controllers" type="folder">controllers
              <ul>
                <li id="myFolder/js/controllers/core" type="folder">core
                  <ul>
                    <li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
                  </ul>
                </li>
                <li id="myFolder/js/controllers/errors" type="folder">errors
                  <ul>
                    <li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Я хотел бы преобразовать HTML в несколько объектов, подобных этому :

 {
    "dir": "",
    "name": "myFolder",
    "type": "folder",
    "children": [{
        "dir": "myFolder",
        "name": "fonts",
        "type": "folder"
    }, {
        "dir": "myFolder",
        "name": "index.html",
        "type": "file"
    }, {
        "dir": "myFolder",
        "name": "js",
        "type": "folder",
        "children": [{
            "dir": "myFolder/js",
            "name": "controllers",
            "type": "folder",
            "children": [{
                "dir": "myFolder/js/controllers",
                "name": "core",
                "type": "folder",
                "children": [{
                    "dir": "myFolder/tempjs/controllerslates/core",
                    "name": "menu.js",
                    "type": "file"
                }]
            }, {
                "dir": "myFolder/js/controllers",
                "name": "errors",
                "type": "folder",
                "children": [{
                    "dir": "myFolder/js/controllers/errors",
                    "name": "error.js",
                    "type": "file"
                }]
            }]
        }]
    }]
}

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

document.getElementsByTagName('li');

или что-то вроде этого. Но как я могу управлять родительскими и дочерними ссылками и как я могу связать переменные объектов с атрибутами HTML?

1. Вы имеете в виду JSON?

2. Вы на самом деле уже что-нибудь пробовали? В настоящее время вы, похоже, предоставляете желаемый ввод и вывод, затем запрашиваете, чтобы фактическая работа была выполнена за вас.

3. Да, я провалил свой пост. Прежде всего, мне нужно преобразовать мой HTML в JS-объект, а затем в JSON, но преобразование JS-объекта в JSON для меня не проблема, это первое преобразование проблемы ^^.

4. На самом деле, я думаю, что могу самостоятельно дополнить свойства объектов, но я не знаю, как я могу создавать разные объекты и связывать дочерние объекты с родительским объектом.

5. Обход DOM (вложенных) деревьев с помощью рекурсивной функции «walk the DOM»

Ответ №1:

Это самое близкое, что я мог получить. Наслаждайтесь.

 var getIdBasedStructure = function(ulContainer) {
  var output = [];
  Array.prototype.forEach.call(ulContainer.children, function(el) {
    if (el.nodeName == "LI") {
      var ret = getIdSplits(el.id, el.type);
      if (el.querySelectorAll("ul").length > 0) {
        output.push({
          dir: ret[0],
          name: ret[1],
          type: ret[2],
          children: getIdBasedStructure(el.querySelectorAll("ul")[0])
        });
      } else {
        output.push({
          dir: ret[0],
          name: ret[1],
          type: ret[2]
        });
      }
    }
  });
  return output;
};

var getIdSplits = function(id, type) {
  var split = id.split("/");
  var ret = [];
  if (split.length > 3) {
    ret[2] = split[split.length - 1];
    ret[1] = split.slice(0, split.length - 1).join("/");
    ret[0] = type;
  } else {
    ret[0] = split[0] ? split[0] : null;
    ret[1] = split[1] ? split[1] : null;
    ret[2] = type;
  }
  return ret;
}

var structure = getIdBasedStructure(document.querySelectorAll("#html > ul")[0]);
console.log(JSON.stringify(structure));

 <div id="html">
  <ul>
    <li id="myFolder" type="folder">myFolder
      <ul>
        <li id="myFolder/fonts" class="empty" type="folder">fonts</li>
        <li id="myFolder/index.html" type="file">index.html</li>
        <li id="myFolder/js" type="folder">js
          <ul>
            <li id="myFolder/js/controllers" type="folder">controllers
              <ul>
                <li id="myFolder/js/controllers/core" type="folder">core
                  <ul>
                    <li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
                  </ul>
                </li>
                <li id="myFolder/js/controllers/errors" type="folder">errors
                  <ul>
                    <li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Редактировать: преобразовано из jQuery в собственный javascript.

1. Спасибо за вашу помощь, ваш код близок к ожидаемому результату, но это кажется сложным кодом для новичка вроде меня. Я думаю, что мой учитель сумасшедший, если просит меня выполнить подобное упражнение без каких-либо указаний. ^^

Ответ №2:

 var div = document.getElementById("html");
var parent = loopul(document.getElementById("html").getElementsByTagName("ul")[0])[0]
function loopul(ul){
var lis = ul.getElementsByTagName("li");
if(lis.length>0){
var arr = [];
for(var i=0;i<lis.length;i  ){
	//console.log(lis[i]);
var nm = lis[i].innerText;
if(lis[i].getElementsByTagName("ul").length>0){
nm = nm.replace(lis[i].getElementsByTagName("ul")[0].innerText,"");
}
nm = nm.replace(/[nrt]/g,"").trim();
var du = lis[i].getElementsByTagName("ul").length ? loopul(lis[i].getElementsByTagName("ul")[0]) : [];
arr.push({
"dir":lis[i].id ? lis[i].id : "",
"name":nm,
"type":lis[i].type,
"children":du
});
}
return arr;
}else return [];
}

console.log(parent);

 <div id="html">
            <ul>
                <li id="myFolder" type="folder">myFolder
                    <ul>
                        <li id="myFolder/fonts" class="empty" type="folder">fonts</li>
                        <li id="myFolder/index.html" type="file">index.html</li>
                        <li id="myFolder/js" type="folder">js
                            <ul>
                                <li id="myFolder/js/controllers" type="folder">controllers
                                    <ul>
                                        <li id="myFolder/js/controllers/core" type="folder">core
                                            <ul>
                                                <li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
                                            </ul>
                                        </li>
                                        <li id="myFolder/js/controllers/errors" type="folder">errors
                                            <ul>
                                                <li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                       </li>
                    </ul>
                </li>
            </ul>
</div>