开发者社区> ke_ry> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

XML DOM 笔记

简介: 一、概念理解: 关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别。   Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeT...
+关注继续查看

一、概念理解:

关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别。

  Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有:

节点类型 NodeType
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

  更多节点类型参考:https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType

  Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性。

  以上就是Element跟Node的区别。

  那么用document.getElementById("xxx")取到的是Node还是Element呢?我们来测试一下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <div id="test">
        <p>One</p>
        <P>Two</p>
    </div>
    <script>
        var oDiv=document.getElementById("test");
        console.log(oDiv instanceof Node);        //true
        console.log(oDiv instanceof Element);    //true
    </script>
</body>
</html>

  我们可以看到用document.getElementById("xxx")取到的既是Element也是Node

  children是Element的属性,childNodes是Node的属性,我们再来测试一下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <div id="test">
        <p>One</p>
        <P>Two</p>
    </div>
    <script>
        var oDiv=document.getElementById("test");
        console.log(oDiv.children[0] instanceof Node);        //true
        console.log(oDiv.children[0] instanceof Element);    //true

        console.log(oDiv.childNodes[0] instanceof Node);    //true
        console.log(oDiv.childNodes[0] instanceof Element);    //false

        console.log(typeof oDiv.childNodes[0].children);    //undefined
        console.log(typeof oDiv.childNodes[0].childNodes);    //object
    </script>
</body>
</html>

  通过上面的代码我们可以看到,Element的children[0]仍为Element,是Node和Element的实例,Node的childNdoes[0]为Node,只是Node的实例,不是Element的实例。

  同时,Node的children属性为为undefined

 

 

二、使用全解

 

一些典型的 DOM 属性:

  • x.nodeName - x 的名称
  • x.nodeValue - x 的值
  • x.nodeType -x  的类型
  • x.parentNode - x 的父节点
  • x.childNodes - x 的子节点
  • x.attributes - x 的属性节点

 

从 books.xml 中的 <title> 元素获取文本的 JavaScript 代码:

txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue
x=xmlDoc.getElementsByTagName("book")[0].attributes;
cat=x.getNamedItem("category").nodeValue

在此语句执行后,txt 保存的值是 "Harry Potter"。

解释:

  • xmlDoc - 由解析器创建的 XML DOM                                (文档节点)
  • getElementsByTagName("title")[0] - 第一个 <title> 元素   (元素节点)
  • childNodes[0] - <title> 元素的第一个子节点                       (文本节点)
  • nodeValue - 节点的值                                                        (文本节点的值)
  • attributes   -属性节点                                                        (属性节点)

在上面的例子中,getElementsByTagName 是方法,而 childNodes 和 nodeValue 是属性。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java笔记:Spring配置xml和注解(6)
Java笔记:Spring配置xml和注解
0 0
Java笔记:Spring配置xml和注解(5)
Java笔记:Spring配置xml和注解
0 0
Java笔记:Spring配置xml和注解(4)
Java笔记:Spring配置xml和注解
0 0
Java笔记:Spring配置xml和注解(3)
Java笔记:Spring配置xml和注解
0 0
Java笔记:Spring配置xml和注解(2)
Java笔记:Spring配置xml和注解
0 0
Java笔记:Spring配置xml和注解(1)
Java笔记:Spring配置xml和注解
0 0
编程笔记:XML和HTML初步学习-2
编程笔记:XML和HTML初步学习-2
0 0
xml开发笔记(一):tinyXml2库介绍、编译和工程模板
xml开发笔记(一):tinyXml2库介绍、编译和工程模板
0 0
Android笔记:如何解决java中的setPeekHeight()没有给出与xml中相同的结果?
Android笔记:如何解决java中的setPeekHeight()没有给出与xml中相同的结果?
0 0
Java笔记:Spring配置xml和注解
Java笔记:Spring配置xml和注解
0 0
+关注
ke_ry
开源技术专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载