您的位置：首页 > Web前端 > Node.js

js 关于node节点的一些总结

2014-07-03 23:12 656 查看

DOM中的node。

节点对象代表文档树中的一个节点。

这就是一个文档树，摘至于W3C。

节点有很多类型：

元素	nodeType
文档(DOCUMENT_NODE)	9
注释(COMMENT_NODE)	8
文本(TEXT_NODE)	3
属性(ATTRIBUTE_NODE)	2
元素(ELEMENT_NODE)	1

这里我们比较常用的有元素节点，属性节点跟文本节点。

一般节点中常用的有3个属性。

nodeType 返回的是节点的类型，如上图。

nodeName 返回的是节点名称。

　　元素节点返回的是元素名称（注意：返回的是大写）

　　属性节点返回的是属性名称

　　文本节点返回的是#text

　　文档节点返回的是#document

nodeValue 返回的是节点的值

　　文本节点返回的是文本的内容

　　属性节点返回的是属性的值

　　文档节点和元素节点返回的是null 不可用。

下面来看一些例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function () {
var p = document.getElementsByTagName("p")[0];         //取得p元素
alert("p nodeName : " + p.nodeName)        //返回P
alert("p nodeType : " + p.nodeType);       //返回1
alert("p nodeValue :" + p.nodeValue);       //返回null

var attr = p.attributes;         //获取p的属性
//  alert(attr.length);           //定义了2个属性
for (var i = 0;i < attr.length;i++) {
alert("attr nodeName :"+attr[i].nodeName)      //输出属性的名字  id     class
alert("attr nodeType :"+attr[i].nodeType)       //输出属性的节点类型2     2
alert("attr nodeValue :"+attr[i].nodeValue)     //输出属性的值  p1       class1
}

var text1 = p.childNodes[0];                    //p的内部为文本，所以p的子节点就是文本

alert("text nodeName:"+text1.nodeName)          //节点名字#text
alert("text nodeType:"+text1.nodeType)           //节点类型 3
alert("text nodeValue:" + text1.nodeValue)         //节点的值就是文本的内容  this is text
alert("text data:" + text1.data)                 //效果一样  获取文本内容

}
</script>
</head>
<body>
<p id="p1" class="class1">this is text</p>
</body>
</html>

关于节点的一些操作。

创建节点，节点包括很多类型，根据不同类型，创建是不同的方法。

在body中创建一个元素P的节点

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function () {

var nP = document.createElement("p");      //创建元素节点P
nP.innerText = "this is new p";             //设置P的内容
document.getElementsByTagName("body")[0].appendChild(nP);   //在body中添加

var nattr = document.createAttribute("id");       //创建属性节点  id
nattr.value = "p2";                                 //创建属性的值 p2
nP.setAttributeNode(nattr);                       //在nP中添加属性
alert("nattr nodeName:" + nP.attributes[0].nodeName + " nattr nodeValue " + nP.attributes[0].nodeValue);   //输出属性名 id  值p2

var ntext = document.createTextNode("这是文本节点");       //创建文本节点
nP.appendChild(ntext);                                    //添加文本节点到np中

}
</script>
</head>
<body>
</body>
</html>

删除，替换，遍历。

<script>
var div1 = document.getElementById("div1");
var chl1 = div1.childNodes[0];       //获取要删除的子节点
//div1.removeChild(chl1);             //删除子节点
// alert(div1.innerText)
var h1 = document.createElement("h1");
//div1.appendChild(h1);
var h1_text = document.createTextNode("this is h1");
h1.appendChild(h1_text)
div1.replaceChild(h1, chl1);      //替换了原来的P元素
h1.appendChild(chl1);             //添加为h1的子元素

var ul1 = document.getElementById("ul1");      //获取ul元素  遍历节点，取出元素中的文本
var childs = ul1.childNodes;                   //获取ul子节点  ，子节点包括属性节点，文本节点，元素节点
var childstxt = "";
// alert("length:" + childs.length);
for (var i = 0; i < childs.length; i++) {       //遍历节点
if (childs[i].nodeType == 1) {                //找出元素节点li
childstxt += childs[i].childNodes[0].nodeValue;   // 取出li节点中的文本
}
}
alert("childs nodeValue: "+childstxt);     //输出全部文本节点内容  li1li2li3li4li5li6

</script>

<body>
<div id="div1"><p>text</p></div>
<p id="p1" class="class1">this is text</p>

<ul id="ul1" >
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
</body>

介绍了一下里面的方法，node还有一些便于查找的属性。

childNodes 返回节点到子节点的节点列表。

firstChild 返回第一个子节点

lastChild 返回最后一个子节点

nextSibling 返回节点之后紧跟的同级节点。

parentNode 返回节点的父节点

previousSibling 返回节点之前的同级节点

　　

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

标签：

相关文章推荐

新的分享

章节导航