js 节点相关内容介绍 创建、删除、复制节点

目录

• 1、节点介绍
• 2、案例-下拉菜单
• 3、兄弟节点
• 4、创建节点
• 5、案例-简单发布留言
• 6、删除节点
• 7、复制节点（克隆节点）

1、节点介绍

1.为什么要学习节点
可以利用父子兄节点关系获取元素
逻辑性强,但是兼容性差.
2.节点概述
(1)网页中所有内容都是节点,用node表示.
(2)所有的节点都可以被修改,也可以创建或删除.
(3)节点至少拥有三个属性值: nodeType(节点类型) nodeName(节点名称) 和nodeValue(节点值)
(4)文本节点分类
i: 元素节点 nodeType为 1
ii: 属性节点 nodeType为 2
iii: 文本节点 nodeType为 3 (文本节点包含文字、空格、换行等)
(5)实际开发中，节点操作主要是操作元素节点。
3、节点层级
DOM树把节点划分为不同的层级关系，常见的是父子兄层级关系。
（1）父级关系
node.parentNode
得到的是离元素最近的父级节点，如果找不到父节点返回为空。
（1）子级关系
-parentNode.childNodes（标准）
得到所有节点，包含属性节点、文本节点、元素节点。
如果想要获取里面的元素节点，要经过循环处理，所以不提倡使用childNodes。
-parentNode.children（非标准）
实际开发中常用的。
-.firstChild
获取第一个元素节点，包含所有节点类型。
-lastChild
获取最后一个元素节点，包含所有节点类型。
-firstElementChild
返回第一个子元素节点；有兼容问题ie9以上可用
-lastElementChild
返回最后一个子元素节点；有兼容问题ie9以上可用。
-实际开发常用方法：
.children[0] ;获得第一个子元素。
.children[元素名.children.length] ;获得最后一个子元素。

2、案例-下拉菜单

<style>
			a {
				text-decoration: none;
				color: #999;
			}

			li {
				list-style: none;
			}

			.nav {
				width: 300px;
				height: 250px;
				margin: 20px auto;
			}

			.nav ul {
				padding-