JavaScript中 DOM 对象

发表于: 2015-04-22分类于:JavaScript

DOM

节点层次

DOM对文档进行了抽象,将文档描述为一个树形结构,html节点作为树的根节点

Node 类型

DOM1级定义了一个Node接口,所有节点的类型都继承自该接口,所以可以通过将节点的nodeType与节点属性常量比较来获取节点的类型,但是IE没有实现这12个常量,所以在实际应用中通常将nodeType与数字进行比较。

nodeName和nodeValue

对于元素节点,可以使用nodeName获得标签名,但在使用前最好检查一下它是不是一个元素节点。

对于文本节点nodeValue可以获取到节点的文本

节点关系

每个节点都有一个childNodes属性,其中保存着一个NodeList对象。这个对象具有长度,也可以用方括号进行访问但是他并不是一个数组。他的特殊之处在于DOM中的变化可以实时的体现在它的身上,也就是说它并不是在获取chilNodes时刻得到的一个快照。

下面是对childNodes的一些操作:

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var lennth = someNode.childNodes.length

需要注意的是,其中length是在语句执行的时刻childNodes的长度,有时候我门希望将NodeList对象转换为数组,那么可以使用下面方法:

var nodeArray = Array.prototype.slice.call(nodes,0);

还有一些方法可以获取一个节点的兄弟节点,子节点以及父节点。

  • nextSibling:下一个兄弟节点
  • previousSibling:上一个兄弟节点
  • firstChild:第一个孩子节点
  • lastChild:最后一个孩子节点
  • parentNode:父节点

操作节点

  • appendChild:在末尾添加一个孩子节点,需要注意的是,如果传入的节点已经是文档的一部分了,那么这个节点会从原位置移除。
  • insertBefore:可以在一个特定节点前插入新节点
  • replaceChild:替换一个节点,接受两个参数:要插入的节点和要被替换的节点。
  • removeChild:移除一个孩子节点

其他常用方法

  • cloneNode:克隆节点,带参数true表示深度复制,不复制节点上的事件,但是IE在此处bug那就是IE会复制时间,所以在复制前最好是移除掉事件
  • normalize:处理文档树中的文本节点

Document

文档信息

  • document.documentElement:取得对html的引用
  • document.body:取得对body的引用
  • document.title:标题
  • document.URL:页面URL
  • document.domain:域名
  • document.referrer:来源页面URL
  • document.cookie:

查找元素

  • getElementById
  • getElementsByTagName:返回HTMLCollection,HTMLCollection有一个nameItem方法,可以用这个方法返回有特定名字的元素。

特殊集合

  • document.anchors:包含文档中所有带name特性的a元素
  • document.images:所有<img>元素
  • document.links:所有<a>元素

Element 类型

  • nodeType = 1
  • nodeName,tagName
  • parentNode

HTML 元素

  • id:
  • title:
  • lang:
  • className
  • getAttribute:取得特性
  • setAttribute:设置特性
  • removeAttribute:移除特性
  • attributes:得到属性集合,它有以下方法:
    • getNamedItem:返回一个Attr节点
    • removeNamedItem:移除这个Attr节点
    • setNamedItem:设置
    • item(pos)

查询选择的文本

window.getSelection().toString()