• JavaScript笔记9-节点操作

    目录

    1.为什么学习节点

    2.节点是什么

    3.节点的基本属性

    4.节点层级

    4.1 父级节点

    4.2 子节点

    4.3 兄弟节点

    5. 创建节点和添加节点

    6. 删除节点

    7. 复制节点(克隆节点)

    1.为什么学习节点

    获取元素通常使用两种方式：

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

    • document.getElementById()
    • document.getElementsByTagName()
    • document.querySelector 等
    • 逻辑性不强、繁琐

    （2）利用节点层级关系获取元素

    • 利用父子兄节点关系获取元素
    • 逻辑性强， 但是兼容性稍差

    2.节点是什么

    网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。 

    3.节点的基本属性

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

    • 元素节点 nodeType 为 1
    • 属性节点 nodeType 为 2
    • 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

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

    4.节点层级

    4.1 父级节点

    node.parentNode
    • parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
    • 如果指定的节点没有父节点则返回 null

    4.2 子节点

    1. parentNode.childNodes （标准） 

     parentNode.childNodes 返回值里面包含了所有的子节点，包括元素节点，文本节点等。

    2. parentNode.children

    parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回，且各个浏览器支持兼容。

    返回首尾子节点：

    方法1：

    1. parentNode.firstChild

    firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

    2. parentNode.lastChild

    lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

    方法2：

    3. parentNode.firstElementChild

    firstElementChild 返回第一个子元素节点，找不到则返回null。有兼容性问题，IE9 以上才支持。

    4. parentNode.lastElementChild

    lastElementChild 返回最后一个子元素节点，找不到则返回null。有兼容性问题，IE9 以上才支持。

    方法3：

    5. parentNode.chilren[0]
    6. parentNode.chilren[parentNode.chilren.length - 1]

    parentNode.chilren[0]返回第一个子元素节点。

    parentNode.chilren[parentNode.chilren.length - 1]返回最后一个子元素节点。

    方法3比以上两个方法好，因为可以不用返回空格换行这些无用节点，也可以浏览器兼容。

    4.3 兄弟节点

    方法1：

    1. node.nextSibling

    nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

    2. node.previousSibling

    previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

    方法2：

    3. node.nextElementSibling

    nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。有兼容性问题， IE9 以上才支持。

    4. node.previousElementSibling

    previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。有兼容性问题， IE9 以上才支持。

    方法3：自己封装一个兼容性的函数

    1. function getNextElementSibling(element) {
    2. 	var el = element;
    3. 	while (el = el.nextSibling) {
    4. 		if (el.nodeType === 1) {
    5. 			return el;
    6. 		}
    7. 	}
    8. 	return null;
    9. }

    例子1：父子兄弟节点

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div>我是divdiv>
    9. 		<span>我是spanspan>
    10. 		<ul>
    11. 			<li>我是li1li>
    12. 			<li>我是li2li>
    13. 			<li>我是li3li>
    14. 			<li>我是li4li>
    15. 		ul>
    16. 		<ol>
    17. 			<li>我是li1li>
    18. 			<li>我是li2li>
    19. 			<li>我是li3li>
    20. 			<li>我是li4li>
    21. 		ol>
    22. 		
    23. 		<div class="demo">
    24. 			<div class="box">
    25. 				<span class="text">一段话span>
    26. 			div>
    27. 		div>
    28. 		
    29. 		<script>
    30. 			// 1. 父节点 parentNode
    31. 			var text = document.querySelector('.text');
    32. 			// DOM 提供的方法（API）获取：var box = document.querySelector('.box');
    33. 			// 直接用父节点：得到的是离元素最近的父级节点，如果找不到父节点就返回为 null
    34. 			console.log(text.parentNode); //
    35. 			
    36. 			// 2. 子节点
    37. 			// 原本用DOM 提供的方法（API）获取
    38. 			var ul = document.querySelector('ul');
    39. 			var lis = ul.querySelectorAll('li');
    40. 			// 子节点方法1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
    41. 			console.log(ul.childNodes); //NodeList(9)
    42. 			console.log(ul.childNodes[0].nodeType); //3 文本节点为3
    43. 			console.log(ul.childNodes[1].nodeType); //1  元素节点为1
    44. 			// 子节点方法2. children 获取所有的子元素节点 也是我们实际开发常用的
    45. 			console.log(ul.children); //HTMLCollection(4)
    46. 			
    47. 			// 3. 首尾子节点
    48. 			var ol = document.querySelector('ol');
    49. 			// 方法1. firstChild 第一个子节点 不管是文本节点还是元素节点
    50. 			console.log(ol.firstChild); // #text
    51. 			console.log(ol.lastChild); // #text
    52. 			// 方法2. firstElementChild 返回第一个子元素节点 ie9才支持
    53. 			console.log(ol.firstElementChild); // 
    54. 我是li1
  • console.log(ol.lastElementChild); //
  • 我是li4
  • // 方法3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
  • console.log(ol.children[0]); //
  • 我是li1
  • console.log(ol.children[ol.children.length - 1]); //
  • 我是li4
  • // 4. 兄弟节点
  • var div = document.querySelector('div');
  • // 方法1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
  • console.log(div.nextSibling); // #text
  • console.log(div.previousSibling); // #text
  • // 方法2. nextElementSibling 得到下一个兄弟元素节点
  • console.log(div.nextElementSibling); //我是span
  • console.log(div.previousElementSibling); //null
  • script>
  • body>
  • html>

    • 例子2：新浪下拉菜单

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         li {
    16.             list-style-type: none;
    17.         }
    18.         
    19.         a {
    20.             text-decoration: none;
    21.             font-size: 14px;
    22.         }
    23.         
    24.         .nav {
    25.             margin: 100px;
    26.         }
    27.         
    28.         .nav>li {
    29.             position: relative;
    30.             float: left;
    31.             width: 80px;
    32.             height: 41px;
    33.             text-align: center;
    34.         }
    35.         
    36.         .nav li a {
    37.             display: block;
    38.             width: 100%;
    39.             height: 100%;
    40.             line-height: 41px;
    41.             color: #333;
    42.         }
    43.         
    44.         .nav>li>a:hover {
    45.             background-color: #eee;
    46.         }
    47.         
    48.         .nav ul {
    49.             display: none;
    50.             position: absolute;
    51.             top: 41px;
    52.             left: 0;
    53.             width: 100%;
    54.             border-left: 1px solid #FECC5B;
    55.             border-right: 1px solid #FECC5B;
    56.         }
    57.         
    58.         .nav ul li {
    59.             border-bottom: 1px solid #FECC5B;
    60.         }
    61.         
    62.         .nav ul li a:hover {
    63.             background-color: #FFF5DA;
    64.         }
    65.     style>
    66. head>
    67.  
    68. <body>
    69.     <ul class="nav">
    70.         <li>
    71.             <a href="#">微博a>
    72.             <ul>
    73.                 <li>
    74.                     <a href="">私信a>
    75.                 li>
    76.                 <li>
    77.                     <a href="">评论a>
    78.                 li>
    79.                 <li>
    80.                     <a href="">@我a>
    81.                 li>
    82.             ul>
    83.         li>
    84.         <li>
    85.             <a href="#">微博a>
    86.             <ul>
    87.                 <li>
    88.                     <a href="">私信a>
    89.                 li>
    90.                 <li>
    91.                     <a href="">评论a>
    92.                 li>
    93.                 <li>
    94.                     <a href="">@我a>
    95.                 li>
    96.             ul>
    97.         li>
    98.         <li>
    99.             <a href="#">微博a>
    100.             <ul>
    101.                 <li>
    102.                     <a href="">私信a>
    103.                 li>
    104.                 <li>
    105.                     <a href="">评论a>
    106.                 li>
    107.                 <li>
    108.                     <a href="">@我a>
    109.                 li>
    110.             ul>
    111.         li>
    112.         <li>
    113.             <a href="#">微博a>
    114.             <ul>
    115.                 <li>
    116.                     <a href="">私信a>
    117.                 li>
    118.                 <li>
    119.                     <a href="">评论a>
    120.                 li>
    121.                 <li>
    122.                     <a href="">@我a>
    123.                 li>
    124.             ul>
    125.         li>
    126.     ul>
    127.     <script>
    128.         // 1. 获取元素
    129.         var nav = document.querySelector('.nav');
    130.         var lis = nav.children; // 得到4个小li
    131.         // 2.循环注册事件
    132.         for (var i = 0; i < lis.length; i++) {
    133.             lis[i].onmouseover = function() {
    134.                 this.children[1].style.display = 'block';
    135. 				//console.log(this.children[1]);这里的this.children[1]是li下面子元素，即 
        私信 评论 @我
    136.             }
    137.             lis[i].onmouseout = function() {
    138.                 this.children[1].style.display = 'none';
    139.             }
    140.         }
    141.     script>
    142. body>
    143. html>

    5. 创建节点和添加节点

    5.1 创建节点 

    document.createElement('tagName') 

    document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

    5.2 添加节点

    1. node.appendChild(child)

    node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。

    2. node.insertBefore(child, 指定元素)

    node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before伪元素。

    例子1：创建添加元素

    1. <body>
    2. 	<ul>
    3. 		<li>123li>
    4. 	ul>
    5. 	<script>
    6. 		// 1. 创建节点元素节点
    7. 		var li = document.createElement('li');
    8. 		// 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
    9. 		var ul = document.querySelector('ul');
    10. 		ul.appendChild(li);
    11. 		// 3. 添加节点 node.insertBefore(child, 指定元素);
    12. 		var lili = document.createElement('li');
    13. 		ul.insertBefore(lili, ul.children[0]);
    14. 		// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    15. 	script>
    16. body>

    例子2：发布留言案例

    ① 核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。
    ② 创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li
    ③ 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			* {
    8. 				margin: 0;
    9. 				padding: 0;
    10. 			}
    11. 			
    12. 			body {
    13. 				padding: 100px;
    14. 			}
    15. 			
    16. 			textarea {
    17. 				width: 200px;
    18. 				height: 100px;
    19. 				border: 1px solid pink;
    20. 				outline: none;
    21. 				resize: none;
    22. 			}
    23. 			
    24. 			ul {
    25. 				margin-top: 50px;
    26. 			}
    27. 			
    28. 			li {
    29. 				width: 300px;
    30. 				padding: 5px;
    31. 				background-color: rgb(208, 207, 207);
    32. 				color: red;
    33. 				font-size: 14px;
    34. 				margin: 15px 0;
    35. 			}
    36. 		style>
    37. 	head>
    38. 	<body>
    39. 		<textarea name="" id="">textarea>
    40. 		<button>发布button>
    41. 		<ul>
    42. 	
    43. 		ul>
    44. 		<script>
    45. 			// 1. 获取元素
    46. 			var btn = document.querySelector('button');
    47. 			var text = document.querySelector('textarea');
    48. 			var ul = document.querySelector('ul');
    49. 			// 2. 注册事件
    50. 			btn.onclick = function() {
    51. 				if (text.value == '') {
    52. 					alert('您没有输入内容');
    53. 					return false;
    54. 				} else {
    55. 					// (1) 创建元素
    56. 					var li = document.createElement('li');
    57. 					// 先有li 才能赋值
    58. 					li.innerHTML = text.value;
    59. 					// (2) 添加元素
    60. 					// ul.appendChild(li);//新发布在后
    61. 					ul.insertBefore(li, ul.children[0]);//新发布在前
    62. 				}
    63. 			}
    64. 		script>
    65. 	body>
    66. html>

     

    6. 删除节点

    node.removeChild(child)

    node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

    例子1：删除元素

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button>删除button>
    9. 		<ul>
    10. 			<li>老大li>
    11. 			<li>老二li>
    12. 			<li>老三li>
    13. 		ul>
    14. 		<script>
    15. 			// 1.获取元素
    16. 			var ul = document.querySelector('ul');
    17. 			var btn = document.querySelector('button');
    18. 			// 2. 删除元素  node.removeChild(child)
    19. 			// 3. 点击按钮依次删除里面的孩子
    20. 			btn.onclick = function() {
    21. 				if (ul.children.length == 0) { //如果列表没有元素，禁用按钮
    22. 					this.disabled = true;
    23. 				} else {
    24. 					ul.removeChild(ul.children[0]);
    25. 				}
    26. 			}
    27. 		script>
    28. 	body>
    29. html>

     

    例子2：删除留言板

    ① 当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接
    ② 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
    ③ 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:; 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			* {
    8. 				margin: 0;
    9. 				padding: 0;
    10. 			}
    11. 			
    12. 			body {
    13. 				padding: 100px;
    14. 			}
    15. 			
    16. 			textarea {
    17. 				width: 200px;
    18. 				height: 100px;
    19. 				border: 1px solid pink;
    20. 				outline: none;
    21. 				resize: none;
    22. 			}
    23. 			
    24. 			ul {
    25. 				margin-top: 50px; //删除链接靠右
    26. 			}
    27. 			
    28. 			li {
    29. 				width: 300px;
    30. 				padding: 5px;
    31. 				background-color: rgb(245, 245, 214);
    32. 				color: red;
    33. 				font-size: 14px;
    34. 				margin: 15px 0;
    35. 			}
    36. 			
    37. 			li a {
    38. 				float: right;
    39. 			}
    40. 		style>
    41. 	head>
    42. 	<body>
    43. 		<textarea name="" id="">textarea>
    44. 		<button>发布button>
    45. 		<ul>
    46. 		
    47. 		ul>
    48. 		<script>
    49. 			// 1. 获取元素
    50. 			var btn = document.querySelector('button');
    51. 			var text = document.querySelector('textarea');
    52. 			var ul = document.querySelector('ul');
    53. 			// 2. 注册事件
    54. 			btn.onclick = function() {
    55. 				if (text.value == '') {
    56. 					alert('您没有输入内容');
    57. 					return false;
    58. 				} else {
    59. 					// (1) 创建元素
    60. 					var li = document.createElement('li');
    61. 					// 先有li 才能赋值
    62. 					// 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
    63. 					li.innerHTML = text.value + "删除";
    64. 					// (2) 添加元素  ul.appendChild(li);
    65. 					ul.insertBefore(li, ul.children[0]);
    66. 					// (3) 删除元素 删除的是当前链接的li  它的父亲
    67. 					var as = document.querySelectorAll('a');
    68. 					for (var i = 0; i < as.length; i++) {
    69. 						as[i].onclick = function() {
    70. 							ul.removeChild(this.parentNode);
    71. 						}
    72. 					}
    73. 				}
    74. 			}
    75. 		script>
    76. 	body>
    77. html>

    7. 复制节点(克隆节点)

    node.cloneNode()

    node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点。

    注意：
    1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
    2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

    1. <body>
    2. 	<ul>
    3. 		<li>1111li>
    4. 		<li>2li>
    5. 		<li>3li>
    6. 	ul>
    7. 	<script>
    8. 		var ul = document.querySelector('ul');
    9. 		// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
    10. 		// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
    11. 		var lili = ul.children[0].cloneNode(true);
    12. 		ul.appendChild(lili);
    13. 	script>
    14. body>

    例子1： 浅拷贝和深度拷贝

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<ul>
    9. 			<li>oneli>
    10. 			<li>twoli>
    11. 			<li>threeli>
    12. 		ul>
    13. 		<script>
    14. 			var ul = document.querySelector('ul');
    15. 			// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
    16. 			var li_four = ul.children[0].cloneNode();
    17. 			ul.appendChild(li_four);
    18. 			// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
    19. 			var li_five = ul.children[1].cloneNode(true);
    20. 			ul.appendChild(li_five);
    21. 		script>
    22. 	body>
    23. html>

    例子2： 动态生成表格

    创建学生数据-创建行-创建单元格-单元格填充数据-创建删除单元格-添加删除操作。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			table {
    8. 				width: 500px;
    9. 				margin: 100px auto;
    10. 				border-collapse: collapse;
    11. 				text-align: center;
    12. 			}
    13. 			
    14. 			td,
    15. 			th {
    16. 				border: 1px solid #333;
    17. 			}
    18. 			
    19. 			thead tr {
    20. 				height: 40px;
    21. 				background-color: #ccc;
    22. 			}
    23. 		style>
    24. 	head>
    25. 	<body>
    26. 		<table cellspacing="0">
    27. 			<thead>
    28. 				<tr>
    29. 					<th>姓名th>
    30. 					<th>科目th>
    31. 					<th>成绩th>
    32. 					<th>操作th>
    33. 				tr>
    34. 			thead>
    35. 			<tbody>
    36. 		
    37. 			tbody>
    38. 		table>
    39. 		<script>
    40. 			// 1.先去准备好学生的数据
    41. 			var datas = [{
    42. 				name: '张三',
    43. 				subject: 'JavaScript',
    44. 				score: 100
    45. 			}, {
    46. 				name: '李四',
    47. 				subject: 'JavaScript',
    48. 				score: 68
    49. 			}, {
    50. 				name: '王五',
    51. 				subject: 'JavaScript',
    52. 				score: 99
    53. 			}, {
    54. 				name: '赵六',
    55. 				subject: 'JavaScript',
    56. 				score: 88
    57. 			}, {
    58. 				name: '孙七',
    59. 				subject: 'JavaScript',
    60. 				score: 79
    61. 			}];
    62. 			
    63. 			// 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
    64. 			var tbody = document.querySelector('tbody');
    65. 			for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
    66. 				// 1. 创建 tr行
    67. 				var tr = document.createElement('tr');
    68. 				tbody.appendChild(tr);
    69. 				
    70. 				// 2. 行里面创建单元格(跟数据有关系的3个单元格) 
    71. 				//    td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
    72.  
    73. 				for (var k in datas[i]) { // 里面的for循环管列 td
    74. 					// (1)创建单元格 
    75. 					var td = document.createElement('td');
    76. 					// for(var k in obj) {
    77. 					//     k 得到的是属性名
    78. 					//     obj[k] 得到是属性值
    79. 					// }
    80. 					
    81. 					// (2)填充单元格，把对象里面的属性值 datas[i][k] 给 td 
    82. 					td.innerHTML = datas[i][k];
    83. 					tr.appendChild(td);
    84. 				}
    85. 				
    86. 				// 3. 创建有删除2个字的单元格 
    87. 				var td = document.createElement('td');
    88. 				td.innerHTML = '删除 ';
    89. 				tr.appendChild(td);
    90. 			}
    91. 			
    92. 			// 4. 删除操作 开始 
    93. 			var as = document.querySelectorAll('a');
    94. 			for (var i = 0; i < as.length; i++) {
    95. 				as[i].onclick = function() {
    96. 					// 点击a 删除 当前a 所在的行(链接的父级的父级)  node.removeChild(child)  
    97. 					tbody.removeChild(this.parentNode.parentNode)
    98. 				}
    99. 			}
    100. 		script>
    101. 	body>
    102. html>

  • 相关阅读:
    HTML---基础入门知识详解
    Kafka高频面试题22连问
    git仓库推送错误
    SPARK数据分析
    23. 请你谈谈关于IO同步、异步、阻塞、非阻塞的区别
    uCOS-III基础入门函数
    Android gradle编译常见的使用方式
    连锁超市如何部署远程监控系统
    工业交换机的单模多模是什么意思？
    Scrapy08：scrapy-deltafetch，让爬虫有了记忆
  • 原文地址：https://blog.csdn.net/qq_45709187/article/details/126913848