一.1.1 节点关系
文档中所有节点相互之间都有关系,包括父子关系,同胞关系。
每个节点都有childNodes属性,保存着一个NodeList对象,NodeList是一种类数组的对象,可以使用childeNode[0],childNode.item(1)来访问,同时拥有length属性,但并不是Array实例。
parentNode:指向文档树种的父节点
nextSibling:紧挨着当前节点的下一个节点
previousSibling:紧挨着当前节点的上一个节点
firstChild:表现某一节点的第一个节点,childNodes[0]
lastChild:表示某一节点的最后一个子节点,childeNodes[childNodes.length-1]
1.2 节点操作
hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false
removeChild()方法:去除一个节点
appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入
replaceChild(node1,node2)方法:从文档树中删除指定的节点node2,插入节点node1,被替换的节点仍然在文档中,但是没有位置
insertBefore(node1,node2)方法:在指定节点node2的前面插入节点node1,并返回node1.如果已经存在,则删除原来的,然后在新位置插入
cloneNode()方法:复制一个节点,该方法有一个参数,true表示深复制,false表示浅复制。不会复制属性,处理程序等。
二.1. Doucument类型
document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个html页面或其他基于xml的文档。并且document是window对象的一个属性,可以将其当做全局对象来访问。
2. 文档子节点
Document的子节点可以是DocumentType、Element、ProcessingInstructior或Comment,有两个访问节点的快捷方式:
- documentElement,该属性一直指向页面中的html元素。
- childNodes,直接访问文档元素。
- document.body,直接指向body元素
- doucment.doctype,取得标签<!DOCTYPE>的信息
文档类型是只读的,而且它只有一个元素节点,通常早已存在。
3 .查找元素
Document类型提供两个查找元素的方法:
- getElementById(),如果找到相应的元素则返回该元素,如果不存在带有相应ID的元素,则返回null。
- getElementByTagName(),返回包含零或多个元素的NodeList,在HTMl文档中,这个方法会返回一个HTMLCollection对象,与NodeList非常类似。其中THMLCollection对象有一个方法namedItem()
- getElementsByName(),会返回带有给定name特性的所有元素。
例: var images = document.getElementsById(“box”);//表示在文档中通过id查找id是box的元素。
2.文档写入
document.write()方法可以用在两个方面:
1.页面载入过程中用实时脚本创建页面内容。
2.用延时脚本创建本窗口或新窗口的内容。
只有当页面被加载的时候document.write()函数才会被执行
doucment.writeln()与上述类似,区别在于换行。
open()和close()分别用于打开和关闭网页的输出流,如果在页面加载期间使用write(),则不需要用这两个方法。
3. 操作特性
getAttribute():用来获取相应元素或其内容的附加信息,与上述获取属性基本一致,但是有两点区别:
1.style,通过getAttribute()获取的是CSS文本,通过属性获取的会返回一个对象。
2.onclick,getAttribute()获取相应代码的字符串,属性获取则会返回一个JavaScript函数。
节点属性的获取:obj.getAttribute(属性名)。
3.setAttribute():接收两个参数,要设置的特性名和值,如果特性已经存在,会修改特性值,如果不存在则会创建。
4.removeAttribute():用于彻底删除元素的特性,IE6及之前的版本不支持此方法。
4. 创建元素
document.createElement()方法可以创建新元素,此方法只接收一个参数,即要创建元素的标签名(不区分大小)。
/*** div创建插入过程 ***/
var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
//追加元素 appendChild()
document.body.appendChild(div);
三、Text类型
Text类型为文本节点,包含的是可照字面解释的纯文本内容,可以包含转义后的HTML字符,但不能包含HTML代码。
创建文本节点
document.createTextNode(“Hello world”);
document.createElement(“div”);
document.body.appendChild(element);//在未添加之前,虽然创建,但是不会显示出来