Xiaoshier Blog

JavaScript基础知识之DOM

发表于 | 分类于

整理 DOM 对象基础知识

Node 类型

常用的有 Document, Element, Text, Comment, CDATASection, DocumentType, DocumentFragment, Attr 类型

  1. Node 类型

    • nodeName
    • nodeValue
    • childNodes 获取儿子辈儿内容
    • firstChild
    • lastChild
    • nextSibling
    • previousSibling
    • parentNode
    • appendChild(newNode)
    • insertBefore(newNode[, antherNode])
      someNode.insertBefore(newNode, someNode.firstChild)
      往 someNode 的子级 someWhere 之前添加新的节点
    • replaceChild(newNode, anotherNode)
      someNode.replaceChild(newNode, someNode.firstChild)
      用新的节点替换
    • removeChild(node)
      someNode.removeChild(someNode.firstChild)
      移除某个子节点
    • cloneChild(bollean)
      element.cloneChild(true);
      传参数为 true 时深复制, 复制节点及整个子节点数; false 时浅复制,复制节点本身
    • normalize()

  2. Document 类型
    Document 表示文档, docuemnt 对象是 windows 对象的一个属性, 是一个全局对象
    可通过 document.documentElement 获得

    • nodeType: 9
    • nodeName: #document
    • nodeValue: null
    • parentNode: null
    • document.title 设置或获取当前文档的标题
    • ducument.body 获取 body 元素
    • document.URL 当前文档的 URL
    • document.domain 当前文档域名
    • document.cookie 设置或返回与当前文档有关的所有 cookie
    • document.referrer 载入当前文档的文档 url
    • docuemnt.lastModified 文档被修改的最后日期和时间
    • document.getElementById()
    • document.getElementsByTagName()
    • document.getElementsByName()
    • document.write()
    • document.writeln()
    • document.open()
    • document.close()
    • document.all 当前文档所有的标签
    • document.anchors 带有 name 的 a 标签
    • document.forms
    • document.images
    • document.links 带有 href 的 a 标签

  3. Element 类型

    • nodeType: 1
    • nodeName: 返回tagName
    • nodeValue: null
    • getAttribute(name) 返回元素的属性值
    • setAttribute(name, value) 设置属性
    • removeAttribute(name) 移除属性
    • hasAttributes() 是否含有属性
    • hasAttribute(name) 是否含有指定属性
    • createElement() 创建新的元素
    • appendChild() 向子级末尾添加新的元素
    • insertBefore() 向指定子级位置之前添加新的元素
    • removeChild() 移除子节点
    • replaceChild() 替换子节点
    • cloneNode(boolean) 复制指定节点[及其子节点, 传入 true 参数]
    • hasChildNodes() 是否含有子节点
    • compareDocumentPosition(anotherEle) 比较两元素的位置
    • isEqualNode() 是否是相同节点
    • isSameNode() 是否是同一节点
    • isSupported() 是否支持指定特性
    • id 设置或返回 id
    • className 设置或返回 class name
    • dir 设置或返回文本方向
    • lang 设置或返回语言
    • title 设置或返回 title
    • style 设置或返回 style ele.style.width = '10px'; ele.style.cssText = 'width: 20px';
    • innerHTML 设置或返回元素内容
    • textContent 设置或返回节点及所有后代的文本内容
    • contentEditable 设置或返回元素是否可编辑
    • tabIndex 设置或返回 tab 键控制次序
    • accessKey 设置或返回元素快捷键
    • ownerDocument 返回元素的根元素
    • childNodes 返回节点的 nodeList
    • parentNode 返回父节点
    • firstChild 返回第一个子 node
    • lastChild 返回最后一个子 node
    • nextSibling 返回下一个同级node
    • previousSibling 返回上一个同级node
    • nodeList.length 返回 nodeList 节点数
    • nodeList.item() 返回 nodeList 指定下表的 node
    • clientHeight 返回可见高度
    • clientWidth 返回可见宽度
    • offsetHeight 返回元素高度
    • offsetWidth 返回元素宽度
    • offsetLeft 返回水平偏移位置
    • offsetTop 返回垂直偏移位
    • offsetParent 返回一个指向最近的包含该元素的定位元素, 如果无定位元素, 返回最近的 table 元素, 或 body 元素
    • scrollHeight 返回元素的整体高度
    • scrollWidth 返回元素的整体宽度
    • scrollLeft 返回元素左边缘与视图之间的距离
    • scrollTop 返回元素上边缘与视图之间的距离

  4. Text 类型

    • nodeType: 2
    • nodeName: #text
    • nodeValue: 节点包含的文本
    • parentNode: element
    • childNodes: null
    • createTextNode()

  5. Comment 类型

    • nodeType: 8
    • nodeName: #comment
    • nodeValue: comment content
    • createComment()

  6. Attr 类型

    • nodeType: 2
    • nodeName: attribute name
    • getAttribute(name)
    • setAttribute(name, value)
    • removeAttribute(name)

    • 通过访问特性节点添加特性 

      var attr = document.createAttribute('align');
attr.value = 'left';
element.setAttributeNode(attr);
var getAttr = element.getAttributeNode('align').value; //left
var getAttr = element.attributes['align'].value; //left

DOM 扩展

  1. 选择符

    • querySelector 获得第一个符合条件的
    • querySelectorAll 获得所有
    • matchesSelector 是否匹配选择器

  2. 元素遍历
    由于浏览器处理元素间的空格时不一致(IE9- 的浏览器不返回文本节点, 其他浏览器返回文本节点),
    获取 node 节点时会有差异, 扩展了如下获取元素. IE9+浏览器支持

    • childElementCount
    • firstElementChild
    • lastElementChild
    • previousElementSibling
    • nextElementSibling

  3. HTML5

    • getElementsByTagName
    • focus()
    • hasFocus() 是否获得焦点, 返回布尔值
    • innerHTML
    • children
    • contains(children) 是否包含children