HTML DOM学习总结

218 阅读2分钟

HTML DOM

之前学习JavaScript的时候大概了解了HTML DOM(文档对象模型),今天在菜鸟教程上学习的时候,把它系统的总结了一下。大家一起过来康康吧~更详细的可以参考菜鸟教程

HTML DOM 节点

DOM Nodes

HTML中所有的内容都是节点:

  • 整个文档是一个文档节点
  • 每个HTML元素是元素节点
  • HTML元素内的文本是文本节点
  • 每个HTML属性是属性节点
  • 注释是注释节点
HTML DOM 节点树

节点树中的节点拥有层级关系

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子节点
  • 同胞是拥有相同父节点的节点

HTML DOM 方法

常用的HTML DOM 方法

方法 描述
getElementById() 获取带有指定 id 的节点(元素)
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点
replaceChild() 替换子节点
insertBefore() 在指定的子节点前面插入新的子节点
createAttribute() 创建属性节点
createElement() 创建元素节点
createTextNode() 创建文本节点
getAttribute() 返回指定的属性值
setAttribute() 把指定属性设置或修改为指定的值

HTML DOM 属性

一些常用的HTML DOM 属性

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点 nodeName 属性--节点的名称
  • nodeName是只读的
  • 元素节点的nodeName与标签名相同
  • 属性节点的nodeName与属性名相同
  • 文本节点的nodeName始终是#test
  • 文档节点的nodeName始终是#document nodeValue 属性--节点的值
  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值 nodeType 属性--节点的类型
  • 元素 nodeType:1
  • 属性 nodeType:2
  • 文本 nodeType:3
  • 注释 nodeType:8
  • 文档 nodeType:9

通常可以通过JavaScript(或其他语言)getElementById()方法getElementsByTagName()方法getElementsByClassName()方法来访问HTML元素以及修改HTML元素或者属性、样式和事件。