第十章 DOM

DOM

1. 节点层次

Node 类型

  1. Node.ELEMENT_NODE(1)
  2. Node.ATTRIBUTE_NODE(2)
  3. Node.TEXT_NODE(3)
  4. Node.CDATA_SECTION_NODE(4)
  5. Node.ENTITY_REFERENCE_NODE(5)
  6. Node.ENTITY_NODE(6)
  7. Node.PROCESSING_INSTRUCTION_NODE(7)
  8. Node.COMMENT_NODE(8)
  9. Node.DOCUMENT_NODE(9)
  10. Node.DOCUMENT_TYPE_NODE(10)
  11. Node.DOCUMENT_FRAGMENT_NODE(11)
  12. Node.NOTATION_NODE(12)
  • nodeName 和 nodeValue
  • 节点关系
  • 操作节点
    appendChild():末尾添加节点
    insertBefore():插入节点
    replaceChild():替换节点
    removeChild():移除节点

Document 类型

  • document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面
  • 文档子节点
    1. document.documentElement 取得对 <html> 的引用
    2. document.body 取得对 <body> 的引用
    3. document.doctype 取得对 <!DOCTYPE> 的引用
  • 文档信息
    1. document.title 取得对 <title> 的引用
    2. document.URL 取得完整的 URL
    3. document.domain 取得域名
    4. document.referrer 取得来自页面的 URL
  • 查找元素
    1. getElementById():通过元素 ID
    2. getElementByTagName():通过元素标签名
    3. getElementByName():通过给定 name 属性
  • 特殊集合
    1. document.anchors:带 name 属性的 <a> 元素
    2. document.forms:<form> 元素
    3. document.images:<img> 元素
    4. document.links:带 href 属性的 <a> 元素
  • DOM 一致性检测
  • 文档写入
    1. write()
    2. weiteln()
    3. open()
    4. close()

Element 类型

  • HTML 元素
    1. id,元素在文档中的唯一标识符
    2. title,文档标题
    3. lang,元素内容的语言代码
    4. dir,语言的方向
    5. className,元素的 class 名
  • 取得属性
    1. getAttribute():取得属性
    2. setAttribute():设置属性
    3. removeAttribute():移除属性
  • attribute 属性
    1. getNamedItem(name):返回节点
    2. setNamedItem(node):添加节点
    3. removeNamedItem(name):移除节点
    4. item(pos):返回位于 pos 位置的节点
  • 创建元素

    document.createElement()

  • 元素的子节点

    元素的 childNodes 属性包含它的所有字节点

Text 类型

  • 创建文本节点

    document.createTextNode()

  • 规范化文本节点

    normalize():合并节点

  • 分割文本节点

    splitText():拆分节点

Comment 类型

  • 注释节点

CDATASection 类型

  • 针对基于 XML 的文档

DocumentType 类型

DocumentFragment 类型

Attr 类型

  • 元素的属性以 attr 类型来表示,包括 name、value 和 specified

2. DOM 操作技术

  • 动态脚本
  • 动态样式
  • 操作表格
  • 使用 NodeList
-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!