DOM - 节点操作

1. 我们获取元素通常使用两种方式：

1.利用DOM提供的方法获取元素

            document.getElementById()
            document.getElementsByTagName()
            document.querySelector()

            这类逻辑性不强，繁琐，只要用到都要获取

2.利用节点的层次关系来获取

             利用父子的节点关系获取元素

             逻辑性强但兼容性差

这两种方法都是获取元素节点，我们后面都会使用，但节点操作更简单

2.节点的概述

网页中所有的内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用 node 来表示

HTML DOM 树中所有的节点均可通过  java Script 进行访问，所有HTML元素（节点）均可被修改，也可以创建和删除。

 一般来说，节点至少拥有nodeType（节点类型） nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点  nodeType  为1

属性节点  nodeType  为2

文本节点  nodeType  为3    （文本节点包含文字，空格，换行等）

我们在实际开发中，元素节点是节点操作的主要系节点

3.节点操作

利用DOM树可以把节点划分为不同的层级关系，常见的是父子层级关系

3.1.父节点

node.parentNode      获取距离最近的父级节点   如果找不到父节点就返回为  null

	<div class="box">
			<span class="tp"></span>
		</div>
		<script type="text/javascript">
			// 父级节点    parentNode
			var tp = document.querySelector('.tp');
			// 获取到 tp 的父级节点   得到的是离元素的父级节点 如果找不到父节点就返回为  null
			console.log(tp.parentNode);
		</script>

获取了距离他最近的父级节点 box  

3.2子节点

1.parnetNode.childNodes<