DOM(一)
DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口)。DOM描,绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分
节点层次
DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类
型,每种类型分别表示文档中不同的信息及(或)标记。每个节点都拥有各自的特点、数据和方法,另
外也与其他节点存在某种关系
节点的公共属和方法
childNodes
获取子节点
var firstChild = someNode.childNodes[0];var secondChild = someNode.childNodes.item(1);var count = someNode.childNodes.length;
parentNode
获取父节点
firstNode
获取第一个子节点
lastNode
获取最后一个子节点
nextSibling
获取下一个兄弟节点
previousSibling
获取上一个兄弟节点
ownerDocument
获取文档节点
hasChildNodes()
判断是否有子节点
appendChild()
添加子节点,接收一个参数表示要添加的节点,返回添加的节点.
var returnedNode = someNode.appendChild(newNode);alert(returnedNode == newNode); //truealert(someNode.lastChild == newNode); //true
insertBefore()
在参考节点前添加子节点,接收两个参数,第一个参数表示要添加的节点,第二个参数表示参考节点,返回添加的节点.
//插入后成为第一个子节点var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);alert(returnedNode == newNode); //true
replaceChild()
替换子节点,接收两个参数,第一个参数表示要添加的节点,第二个参数表示被替换的节点,返回被替换的节点.
//替换第一个子节点var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
removeChild()
移除子节点,这个方法接受一个参数,即要移除的节点。被移除的节点将成为方法的返回值
//移除第一个子节点var formerFirstChild = someNode.removeChild(someNode.firstChild);
cloneNode()
克隆节点,接收一个boolean类型的参数,当参数为true时执行深复制,意即复制内容包含其子节点.
<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>
var deepList = myList.cloneNode(true);alert(deepList.childNodes.length); //3(IE < 9)或7(其他浏览器)var shallowList = myList.cloneNode(false);alert(shallowList.childNodes.length); //0
deepList.childNodes.length
中的差异主要是因为IE8 及更早版本与其他浏览器处理空白字符的方式不一样。IE9 之前的版本不会为空白符创建节点。cloneNode()
方法不会复制添加到DOM 节点中的JavaScript 属性,例如事件处
理程序等。这个方法只复制特性、(在明确指定的情况下也复制)子节点,其他一切
都不会复制。IE 在此存在一个bug,即它会复制事件处理程序,所以我们建议在复制
之前最好先移除事件处理程序。
Doucment类型
JavaScript 通过Document 类型表示文档。在浏览器中,document 对象是HTMLDocument(继承
自Document 类型)的一个实例,表示整个HTML 页面。而且,document 对象是window 对象的一个
属性,因此可以将其作为全局对象来访问
document对象的属性和方法
documentElement
获取html节点元素
var html = document.documentElement; //取得对<html>的引用alert(html === document.childNodes[0]); //truealert(html === document.firstChild); //true
body
获取body节点元素
title
获取title文字节点元素
//取得文档标题var originalTitle = document.title;//设置文档标题document.title = "New page title";
URL
取得完整的URL
domain
取得域名
referrer
取得来源页面的URL
//取得完整的URLvar url = document.URL;//取得域名var domain = document.domain;//取得来源页面的URLvar referrer = document.referrer;
getElementById()
通过id属性获取元素
getElementsByTagName()
通过元素名获取元素
var div = document.getElementById("myDiv"); //取得id='myDiv'元素的引用var images = document.getElementsByTagName("img"); //取得img元素的引用var allElements = document.getElementsByTagName("*"); //获取文档中所有的元素
IE7及较低版本还为此方法添加了一个有意思的“怪癖”:name特性与给定ID匹配的表单元素也会被该方法返回