JS高级程序设计10-DOM_js高级程序设计10号卷-优快云博客

本文深入解析JavaScript中的DOM操作，包括节点类型、文档类型、元素类型等，并详细介绍了如何通过节点属性和方法进行元素查找、操作及文档信息获取。

Node类型（P248）

JS中所有节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法，每个节点都有一个nodeType属性，用以表明节点的类型

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);

//通过比较上面的常量，可以确定节点的类型
if(someNode.nodeType==1){  //适用于所有浏览器
    alert("Node is an element.");
}

nodeName和nodeValue属性

利用nodeName和nodeValue属性可以了解节点的具体信息，对元素节点来说，nodeName保存的始终是元素的标签名，而nodeValue的值始终为null

节点关系（P249）

//每个节点都有一个childNodes属性，里面保存着一个NodeList对象（类数组对象），用于保存一组有序的节点

//访问保存在NodeList对象中节点的方法：
var firstChild=someNode.childNodes[0];
var secondChild=someNode.childNodes.item(1);
var count=someNode.childNodes.lenght;

//将NodeList对象转换为数组
function convertYoArray(nodes){ 
    var array=null;
    try{ 
        array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器
    }catch(ex){ 
        array=new Array();
        for(var i=0;len=nodes.length;i<len;i++){ 
            array.push(nodes[i]);
        }
    }
    return array;
}

//访问同胞节点
通过使用列表中每个节点的previouSibling和nextSibling属性，可以访问同胞节点：
//列表中的第一个节点的previousSibling属性值和最后一个节点的nextSibling属性值都为null
if(someNode.nextSibling===null){ 
    alert("Last node in the parent's childNodes list.");
}else if(somenode.previousSibling===null){ 
    alert("First node in the parent's childNodeslist.");
}

//someNode.firstChild和someNode.lastChild

操作节点（P251）

appendChild() //向childNodes列表的末尾添加一个节点
insertbefore() //向childNodes列表的某个位置添加一个节点
replaceChild() //将childNodes列表的某个位置的节点替换掉
removeChild() //将childNodes列表的某个位置的节点移除 
//注：文档仍有被移除和被替换的节点，只是相应的节点在文档中没有位置了
cloneNode(true) //深复制，复制节点及其整个子节点树
cloneNode(false) //浅复制，复制的节点属文档所有，但没有指定的父节点，是个孤儿
normalize() //处理节点的后代节点中的文本节点

Document类型（P253）

Document节点特性：

nodeType的值为9；
nodeName的值为"#document";
nodeValue的值为null;
parentNode的值为null;
ownerDocument的值为null;
其子节点可能是一个DocumentType(<=1)、Element(<=1)、ProcessingInstruction或Comment.

文档的子节点（P254）

document.documentElement //表示的是document的<html>子节点
document.body //表示的是document的<body>子节点
document.doctype //取得对<!DOCTYPE>的引用

文档信息(P255)

document.title //文档标题
document.URL //完整的URL
document.domain //域名
document.referrer //来源页面的URL

查找元素(P256)

document.getElementById(); //如果文档中有多个相同的id，则只返回第一次出现的元素
document.getElementByTagName(); //有多少就包含多少
document.getElementByTagName("*"); //取得所有所有元素
document.getElementsByName(); //只有HTMLDocument类型才会有的方法，返回带有给定name特性的所有元素

特殊集合

document.anchors //包含文档中所有带name特性的<a>元素
document.forms //包含文档中所有<form>元素
document.images //包含文档中所有的<img>元素
document.links //包含文档中所有带href特性的<a>元素

DOM一致性检测(P259)

var hasXmlDom=document.implementation.hasFeature("XML","1.0");

文档写入(p259)

write()、writeln()、open()和close()

Element类型（P261）

Element节点的特征：

nodeType的值为1；
nodeName的值为元素的标签名；
nodeValue的值为null；
parentNode可能是Document或Element;
//要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性

HTML元素

getAttribute() //取得特性
setAttribute() //设置属性
removeAttribute() //删除元素属性

attributes属性(P266)

getNameItem(name) //返回nodeName属性等于name的节点
removeNamedItem(name) //从列表中移除nodeName属性等于name的节点
setNamedItem(node) //向列表中添加节点，以节点的nodeName属性为索引
item(pos) //返回位于数字pos位置处的节点

//取得元素id特性
var id=element.attributes.getNamedItem("id").nodeValue;
var id=element.attributes.["id"].nodeValue;

创建元素（P268）

document.createElement()  //创建新元素

Text类型（P270）

Text节点的特征：

nodeType的值为3；
nodeName的值为”#test“;
nodeValue的值为节点所包含的文本；
parentNode是一个Element;
不支持子节点；
//nodeValue属性和data属性都可以访问Text节点的文本，且包含的值相同
appendData(text):将text添加到节点的末尾
deleteData(offset,count):从offset指定的位置开始删除count个字符
insertData(offset,text):从offset指定的位置插入text
replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count位置处的字符串
splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点
substringData(offset,count):提取从offset指定的位置开始到offset+count为止处的字符串

创建文本节点（P271）

document.createTextNode() //创建新文本节点

规范化文本节点（P272）

//相邻个同胞文本节点很容易导致混乱，将相邻文本节点合并是一个解决的方法

//在拥有两个相邻文本节点的父元素上调用mormalize(),可以将所有文本节点合并成一个节点

分割文本节点（P273）

splitText()

Comment类型（P273）

Comment节点的特性

nodeType的值为8；
nodeName的值为"#comment";
nodeValue的值是注释的内容
parentNode可能是Document或Element;
不支持子节点
Comment类型与Text类型继承自相同的基类，除splitText()之外的所有字符串操作方法都一样

CDATASection类型（略）
DocumentType类型（略）
DocumentFragment类型（略）

Attr类型（特性节点P276）

Attr节点的特性

nodeType的值为11；
nodeName的值是特性的名称；
nodeValue的值是特性的值；
parentNode的值为null；
在HTML中不支持子节点；

使用document.createAttribute()

//使用document.createAttribute()并传入特性的名称可以创建新的特性节点
var attr=document.createAttribute("align");
attr.value="left";
element.setAttributeNode(attr);

DOM操作结束（P277）

动态脚本（P277）
动态样式（P279）

操作表格（P281）
为了方便建构表格，HTML DOM还为<table>、<tbody>和<tr>元素添加了一些属性和方法

使用NodeList

Nodelist、NamedNodeMap以及HTMLCollection三个集合都是实时动态的

//下面的代码会导致无限循环
var divs=document.getElementsByTagName("div"),i,div;
for(i=0;i<divs.length;i++){ 
    div=document.createElement("div");
    document.body.appendChild(div);
}
//下面的代码不再会导致无限循环
var divs=document.getElementsByTagName("div"),i,len,div;
for(i=0 len=divs.length;i<len;i++){ 
    div=document.createElement("div");
    document.body.appendChild(div);
}