JavaScript第十章DOM

节点层次

• 文档元素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)：向指定位置插入一行