上一节:
下一节:

  DOM 获取节点值

  • 定义和使用

    在DOM中，一切都是节点。 元素节点没有文本值。
    元素节点的文本值存储在子节点中。 该节点称为文本节点。
    注意：要检索元素的文本值，必须检索元素的文本节点的值。

    getElementsByTagName()

    getElementsByTagName() 方法以其在源文档中出现的顺序返回具有指定标签名称的所有元素的节点列表。
    假设 books.xml 已加载到 xmlDoc 中。
    此代码检索第一个<title>元素： 
    var x = xmlDoc.getElementsByTagName("title")[0];

  • ChildNodes 属性

    childNodes 属性返回元素的子节点的列表。
    以下代码检索第一个<title>元素的文本节点： 
    x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];
    结果为："中国历史手册"

  • 完整示例

    <!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
          myFunction(xhttp);
      }
  };
  xhttp.open("GET", "books.xml", true);
  xhttp.send();

  function myFunction(xml) {
      var xmlDoc = xml.responseXML;
      var x = xmlDoc.getElementsByTagName('title')[0];
      var y = x.childNodes[0];
      document.getElementById("demo").innerHTML = y.nodeValue;
  }
</script>

</body>
</html>
    尝试一下
    遍历所有<title>元素：自己尝试一下

  • 获取属性的值-getAttribute

    在DOM中，属性是节点。 与元素节点不同，属性节点具有文本值。
    获取属性值的方法是获取其文本值。
    可以使用 getAttribute() 方法或使用属性节点的 nodeValue 属性来完成此操作。
    getAttribute() 方法返回属性的值。
    以下代码检索第一个<title>元素的 “lang” 属性的文本值： 
    x = xmlDoc.getElementsByTagName("title")[0];
txt = x.getAttribute("lang");
    尝试一下
    结果以 txt: "en"
    遍历所有<book>元素并获取其 "category" 属性：自己尝试一下

  • 获取属性值-getAttributeNode()

    getAttributeNode() 方法返回一个属性节点。
    以下代码检索第一个<title>元素的 “lang” 属性的文本值： 
    x = xmlDoc.getElementsByTagName("title")[0];
y = x.getAttributeNode("lang");
txt = y.nodeValue;
    尝试一下
    结果以 txt: "en"
    遍历所有<book>元素并获取其 "category" 属性：自己尝试一下
上一节:
下一节: