您的位置：首页 > Web前端 > JavaScript

javascript DOM

2016-08-21 13:47 316 查看

Node类型：

nodeType属性：为了确保跨浏览器兼容，最好要将这个属性与数字值进行比较：

if(someNode.nodeType==1){
alert("Node is an element!");
}

nodeName和nodeValue属性：

最好先判断是不是一个元素，再来取得并保存nodeName的值。nodeName中保存的始终是元素的标签名。

childNodes属性：有着NodeList对象，是一种类数组对象。子节点可以用方括号和item()方法来访问。

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

要将NodeList转换为数组，必须手动枚举所有成员：

function convertToArray(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;
}

parentNode属性：父节点
previousSibling属性和nextSibling属性：访问同一列表中的其他节点。同胞节点。

firstChild和lastChild属性：第一个节点和最后一个节点。

hasChildNodes()属性：在节点包含一或多个子节点的情况下返回true。

操作节点：

appendChild()方法：用于向childNodes列表的末尾添加一个节点。

insertBefore()方法：接受两个参数：要插入的节点和作为参照的节点。如果参照节点为null，则insertBefore()与appendChild()执行相同的操作。

//插入后成为最后一个子节点
returnedNode=someNode.insertBefore(newNode,null);
alert(newValue==someNode.lastChild);//true
//插入后成为第一个子节点
var returnedNode=someNode.insertBefore(newNode,someNode.firstChild);
alert(returnedNode==newValue);//true
alert(newValue==someNode.firstChild);//true
//插入后成为最后一个子节点之前
returnedNode=someNode.insertBefore(newNode,someNode.lastChild);
alert(newValue==someNode.childNodes[someNode.childNodes.length-2]);//true

replaceChild() 方法：接受两个参数：要插入的节点和要替换的节点。

//替换第一个节点
var returnedNode=someNode.replaceChild(newNode,someNode.firstChild);
//替换最后一个节点
returnedNode=someNode.replaceChild(newNode,someNode.lastChild);

removeChild()方法：接受一个参数：即要移除的节点。

//移除第一个节点
var returnedNode=someNode.removeChild(newNode,someNode.firstChild);
//移除最后一个节点
returnedNode=someNode.removeChild(newNode,someNode.lastChild);

cloneNode()方法接受一个布尔值参数，用于创建调用这个方法的节点的一个完全相同的副本。
Document类型：

documentElement属性始终指向HTML页面中的<html>元素。

body属性直接指向<body>元素。

所有浏览器都支持document.documentElement和document.body属性。

Document对象还有title属性，URL属性，domain属性和referrer属性。

查找元素：getElementById() 和getElementsByTagName()，前者接受元素的id，后者接受元素的标签名。

getElementsByName() 这个方法返回带有给定name特性的所有元素。

Element类型：

在HTML中，标签名始终都以全部大写表示。

if(element.tagName.toLowerCase()=="div"){
//在此执行某些操作
}

取得特性：

getAttribute()：获取相应的特性值。getAttribute("id");
setAttribute()：设置相应的特性值。setAttribute("id","oDiv");

removeAttribute()：移除相应的特性值。removeAttribute("id");

attributes属性：element.attributes.getNameItem()；element.attributes[" "]。

var btn=document.getElementsByTagName("button")[0];
var id=btn.attributes.getNamedItem("id").nodeValue;
alert(id);一般来说，这个属性的方法不太方便，一般都是选用getAttribute()、setAttribute()、removeAttribute()。
不过在遍历元素的特性时可以用上attributes属性的：

function outputAttributes(element){
var pairs=new Array(),
attrName,
attrValue,
i,
len;

for(i=0,len=element.attributes.length;i<len;i++){
attrName=element.attributes[i].nodeName;
attrValue=element.attributes[i].nodeValue;
pairs.push(attrName+"=\""+attrValue+"\"");
}
return pairs.join(" ");

}

function outputAttributes(element){
var pairs=new Array(),
attrName,
attrValue,
i,
len;

for(i=0,len=element.attributes.length;i<len;i++){
attrName=element.attributes[i].nodeName;
attrValue=element.attributes[i].nodeValue;
if(element.attributes[i].specified){
pairs.push(attrName+"=\""+attrValue+"\"");
}
}
return pairs.join("  ");
}

创建元素：
document.createElement()方法可以创建新元素。接受一个参数：即要创建元素的标签名。创建之后可以使用appendChild(),insertBefore(),replaceChild()方法进行添加到文档树中。

var div=document.createElement("div");
div.className="oDiv";
div.id="oDiv";
document.body.appendChild(div);
Text类型：

创建文本节点：document.createTextNode()，接受一个参数：要插入节点中的文本。
var div=document.createElement("div");
div.className="oDiv";
div.id="oDiv";
var textNode=document.createTextNode("hello world!");
div.appendChild(textNode);
document.body.appendChild(div);
当多个文本节点的时候可以使用normalize()方法来规范化。
分割文本节点：splitText()，按照指定的位置进行分割文本节点的nodeValue值。

Attr类型：有3个属性：name,value,specified

document.createAttribute()传入特性的名称可以创建新的特性节点。之后必须使用setAttributeNode()进行添加。
var attribute=document.createAttribute("align");
attribute.value="left";
element.setAttributeNode(attribute);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航