訪問嵌套XML-JavaScript

如何訪問和的Id屬性。DetailcolorNameColor

例如：使用x[i].getAttribute('No')回傳0002。如何訪問Id="6"和colorName="orange". 謝謝你。

<xml>
  <Items>
    <Item No="0001">
      <Details>
        <Detail Id="3">
          <Colors>
            <Color colorName="green" />
            <Color colorName="yellow" />
          </Colors>
        </Detail>
        <Detail Id="4">
          <Colors>
            <Color colorName="red" />
            <Color colorName="blue" />
          </Colors>
        </Detail>
      </Details>
    </Item>
    <Item No="0002">
      <Details>
        <Detail Id="5">
          <Colors>
            <Color colorName="purple" />
            <Color colorName="pink" />
          </Colors>
        </Detail>
        <Detail Id="6">
          <Colors>
            <Color colorName="grey" />
            <Color colorName="orange" />
          </Colors>
        </Detail>
      </Details>
    </Item>
    <Item>
      <Details>
      </Details>
    </Item>
  </Items>
</xml>

以下代碼回傳“0002”：

var x = xmlDoc.getElementsByTagName("Item");
Number = '0002';

for (i = 0; i < x.length; i  ) {
  if (x[i].getAttribute('No') === Number) //desc
    ans = x[i].getAttribute('No') // returns 0002
}

試過了x[i].getElementsByTagName("Detail")[i].getAttribute('Id')，但效果不佳

uj5u.com熱心網友回復：

查詢一些節點并列出它們的最好方法可能是使用 XPath

請參閱：https ://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript

您可以使用以下命令在任何節點（參考為contextNode）內運行查詢：

const xpathResult = xmlDocument.evaluate(xpathExpression, contextNode);

結果將為您提供一個節點迭代器，然后您可以使用它進行迭代

let myVar;
while ( !! (myVar = xpathResult.iterateNext()) ) {
  //Do something with the result in myVar
}

運行示例：

const SEARCH_NO = "0002";
const xmlDoc = loadXml(); //See function definition below
const rEl = document.querySelector("#results");

//Solution starts here

let xRes = xmlDoc.evaluate(`//Item[@No="${SEARCH_NO}"]`, xmlDoc.documentElement);
const foundNode = xRes.iterateNext();
if (foundNode) {
  xRes = xmlDoc.evaluate('Details/Detail', foundNode);
  let detailNode;
  while ( !!( detailNode = xRes.iterateNext() ) ) {
    const li = showDetail(detailNode.getAttribute("Id"));
    const colXres = xmlDoc.evaluate('Colors/Color/@colorName', detailNode);
    let colorTextNode;
    while ( !!( colorTextNode = colXres.iterateNext() ) ) {
      showColor(li, colorTextNode.textContent);
    }
  }
}

//Solution ends here

/**
 * Show a found details node as a li
 */
function showDetail(id) {
  const li = document.createElement('li');
  li.innerHTML = `<strong>Detail</strong> Id:  ${id}<ul></ul>`;
  rEl.append(li);
  return li;
}

/**
 * Show a found color attribute as a li within li
 */
function showColor(li, color) {
  const ul = li.querySelector('ul');
  const colLi = document.createElement('li');
  colLi.innerHTML = `<strong>Color:</strong>  ${color}`;
  ul.append(colLi);
  return colLi;
}

/**
 * Load the sample xml
 */
function loadXml() {
  const xml = `
  <xml>
    <Items>
      <Item No="0001">
        <Details>
          <Detail Id="3">
            <Colors>
              <Color colorName="green" />
              <Color colorName="yellow" />
            </Colors>
          </Detail>
          <Detail Id="4">
            <Colors>
              <Color colorName="red" />
              <Color colorName="blue" />
            </Colors>
          </Detail>
        </Details>
      </Item>
      <Item No="0002">
        <Details>
          <Detail Id="5">
            <Colors>
              <Color colorName="purple" />
              <Color colorName="pink" />
            </Colors>
          </Detail>
          <Detail Id="6">
            <Colors>
              <Color colorName="grey" />
              <Color colorName="orange" />
            </Colors>
          </Detail>
        </Details>
      </Item>
      <Item>
        <Details>
        </Details>
      </Item>
    </Items>
  </xml>
  `;

  const parser = new DOMParser();
  return parser.parseFromString(xml, "application/xml");
}

body {
  font-family: sans-serif;
}

<ul id="results"></ul>

標籤：javascriptxml

上一篇：XML和DTD：型別元素的內容必須匹配

下一篇：Javascript子字串不適用于特殊字符