文章导航

JavaScript nodeType节点类型

2018-9-25 01:00| 作者: admin| 查看: 1289| 评论: 0|来自: 蚂蚁部落

nodeType属性可以返回一个数字,用来标识当前节点的类型。

此属性浏览器兼容性良好,当前所有主流浏览器都支持。

一.节点类型介绍:

JavaScript中有多种节点类型,比如<div>是元素节点,<div>蚂蚁部落</div>,div元素中的字符串是文本节点,上述两种最为常见且应用最为频繁的节点,除此之外还有多种可能使用频繁但不引人注目的节点。

JavaScript常用节点类型罗列如下:

(1).元素节点。

(2).属性节点。

(3).文本节点。

(4).document文本节点。

(5).注释节点。

(6).DocumentType节点。

(7).documentFragment节点。

二.nodeType返回值与节点对应关系如下:

(1).元素节点:1。

(2).属性节点:2。

(3).文本节点:3。

(4).document文档节点:9。

(5).注释节点:8。

(6).documentType节点:10。

(7).documentFragment节点:11。

三.代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){ 
  let oshow=document.getElementById("show");
  let obox=document.getElementById("box");
  let lis=obox.getElementsByTagName("li");
  oshow.innerHTML=lis[1].nodeType;
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/25/010124jruo5hkh0shsjeur.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码首先获取li元素对象集合,然后获取第二个(索引为1)li元素nodeType属性值。

返回值为1,说明li是元素节点,这很明显。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  font-size:12px;
  height:15px;
}
</style>
<script> 
window.onload=function(){ 
  let oshow=document.getElementById("show");
  let obox=document.getElementById("box");
  let childNodes=obox.childNodes;
  oshow.innerHTML=childNodes[0].nodeType;
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/25/010151i3cq4dhnozzjho43.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

obox.childNodes返回obox元素下所有子节点集合。

那么childNodes[0].nodeType获取的就是第一个子节点类型。

很多朋友可能会认为返回的是第一个li元素节点类型,应该是1才对。

但是返回值是3,表明是一个文本节点,因为空格换行会被childNodes解读为一个文本节点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  font-size:12px;
  height:15px;
}
</style>
<script> 
window.onload=function(){ 
  let oshow=document.getElementById("show");
  let obox=document.getElementById("box");
  let childNodes=obox.childNodes;
  oshow.innerHTML=childNodes[1].nodeType;
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <!--蚂蚁部落--> 
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/25/010219utyvt4zzw2eizi4c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

childNodes[1]获取的是HTML注释节点,所以返回值是8。

再强调一遍,childNodes[0]获取到是前面的空格和换行,会被解读为文本节点。

关于其他节点类型由于应用不多,所以不再举例演示

关于documentFragment可以参阅JavaScript createDocumentFragment()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部