循环元素并提取所有 child 属性

Question

我有附件HTMLHTML 我想要一个 javascript 代码在 chrome 控制台上执行 1 - 继续以下所有跨度

有一个 child 在 child 上递归运行并提取属性

我想要的输出是


id="preview:section:subSectionF55group13:subSectionTabF55group13" --> class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" --> data-form-designer-id="" --> "Group 13 Parties"
id="preview:section:subSectionF55group13:subSectionF55-10"--> class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" --> data-form-designer-id="" --> "(05) [3/17] Declarant"
id="preview:section:subSectionF55group13:subSectionF55-10:F55-10-2" ---> class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all other ui-state-hover" --> data-form-designer-id="F55-10-2" --> role="textbox" --> label="(05 016) [3/17a] Name"
id="preview:section:subSectionF55group13:subSectionF55-10:F55-10-3" ---> class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all other ui-state-hover" --> data-form-designer-id="F55-10-3" --->  role="textbox" --> label="(05 017) [3/18] Declarant identification No. "

标签在上一个 object

的 span 元素上

我有这个代码

const myElement = document.getElementById('preview:section:subSectionF55group13');
let child = myElement.querySelector('[class*="ui-accordion-header"]');
let menuName = ""
let contentName = ""
for (let i = 0; i < myElement.children.length; i++) {
  if (myElement.children[i].className == ('ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top')){
      menuName=myElement.children[i].innerText
      console.log('ui-accordion-header ' + menuName)
  }
  if (myElement.children[i].className == ('ui-accordion-content ui-helper-reset ui-widget-content')){
      const myContentsElements = document.getElementById(myElement.children[i].id);
      console.log(myContentsElements.children);
      for (let x = 0; x < myContentsElements.children.length; x++) {
        contentName=myContentsElements.children[x].id;
        console.log(myContentsElements.children);
        console.log('ui-accordion-content ' + contentName);
      }
  }
}

我特别想找

0: {id: 'preview:section:subSectionF55group13:subSectionF55-10:F55-10-2', text:'Group 13 Parties', text:(05) [3/17] Declarant, text: '(05 016) [3/17a] Name'} 
1: {id: 'preview:section:subSectionF55group13:subSectionF55-10:F55-10-3', text:'Group 13 Parties', text:(05) [3/17] Declarant, text '(05 017) [3/18] Declarant identification No.'}

其中id是标签附近input/select的id

Answer 1

我相信你想要这个

https://jsfiddle.net/mplungjan/cbdu10zp/

const myElement = document.getElementById('preview:section:subSectionF55group13');
let headers = [...myElement.querySelectorAll('[class*="ui-accordion-header"]')].map(elem => elem.textContent);
let labelsAndInput = [...myElement.querySelectorAll('[class*="ui-accordion-content"] *')]
  .filter(elem => elem.tagName === "LABEL" || elem.tagName === "INPUT")
  .filter(elem => elem.id || elem.textContent.trim())
  .map(elem => ({
    type: elem.tagName,
    role: elem.getAttribute('role'),
    dataformdesignerid: elem.getAttribute('data-form-designer-id'),
    id: elem.id,
    text: elem.textContent.trim()
  }));
console.log(labelsAndInput)
const contents = labelsAndInput.reduce((acc, cur, i) => {
  if (cur.type === "INPUT") {
    const elem = labelsAndInput[i - 1];
    acc[cur.id] = {
      id: elem.id,
      text: elem.text,
      role: cur.role,
      dataformdesignerid: elem.dataformdesignerid,
    }  
  }  
  return acc
}, {});

console.log(headers)
console.log(contents)

循环元素并提取所有 child 属性

Loop on element and extract all child properties

javascript

google-chrome

element