childNodes 获取当前元素节点的所有子节点 ,包含两种节点类型
1、元素节点
2、文本节点
Dom 节点类型
元素节点 文本节点 属性节点
【注】 节点可以元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性
分别为:
nodeName节点名称、nodeType节点类型、和nodevalue节点的值
nodename:节点名称,只读
元素节点的nodeName与标签名相同
属性节点的nodeName是属性的名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
nodeValue属性:节点的值
元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本自身
属性节点的nodevalue是属性的值
nodeType 属性:节点的类型,是只读的。
元素类型节点类型:
元素 1
属性 2
文本 3
注释 8
文档 9
firstChild 快速找到当前元素的第一个节点
lastChild 快速找到当前元素的最后一个节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dom_元素节点属性</title>
<!-- childNodes 获取当前元素节点的所有子节点 ,包含两种节点类型
1、元素节点
2、文本节点
-->
<script type="text/javascript">
window.onload=function(){
var ox=document.getElementById("div1");
alert(ox.childNodes);输出“[object NodeList]” 装有当前元素节点的所有子节点
alert(ox.childNodes.length);输出"4"
/* Dom 节点类型
元素节点 文本节点 属性节点
【注】 节点可以元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性
分别为:
nodeName、nodeType、和nodevalue
*/
alert(ox.childNodes[0].nodeName);EM
alert(ox.childNodes[0].nodeType);输出1
alert(ox.childNodes[0].nodeValue);null
alert(ox.childNodes[1].nodeName);#text
alert(ox.childNodes[1].nodeType);
alert(ox.childNodes[1].nodeValue);
/*
firstChild 快速找到当前元素的第一个节点
lastChild 快速找到当前元素的最后一个节点
*/
alert(ox.firstChild.nodeName);EM
alert(ox.lastChild.nodeName);STRONG
}
</script>
</head>
<body>
<div id="div1"><em>斜体</em>div文本内容<strong>粗体<></div>
</body>
<ml>