Home

Written by Mary Ma, and build some interesting tools .

HTML DOM节点属性

2016-05-27

在 HTML DOM 中，所有的事物都是节点。DOM 是被视为节点树的 HTML

为什么说是 DOM 节点树呢~？看图

其实很好理解就是根上有树干，树干上有树枝，树枝再生树枝，但这是一个倒过来的树

根据 W3C 得 HTML DOM 标准，HTML 文档中所有内容都是节点

  • 整个文档是一个文档节点
  • 每个HTML元素都是元素节点
  • HTML元素里的文本是文本节点
  • 每个HTML属性是属性节点
  • 注释是注释节点

节点的属性

innerHTML 属性

这个就是获取元素的内容，比较好理解，可以查看之前写的JS 获取节点文本对比理解

nodeName 属性

nodeName 属性规定节点的名称. nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是#document

nodeValue 属性

nodeValue 属性规定节点的值 元素节点的 nodeValue 是 undefi 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值

nodeType 属性

元素类型 ---> NodeType   元素  --->1   属性  --->2   文本  --->3   注释  --->8   文档  --->9

举个栗子

//整个文档是个文档节点
<html>
  <head>  // 在<html>里的标签元素都是元素节点
    <title>DOM 节点</title>
    //<title>是一个元素节点，“DOM节点”是文本节点
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <a href="https://maxiuli.com">我的博客</a>
    //<a>是一个元素节点，“我的博客”是文本节点，href是属性节点
  </body>
</html>

文章是找资料自己写的，有不对的地方请指正~maxiuli95@Gmail.com

Home

Written by Mary Ma, and build some interesting tools .