节点层次

  • 文档元素html
  • Node类型

    • 每个节点都有nodeType,可根据nodeType来判断系欸DNA类型,详见高程248页
    • 节点关系,每个节点都有childNodes属性,保存着NodeList类数组对象
    • 操作节点:

      • appendChild():在末尾添加节点
      • insertBefore():接收两个参数,第一个为需要插入的节点,第二个为插入节点的位置
      • replaceChild():替换节点,要替换的节点,要被替换的节点
      • removeChild():移除节点
      • cloneNode():接收一个布尔值参数,是否对克隆的对象进行深复制
      • normallize():处理空文本节点
  • Document类型

    • nodeType:9
    • nodeName:"#document"
    • nodeValue:null,
    • parentNode:null,
    • ownerDocument:null,
    • document.title:获取文档标题
    • document.URL:获取文档url
    • document.domain:获取文档主域名
    • document.getElementById():通过id查找节点
    • document.getElementByTagName():通过元素标签名查找元素
    • HtmlDocument.getElementByName():通过元素的name特性查找元素
    • document.anchors:获取文档中所有带name的a标签
    • document.forms:获取文档中所有的form元素
    • document.images:获取文档中所有的img元素
    • document.link:获取文档中所有带href特性的a标签
  • 文档写入

    • document.write():输出文档
    • document.writeln():输出文档
    • document.open():打开网页输出流
    • document.close():关闭网页输出流
  • Element类型

    • nodeType:1
    • nodeName:元素的标签名
    • nodeValue:null,
    • parentNode:Document或者element
    • 子节点可能是:element,text,comment,processinginstrunction,CDATASection,EntityReference
  • HTML元素(标准特性)

    • id
    • title
    • lang
    • dir
    • className
    • 取得特性:getAttribute()
    • 设置特性: setAttribute(name,value)
  • attributes属性

    • getNamedItem(name):返回nodename属性等于name的节点
    • removeNamedItem(name):从列表中移除nodeName属性等于name的节点
    • setNamedItem(node):向列表中添加节点,以节点的nodeName属性为索引
    • item(pos):返回位于数字pos位置处的节点
  • 创建节点

    • document.createElement():创建新元素
  • Text类型

    • nodeType:1
    • nodeName:'#text'
    • nodeValue:节点所包含的文本
    • parentNode:Element
    • appendData(text):将text添加到节点末尾
    • deleteData(offset,count):从offset位置开始删除count个字符
    • insertData(offset,text):从offset位置插入text字符
    • replaceData(offset,count,text):用text替换从offset开始到offset+count为止的处的文本
    • splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点
    • substringData(offset,count):提取从offset指定的位置开始到offset+count为止的字符串
  • 创建文本节点

    • document.createTextNode():创建文本节点
  • comment类型(注释节点)

    • nodeType:8
    • nodeName:#comment
    • nodeValue:注释的内容
    • parentNode:Document或者Element
  • CDATASection类型(只争对于XML)

    • nodeType:4
    • nodeName:#cdata-section
    • nodeValue:CDATA区域的内容
  • DocumentType

    • nodeType:10
    • nodeName:doctype的名称
    • nodeValue:null
    • parentNode:Document
  • DocumentDragment

    • nodeType:11
    • nodeName:#document-fragment
    • nodeValue:null
    • parentNode:null
    • 没有对应标记
  • Attr类型

    • nodeType:2
    • nodeName:特性的名字
    • nodeValue:特性的值
    • parentNode:null
    • atter有三个值:name,value和用来区分是否是1默认的特性的specified
  • DOM操作技术

    • 动态脚本

      • 创建标签法
      • <script></script>
    • 动态样式

      • 创建标签法
      • <style></style>
  • 操作表格

    • caption:保存着对<caption>元素(如果有)的指针
    • tBodies:是一个<tbody>的HTMLCollection
    • tFoot:保存着对<tfoot>元素(如果有)的指针
    • tHead:保存着对<thead>元素(如果有)的指针
    • rows:是一个表格中所有行的HTMLColletion
    • createTHead:创建<thead>元素,将其放在表格中,返回引用
    • createTFoot:创建<tfoot>元素,将其放在表格中,返回引用
    • createCaption:创建<caption>元素,将其放在表格中,返回引用
    • deleteThead:删除<thead>元素
    • deleteTfoot:删除<tfoot>元素
    • deleteRow(pos):删除指定位置的行
    • deleteCapition():删除<caption>元素
    • insertRow(pos):向指定位置插入一行
    • deleteCell(pos):删除指定位置的单元格
    • insertCell(pos):向指定位置插入一行