javascript 知识点整理 07 DOM1级

基础理论-W3C-javascript

这部分内容的整理都来自于《js高级程序设计》

DOM一级

节点类型、节点关系、节点操作

Document, Element, Text, DocumentFragment …

DOM API 扩展

DOM 1级

节点类型

  • element
  • text
  • attribute
  • comment
  • document
  • CDATA
  • documentFragment
  • documentType
  • …

每个节点都有nodeName和nodeValue

节点关系

  • parent
    • parentNode
    • childNodes
      • firstChild
      • lastChild
  • siblings
    • previousSibling
    • nextSibling

NodeList

NodeList对象是一个类数组对象

调用Array.prototype.slice.call(nodeList, 0)将其转化为数组

节点操作

  • appendChild
  • insetBefore(node, target)
    • 如果目标节点为null，则与appendChild相同
  • removeChild

  • replaceChild

  • hasChildNodes() 判断是否有子节点

其他方法

  • cloneNode
    • true 深拷贝
    • flase 浅拷贝

  • normalize 合并文本节点

  • ownerDocument 访问到节点所属的文档对象

Document节点

子节点

  • html: document.documentElement
  • body: document.body
  • doctype: document.doctype

文档信息

  • title: document.title
  • url: document.URL
  • domain: document.domain
  • referrer: document.referrer

查找节点

  • document.getElementById();
  • document.getElementsByTagName();
  • document.getElementsByName();

HTMLCollection的namedItem()方法支持通过访问name特性获取元素

特殊合集
  • images
  • forms
  • links
  • …

文档写入

  • write
  • writeIn
  • open
  • close

Element节点

创建节点

  • document.createElement()

    • 直接通过标签名创建节点
    • 将标签以html的形式写入字符串
      • document.createElement(“<div id='oDiv'></div>“)

  • 节点的tagName和nodeName相同

获取特性

  • getAttribute()
    • 通过getAttribute()获取到的是属性的字符串值
    • 访问元素节点对象的属性，获取到的是属性对象或者函数方法
  • setAttribute()

  • removeAttribute()

  • 自定义特性应当使用’data-‘前缀

attributes属性

特性列表，保存了当前元素节点的所有特性

  • getNamedItem()
  • setNamedItem()
  • removeNamedItem()
  • item()

Text节点

创建文本节点

  • doument.createTextNode()

节点操作

nodeValue和data都指向文本节点包含的文本内容

  • appendData(text)
  • insertData(offset, text)
  • deleteData(offset, count)
  • replaceData(offset, count, text)
  • splitData(offset)
  • substringData(offset, count)

documentFragment节点

  • 可以用于字符串拼接
  • 不在document上进行多次DOM操作，在documentFragment上操作完后一次性插入到document上，减少渲染所需要的重绘和回流，提高性能和效率

动态操作

  • 动态设置script的src或文本节点与style的文本节点的值
  • 动态设置script的text与style的styleSheet.cssText


DOM API扩展

查询

  • querySelector
  • querySelectorAll

元素遍历

  • childElementCount
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling

与类相关的扩展

  • getElementsByClassName()
  • classList
    • add
    • delete
    • remove
    • toggle

焦点管理

  • document.activeElements
  • document.hasFocus()

HTMLDocument的变化

字符集变化

自定义数据书属性

插入标记

  • innerHTML
    • IE中插入脚本或者样式，需要在“有作用域的元素之后”，因此需要在脚本元素前添加空格或者隐藏的input域
  • outerHTML
  • insertAdjacentHTML
    • beforebegin
    • afterbegin
    • beforeend
    • afterend

滚动

  • scrollIntoView

专有扩展

文档模式

  • <meta http-equiv='X-UA-compatible' content='IE=IEVersion'>
    • EmulateIE9
    • EmulateIE8
    • EmulateIE7
    • 9
    • 8
    • 7
    • 5

children属性

插入文本

  • innerText
  • outerText
  • textContent

滚动

  • scrollIntoViewIfNeeded()
  • scrollByLines()
  • scrollByPages()