DOM相关

javaScript

对于前端必不可少的一项就是操作DOM,记录一些常用的DOM api。

语义化标签
  • header:页头
  • nav:导航栏
  • article:定义文章区域,强调完整、独立,可以更利于搜索引擎识别网页的内容以及判断相关性
  • section:表示网页中不同的分区版块
  • aside:定义页面内容之外的内容,在左侧或右侧边栏
  • footer:页脚
  • main:整个页面的主体部分
  • h1 - h6:标题
  • time:日期
  • figure、figcaption:富文本
  • hgroup:代表"网页" 或 "section"的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其中
  • address:代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。
文档类型判断
  • 1: element元素节点
  • 2: 特性节点,它只存在于元素的attributes属性中
  • 3: 文本节点
  • 8: 注释节点
  • 9: 根节点(document),通过document.nodeType获取
  • 10: 文档类型节点(doctype),包含着与文档的doctype有关的所有信息, 通过document.firstChild获取
  • 11: 文档片段节点DocumentFragment
  • 12: DTD声明节点
创建DOM节点
  • document.createElement(‘tagName’): 创建element节点
  • document.createTextNode(‘text’): 创建文本节点
  • document.createAttribute(‘prop’, ‘value’):创建属性节点
  • document.createDocumentFragment():创建文档碎片节点
获取DOM节点
  • document.getElementById(‘id名称’)
    优点:查找dom最快
    缺点:在element中添加id,类似在window上添加了一个属性,会污染window对象
  • document.getElementByTagName(‘tagName’) 返回包含带有指定标签名所有元素的节点列表
  • document.getElementByClassName(‘class’) 返回包含带有指定类名的所有元素的节点列表
  • document.querySelector(‘css表达式’)
  • document.querySelector(selectors)
推荐文章

谈谈HTML的语义化