整理JavaScript对DOM中各种类型的元素的常用操作
节点类型
nodeType
以下是一些重要的nodeType的取值：
1：元素element
2：属性attr
3：文本text
8：注释comments
9：文档document
nodeName,nodeValue
节点关系
childNodes:每个节点都有一个childNodes属性，其中保存着一个NodeList对象
firstChild:等同于childNodes[0]
lastChild:等同于childNodes.length-1
同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
操作节点
appendChild()
appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。
insertBefore()
insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。
//插入后成为最后一个子节点 returnedNode=someNode.insertBefore(newNode,null); //插入后成为第一个节点 returnedNode=someNode.insertBefore(newNode,someNode.firstChild); //插入到最后一个子节点前面 returnedNode=someNode.insertBefore(newNode,someNode.lastChild);
repaceChild()
repaceChild()接受两个参数，要插入的节点和要替换的节点
varreturnedNode=someNode.replaceChild(newNode,someNode.firstChild);
removeChild()
只移除而非替换节点。
varformerFirstChild=someNode.removeChild(someNode.firstChild);
cloneNode()
item1
item2
item3
vardeepList=myList.cloneNode(true); console.log(deepList.length);//3 varshallowList=myList.cloneNode(false); console.log(shallowList.childNodes.length);//0
Document类型
Document节点具有下列特征：
- nodeType的值为9；
- nodeName的值为#document;
- nodeValue的值为null;
- parentNode的值为null;
- ownerDocument的值为null;
文档的子节点
varhtml=document.documentElement;//取得对<html>的引用 console.log(html===document.childNodes[0]);//true console.log(html===document.firstChild);//true
文档信息
//取得文档的标题 varoriginalTitle=document.title; //设置文档标题 document.title="Newpagetitle"; //取得完整的url varurl=document.URL; //取得域名 vardomain=document.domain; //取得来源页面的url varreferrer=document.referrer; //假设页面来自p2p.wrox.com域 document.domain="wrox.com";//成功 document.domain="nczonline.net";//失败
在IE7中调用document.getElementById("myElement");结果会返回<input>元素，如下所示；
最好的办法是不让表单字段的name特性与其他元素的ID相同。
<inputtype="text"name="myElement"value="textfield"> <divid="myElement">adiv</div>
特殊集合
- document.anchors,包含文档中所有带name特性的a元素;
- document.forms,包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同;
- document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同;
- document.links，包含文档中所有带href特性的a元素;
文档写入
<html>
<head>
<title>document.write()Example3</title>
</head>
<body>
<scripttype="text/javascript">
document.write("<scripttype=\"text/javascript\"src=\"file.js\">")+"<\/script>");
</script>
</body>
</html>
字符串<\/script>不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。
Element类型
Element节点具有以下特征：
- nodeType的值为1;
- nodeName的值为元素的标签名;
- nodeValue的值为null;
- parentNode可能是Document或Element;
要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；
<divid="myDiv"></div>
vardiv=document.getElementById("myDiv");
console.log(div.tagName);//DIV
console.log(div.nodeName);//DIV
if(element.tagName=="div"){//不能这样比较，很容易出错
}
if(element.tagName.toLowerCase=="div"){//这样最好（适用于任何文档）
}
取得特性
操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()；
注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。
vardiv=document.getElementById("myDiv");
console.log(div.getAttribute("class"));//bd
创建元素
使用document.createElement()方法可以创建新元素。
元素的子节点
在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:
for(vari=0;len=element.childNodes.length;i<len;i++){
if(element.childNodes[i].nodeType==1){
//执行某些操作
}
}
Text类型
Text节点具有以下特征：
- nodeType的值为3；
- nodeName的值为"#text";
- nodeValue的值为节点所包含的文本；
- parentNode是一个Element；
创建文本节点
可以使用document.createTextNode()创建新文本节点。
规范化文本节点
normalize()
分割文本节点
splitText()
Comment类型
comment节点具有下列特征：
- nodeType的值为8;
- nodeName的值为"#comment";
- nodeValue的值是注释的内容；
- parentNode可能是Document或Element；
- 不支持（没有）子几点；
DOM操作技术
操作表格
//创建table
vartable=document.createElement("table");
table.border=1;
table.width="100%";
//创建tbody
vartbody=document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell2,1"));
//创建第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell2,2"));
document.body.appendChild(table);
选择符API
querySelector()方法
//取得body元素
vartbody=document.querySelector('body');
//取得ID为"myDIV"的元素
varmyDIV=document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
varselected=document.querySelector(".selected");
//取得类为"button"的第一个图像元素
varimg=document.body.querySelector("img.button");
querySelectorAll()方法
//取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))
varems=document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
varselecteds=document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
varstrongs=document.querySelectorAll("pstrong");
HTML5
与类相关的扩充
getElementsByClassName()方法：
该方法可以通过document对象及所有HTML元素调用该方法。
//取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓
varallCurrentUsernames=document.getElementsByClassName("usernamecurrent");
//取得ID为"myDiv"的元素中带有类名"selected"的所有元素
varselected=document.getElementById("myDiv").getElementsByClassName("selected");
焦点管理
HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。
varbutton=document.getElementById("myButton");
button.focus();
alert(document.activeElement===button);//true
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
varbutton=document.getElementById("myButton");
botton.focus();
alert(document.hasFocus());//true