javascript中的NodeType、NodeValue、NodeName实例测试

最新推荐文章于 2022-06-06 22:04:55 发布

銨靜菂等芐紶

最新推荐文章于 2022-06-06 22:04:55 发布

阅读量311

点赞数

文章标签： javascript

原文链接：http://www.pinlue.com/article/2020/03/1214/1810021066127.html

版权

转载自品略图书馆：http://www.pinlue.com/article/2020/03/1214/1810021066127.html

javascript中的firstChild是怎么执行的？

<ul id="contain"> <li><a href="http:/www.iwcn.net">Microsotf</a></li> <li><a href="http:/www.iwcn.net">Yahoo</a></li> <li><a href="http:/www.iwcn.net">Easy</a></li> <li><a href="www.iwcn.net">W3c/Javascript</a></li> <li><a href="www.iwcn.net">Design|Source</a></li> </ul>var container=document.getElementById("contain"); 使用firstChild是ul元素下的第一个子节点（包括文本节点、HTML元素节点）。所以按照标准，你这个例子在Firefox和Opera中，container.firstChild应该获取空白符的文本节点。而IE不是这样实现的，如果文本节点只包含空白符，IE会直接跳过。所以在IE中通过container.firstChild你获得的是li元素节点。 2、firstChild是元素的所有子节点（childNodes）中的第一个子节点，如果元素的第一个子节点没有变化，则firstChild这个引用也不会有变化。连续获取两次firstChild是同一个对象。补充：你要了解引用与对象的关系。firstChild是指向元素首个子节点的引用。你给的xx函数中，将firstChild引用指向的对象append到父对象的末尾，原来firstChild引用的对象就跳到了container对象的末尾，而firstChild就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了。

<body>

</ul>

var attr_p = document.getElementById("action");

alert(attr_p.childNodes[1].childNodes[0].nodeValue);

</script>

</body>

如果要取得id为action的ul的第一个li内的文本节点（如取得：第一个），可以使用…childNodes[1].childNodes[0].nodeValue这种方法找到，使用…childNodes[1].firstChild.nodeValue同样可以找到第一个li的文本节点，

结论childNodes[0]等价于firstChild，无论何时何地，重要需要访问childNodes[]数组的第一个元素，我们就可以把它写成firstChild，DOM还提供一个与之对应的lastChild属性。

需要注意的是，ff的空格节点问题，可以使用nodeType属性对节点类型判断，直到发现元素节点为止

*************************************************************

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

(一)nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

(二)nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

(三)nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型节点类型

元素element 1

属性attr 2

文本text 3

注释comments 8

文档document 9

在JavaScript中，存在有nodeName 、nodeType、 nodeValue这三个属性，今天我们来了解下JavaScript中的nodeName 、nodeType 、nodeValue区别

nodeName

nodeName 属性含有某个节点的名称。

* 元素节点的 nodeName 是标签名称

* 属性节点的 nodeName 是属性名称

* 文本节点的 nodeName 永远是 #text

* 文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的.

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型节点类型

元素element 1

属性attr 2

文本text 3

注释comments 8

文档document 9

HTML文件:

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DOM标准</title>

</head>

<body>

<h1 id="h1">An HTML Document</h1>

<p id="p1">This is a <i>W3C HTML DOM</i> document.</p>

</body>

</html>

JS:

Js代码

function showElement(){

var element=document.getElementById("h1");//h1是一个<h1>标签

alert("nodetype:"+element.nodeType);//nodeType=1

alert("nodeName:"+element.nodeName);

alert("nodeValue:"+element.nodeValue); //null

alert("element:"+element);

}

function showText(){

var element=document.getElementById("h1");

var text=element.childNodes[0];

alert("nodeType:"+text.nodeType); //nodeType=3

alert("nodeValue:"+text.nodeValue); //文本节点的nodeValue是其文本内容

text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。

alert("nodeName:"+text.nodeName);

alert(text.data); //data同样是其内容,这个属性下同样可以增删改。

}

function showDocument(){

alert("nodeType:"+document.nodeType); //9

alert("nodeName:"+document.nodeName);

alert(document);

}

