[10.DOM]各节点类型详细介绍

DOM节点

  • Node类型 (someNode.nodeType[.nodeName][.nodeValue])

Node.ELEMENT_NODE(1);

Node.ATTRIBUTE_NODE(2);

Node.TEXT_NODE(3);

Node.CDATA_SECTION_NODE(4);

Node.ENTITY_REFERENCE_NODE(5);

Node.ENTITY_NODE(6);

Node.PROCESSING_INSTRUCTION_NODE(7);

Node.COMMENT_NODE(8);

Node.DOCUMENT_NODE(9);

Node.DOCUMENT_TYPE_NODE(10);

Node.DOCUMENT_FRAGMENT_NODE(11);

Node.NOTATION_NODE(12);

  • 节点关系

parentNode(childNodes)当前节点的父(子)节点

firstChild(lastChild)第(最后)一个子节点

previousSibling(nextSibling)上(下)一个兄弟节点

  • 操作节点

appendChild()、insertBefore()、replaceChild()、cloneNode()

Document类型

document对象是HTMLDocument的一个实例,表示整个html页面。document对象是window对象的一个属性,因此可以将其作为全局对象访问。

nodeType : 9,

nodeName : '#document',

nodeValue : null

  • 文档的子节点

<html>的引用:document.documentElement

<body>的引用:document.body

  • 文档信息

网页标题:document.title

当前页url:document.URL

当前页域名:document.domain

来源页的url:document.referrer

  • 查找元素

document.getElementById()、document.getElementsByTagName()、document.getElementsByName()

  • 特殊集合

带name的a标签:document.anchors

<form>元素:document.forms

img元素:document.images

带href的a标签:document.links

Element类型

用于表现XML和HTML元素,提供了对元素标签名、子节点及特性的访问。

nodeType : 1,

nodeName : 标签名,

nodeValue : null

  • 标准属性:id、title、lang、dir、className,原生js获得的dom节点可通过.获取
  • 取得与修改属性

获得属性值:getAttribute('属性名')

修改属性值:getAttribute('属性名','新值')

删除属性:removeAttribute('属性名')

  • 获得所有属性的数组:attributes,私有方法有getNamedItem(nodeName)、removeNamedItem(nodeName)、setNamedItem(node)、item(pos),还有nodeName、nodeValue

获得属性值:attributes['属性名']

  • 创建元素:createElement('节点类型'),ie可直接传入完整的元素标签

Text类型

节点中的纯文本内容。获得节点的引用后用nodeValue和data获得文本内容。

nodeType : 3,

nodeName : '#text',

nodeValue : 文本内容

  • 文本的操作

尾部插入:appendData('内容')

指定位置删除节点:deleteData(pos,count)

指定位置插入节点:insertData(pos,'内容')

指定位置替换内容:replaceData(pos,count,'内容')

以指定字符拆分内容:splitText(pos)

提取指定位置字符串:substringData(pos,count)

  • 创建文本节点:document. createTextNode('内容')
  • 合并element下的所有文本节点:element.normalize()

Comment类型(注释)

获得节点的引用后用nodeValue和data获得注释内容。操作的方法和Text类型相同(除splitText()方法)。

nodeType : 8,

nodeName : '#comment',

nodeValue : 注释内容

  • 创建注释节点:document. createComment('内容')

CDATASection类型(不常用)

针对基于XML的文档,表示CDATA区域。继承自Text类型,但splitText()方法不可用。

nodeType : 4,

nodeName : '#cdata-section',

nodeValue : CDATA区域里的内容

DocumentFragment类型(不常用)

文档中没有此类型的标注,用来包含和控制节点,且不会像完整的文档那样占用额外资源,里面保存将来会添加到文档的节点。

nodeType : 11,

nodeName : '#document-fragment',

nodeValue : null

  • 创建文档片段:document. createDocumentFragment()

Attr类型(不常用)

元素的属性,可用Element类型的属性方法getAttribute()、setAttribute()、removeAtttribute()操作。

nodeType : 2,

nodeName : 属性名,

nodeValue : 属性值

 

posted on 2016-11-22 07:23  Rnet  阅读(339)  评论(0编辑  收藏  举报

导航