Javascript 无法访问HtmleElement

我有一些使用DOM解析器将HTML字符串转换为文档的代码。然后遍历DOM，根据类名查找元素

helper.js

export function stringToHTML(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  return doc.body; 
}

export function getTextBoxInfo(htmlContent) {
  const textBox = {
    element: null,
    index: null
  };

  htmlContent.getElementsByClassName('document-content')[0].children.forEach((ele, index) => {
    if (ele.getAttribute('class').includes('freetext')) {
      textBox.element = freeTextElement;
      textBox.index = index;
    }
  });

  return textBox;
}

describe('The getTextBoxInfo function', () => {
    it('returns an object with text box element and its position', () => {
        const htmlString = `<div class="document-content">
            <div class="content" id="bfb53c88"> Heading </div>
            <div class="freetext" contenteditable="true"> Content </div>
        </div>`;
        const htmlContent = helper.stringToHTML(htmlString);

        const textBox = helper.getTextBoxInfo(htmlContent);
        expect(true).toBe(true);
    });
});

helper.test.js

export function stringToHTML(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  return doc.body; 
}

export function getTextBoxInfo(htmlContent) {
  const textBox = {
    element: null,
    index: null
  };

  htmlContent.getElementsByClassName('document-content')[0].children.forEach((ele, index) => {
    if (ele.getAttribute('class').includes('freetext')) {
      textBox.element = freeTextElement;
      textBox.index = index;
    }
  });

  return textBox;
}

describe('The getTextBoxInfo function', () => {
    it('returns an object with text box element and its position', () => {
        const htmlString = `<div class="document-content">
            <div class="content" id="bfb53c88"> Heading </div>
            <div class="freetext" contenteditable="true"> Content </div>
        </div>`;
        const htmlContent = helper.stringToHTML(htmlString);

        const textBox = helper.getTextBoxInfo(htmlContent);
        expect(true).toBe(true);
    });
});

description（'getTextBoxInfo函数'，（）=>{
它（'返回包含文本框元素及其位置的对象'，（）=>{
常量htmlString=`
标题
内容
`;
const htmlContent=helper.stringToHTML（htmlString）；
const textBox=helper.getTextBoxInfo（htmlContent）；
期望（真），期望（真）；
});
});

它与源代码配合得很好。DOM解析器转换的文档是

但是在单元测试（JEST）期间，输出是不同的

因此，规范失败，出现以下错误

TypeError:无法读取未定义的属性“children”

在-htmlContent.getElementsByClassName（'document-content'）[0]行中。子项

---

而且我无法编写测试。

在将子对象作为HTMLCollection时，请使用normal for loop或for of loop代替forEach

const children = htmlContent.getElementsByClassName('document-content')[0].children;
    for (let item of children) {
        console.log(item);
    }

---

Reference-

您正在调用

helper.stringToHTML（htmlString）

，然后对该结果调用

helpers.stringToHTML（…）

。似乎是个错误？这是个打字错误，实际上，我只是在尝试不同的东西。即使在更新后，问题仍然存在。因此，测试中的

DOMParser

的结果没有

。getElementByClassName

？对吗？您在哪一行遇到了什么类型的错误？@DimaParzhitsky下面是错误，TypeError:无法读取-htmlContent.getElementsByClassName（'document-content'）[0]行中未定义的属性'childrenThanks'！你能在原始问题中也添加此信息吗？谢谢！。这在这种情况下很好，但如果我想访问item.innerText之类的内容，它仍然会失败。