DOM初探(5)——遍历节点/元素节点
上面这些都是选择元素方法类的操作,还有非方法类的操作:
DOM基本操作:
遍历节点树:
parentNode->父节点(最顶端的parentNode为#document);
childNodes->子节点们
firstChild->第一个子节点
lastChild->最后一个子节点
nextChild->后一个子节点
previousSibling->前一个兄弟节点
基于元素节点树的遍历:
parentElement->返回当前元素的父元素节点(IE不兼容)
children->只返回当前元素的元素子节点
node.childrenElementCount == node.children.length当前元素节点的子元素节点个数(IE不兼容)
firstElementChild->返回的是第一个元素节点(IE不兼容)
lastElementChild->返回的是最后一个元素节点(IE不兼容)
nextElementSibling/previousElementSibling->返回后一个/前一个兄弟节点(IE不兼容)
比如现在有一个树形结构:
<div>
<span></span>
<div>
<p></p>
</div>
</div>
有的是父亲,有个互为左右兄弟……
<div>
<strong></strong>
<span></span>
<em></em>
</div>
<script type="text/javascript">
var strong = document.getElementsByTagName("strong")[0];
</script>
strong的父亲是div,div的父亲是body,body的父亲是html,html的父亲是document,document的父亲是浏览器,但是浏览器说了,我不参与你这个,所以document就没有父亲了,document就是顶层了。
<div>
<strong>
<span>1</span>
</strong>
<span></span>
<em></em>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
现在,你看div有几个儿子,三个吧?
是7,怎么回事?
遍历节点树,我又没说只有html节点算节点!!
childNodes选的是div下面的所有子节点,
第8行到第9行选中的区域——第一个文本节点
第9行到第11行选中的区域——第二个元素节点
第11行到第12行选中的区域——第三个文本节点
第12行选中的区域——第四个元素节点
第12行到底13行选中的区域——第五个文本类节点
第13行选中的区域——第六个元素节点
第13行到第14行选中的区域——第七个文本类节点
节点的类型有很多,比如:元素节点,属性节点,文本节点,注释节点,document,DocumentFragment……
<body>
<div>
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
</body>
注释能看到,他只不过是不运行而已!!
<body>
<div>123
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
</body>
现在有多少个子节点??
还是7个!!
div的第一个子节点与最后一个子节点,都时文本节点。
注释能看到,他只不过是不运行而已!!
<body>
<div>123
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
</body>
现在有多少个子节点??
还是7个!!
div的第一个子节点与最后一个子节点,都时文本节点。
<body>
<div>123
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
<script type="text/javascript">
var strong = document.getElementsByTagName("div")[0];
</script>
</body>
遍历元素节点树:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>123
<!-- this is comment -->
<strong></strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script type="text/javascript">
var strong = document.getElementsByTagName("div")[0];
</script>
</body>
</html>