function showAttr(){

var btnShowAttr=document.getElementById("btnShowAttr"); //演示按钮，有很多属性

var attrs=btnShowAttr.attributes;

for(var i=0;i<attrs.length ;i++){

var attr=attrs[i];

alert("nodeType:"+attr.nodeType); //attribute 的nodeType=2

alert("attr:"+attr);

alert("attr.name:"+attr.name+"="+attr.value);

}

function demo(){

var btnDemo1=document.getElementById("btnDemo1");

btnDemo1.οnclick=showElement; //按钮1取节点nodetype值

var btnDemo2=document.getElementById("btnDemo2");

btnDemo2.οnclick=showText;

var btnDemo3=document.getElementById("btnDemo3");

btnDemo3.οnclick=showDocument;

var btnShowAttr=document.getElementById("btnShowAttr");

btnShowAttr.οnclick=showAttr;

}

window.οnlοad=demo;

1. nodeName属性: 节点的名字。

如果节点是元素节点，那么返回这个元素的名字。此时，相当于tagName属性。

比如：

<p>aaaa</p> : 则返回 p ;

如果是属性节点，nodeName将返回这个属性的名字。

如果是文本节点，nodeName将返回一个#text的字符串。

另外我要说的是： nodeName属性是一个只读属性，不能进行设置.(写)

它返回大写字母的值。

2. nodeType属性：返回一个整数，代表这个节点的类型。

我们常用的3中类型：

nodeType == 1 ：元素节点

nodeType == 2 ：属性节点

nodeType == 3 ：文本节点

如果想记住的话，我们可以这么去记：

比如：

<p title="cssrain" >test</p> 从前往后读：你会发现先是元素节点(1)，然后是属性节点(2)，最后是文本节点(3)，这样你就很容易记住了 nodeType分别代表什么类型了。（我总结的一点小技巧， ^_^。）

nodeType属性经常跟 if 配合使用，以确保不会在错误的节点类型上执行错误的操作。

比如：

function cs_demo(mynode){

if(mynode.nodeType == 1){

mynode.setAttribute("title","demo");

}

代码解释：先检查mynode的nodeType属性，以确保它所代表的节点确实是一个元素节点。

和nodeName属性一样，他也是只读属性，不能进行设置.(写)。

3. nodeValue属性：返回一个字符串，这个节点的值。

如果节点是元素节点，那么返回null；（注意下）

如果是属性节点，nodeValue将返回这个属性的值。

如果是文本节点，nodeValue将返回这个文本节点的内容。

比如：

<div id="c">aaaaaaaaaaaaaaaa</div>

Js代码

var c= document.getElementById("c");

alert( c.nodeValue );//返回null

nodeValue是一个可以读、写的属性。但它不能设置元素节点的值。

再看看下面的例子：

<div id="c">aaaaaaaaaaaaaaaa</div>

Js代码

var c= document.getElementById("c");

c.nodeValue =" dddddddddddd"; //不能设置

//alert( c.firstChild.nodeValue ) //元素节点包括属性节点和文本节点。

c.firstChild.nodeValue = "test"//能设置

当然我们为了确保能正确运行：可以加一段代码：

<div id="c">aaaaaaaaaaaaaaaa</div>

Js代码

var c= document.getElementById("c");

c.nodeValue =" dddddddddddd"; //不能设置

//alert( c.firstChild.nodeValue )

if( c.firstChild.nodeType==3 ){ //判断是不是文本节点

c.firstChild.nodeValue = "test"//能设置

}

//可以看出，如果要设置元素节点，不能直接设置，而必须先使用firstChild或者lastChild等然后设置nodeValue.

nodeValue一般只用来设置文本节点的值。如果要刷新属性节点的值，一般使用setAttribute().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DOM标准</title>

</head>

<body>

<h1 id="h1">An HTML Document</h1>

This is a <i>W3C HTML DOM</i>

document.

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

function showElement(){

var element = document.getElementById("h1");//h1是一个<h1>标签

console.log("nodetype:" + element.nodeType);//nodeType=1

console.log("nodeName:" + element.nodeName);

console.log("nodeValue:" + element.nodeValue); //null

console.log("element:" + element);

}

function showText(){

var element = document.getElementById("h1");

var text = element.childNodes[0];

console.log("nodeType:" + text.nodeType); //nodeType=3

console.log("nodeValue:" + text.nodeValue); //文本节点的nodeValue是其文本内容

text.nodeValue = text.nodeValue + "abc"; //文本内容添加修改删除等等。

console.log("nodeName:" + text.nodeName);

console.log(text.data); //data同样是其内容,这个属性下同样可以增删改。

}

function showDocument(){

console.log("nodeType:" + document.nodeType); //9

console.log("nodeName:" + document.nodeName);

console.log(document);

}

function showAttr(){

var btn = document.getElementById("btnShowAttr");//演示按钮，有很多属性

console.log(btn);

var attrs = btn.attributes;

console.log(attrs);

for (var i = 0; i < attrs.length; i++) {

console.log(attrs[i].nodeType);//attribute 的nodeType=2

console.log(attrs[i].nodeName);

console.log(attrs[i].nodeValue);

console.log(attrs[i].name);

console.log(attrs[i].value);

}

function demo(){

var btnDemo1 = document.getElementById("btnDemo1");

btnDemo1.onclick = showElement; //按钮1取节点nodetype值

var btnDemo2 = document.getElementById("btnDemo2");

btnDemo2.onclick = showText;

var btnDemo3 = document.getElementById("btnDemo3");

btnDemo3.onclick = showDocument;

var btnShowAttr = document.getElementById("btnShowAttr");

btnShowAttr.onclick = showAttr;

}

window.onload = demo;

</script>

</body>

</html>

銨靜菂等芐紶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中的NodeType、NodeValue、NodeName实例测试

转载自品略图书馆：http://www.pinlue.com/article/2020/03/1214/1810021066127.htmljavascript中的firstChild是怎么执行的？<ul id="contain"> <li><a href="http:/www.iwcn.net">Microsotf</...
复制链接

扫一扫