JS-DOM ~ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType
分类:
IT文章
•
2022-05-06 12:42:52
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .nodeSmall {
8 50px;
9 height: 50px;
10 background: url("../bgs.png") no-repeat -159px -51px;
11 position: fixed;
12 right: 10px;
13 top: 40%;
14 }
15
16 .erweima {
17 position: absolute;
18 top: 0;
19 left: -150px;
20 }
21
22 .nodeSmall a {
23 display: block;
24 50px;
25 height: 50px;
26 }
27
28 .hide {
29 display: none;
30 }
31
32 .show {
33 display: block;
34 }
35
36 </style>
37 <script>
38 window.onload = function () {
39 // 需求:鼠标放到a链接上,显示二维码(添加show类名,去掉hide类名)
40 // 鼠标移开则隐藏二维码(添加hide类名,去掉show类名)
41 // 1:获取事件源
42 var a = document.getElementsByTagName("a")[0];
43 var div = document.getElementById("er");
44 // 2:绑定事件
45 a.onmouseover = fn1;
46 a.onmouseout = fn2;
47 function fn1() {
48 div.className = "erweima show";
49
50 }
51
52 function fn2() {
53 div.className = "erweima hide";
54 }
55
56 }
57
58 </script>
59 </head>
60 <body>
61 <div class="nodeSmall" >
62 <a href="#"></a>
63 <div class="erweima hide" >
64 <img src="../456.png" alt="">
65 </div>
66 </div>
67
68
69 </body>
70 </html>
隐藏二维码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
账号:<input type="text" value="欢迎光临...">
<button>禁用</button>
<button>解禁</button>
<br><br>
密码:<input type="password" value="aaaaa">
<script>
// 1:获取事件源
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
// 2:绑定事件
btn1.onclick = function () {
inp.disabled = "no";
};
btn2.onclick = function () {
inp.disabled = false;
}
</script>
</body>
</html>
锁定输入框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 input {
9 400px;
10 height: 46px;
11 padding-left: 5px;
12 color: #ccc;
13 font: 17px/46px "微软雅黑";
14 }
15
16 label {
17 position: absolute;
18 top: 94px;
19 left: 56px;
20 font-size: 12px;
21 color: #ccc;
22 cursor: text;
23 }
24
25 .hide {
26 display: none;
27 }
28
29 .show {
30 display: block;
31 }
32
33
34 </style>
35 </head>
36 <body>
37
38 京东:<input type="text" id="inp1" value="我是京东"/><br><br>
39 淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text"><br><br>
40 placeholder: <input type="text" placeholder=" 我是placeholder">
41
42 <script>
43 // 1:获取事件源和相关元素
44 var inp1 = document.getElementById("inp1");
45 // 2:绑定事件
46 inp1.onfocus = function () {
47 if (this.value === "我是京东") {
48 inp1.value = "";
49 }
50 };
51 inp1.onblur = function () {
52 if (this.value === "") {
53 inp1.value = "我是京东";
54 }
55 };
56 // 设置淘宝的框
57 var inp2 = document.getElementById("inp2");
58 var lab = document.getElementsByTagName("label")[0];
59 // 绑定事件,输入事件文字的输入和删除都会触发这个事件
60 inp2.oninput = function () {
61 if (this.value === "") {
62 lab.className = "show";
63 } else {
64 lab.className = "hide";
65 }
66 }
67
68
69 </script>
70
71
72 </body>
73 </html>
文本输入框焦点
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <input type="text"/><br><br>
9 <input type="text"/><br><br>
10 <input type="text"/><br><br>
11 <input type="text"/><br><br>
12 <input type="text"/><br><br>
13 <input type="text"/><br><br>
14
15 <button>赋值</button><br><br>
16 <button>取值</button><br><br>
17
18 <script>
19 //for循环赋值
20 //老三步
21 var inpArr = document.getElementsByTagName("input");
22 var btnArr = document.getElementsByTagName("button");
23
24 //赋值
25 btnArr[0].onclick = function () {
26 //循环为每一个input赋值
27 for(var i=0;i<inpArr.length;i++){
28 inpArr[i].value = i;
29 }
30 }
31
32 //获取值
33 btnArr[1].onclick = function () {
34 //循环获取nput的值赋值为一个数组
35 var newArr = [];
36 for(var i=0;i<inpArr.length;i++){
37 newArr.push(inpArr[i].value);
38 }
39 console.log(newArr.join(" "));
40 }
41
42
43 </script>
44 </body>
45 </html>
for循环为文本框赋值和取值
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .wrong {
8 border: 2px solid red;
9 }
10 .right {
11 border: 2px solid #91B81D;
12 }
13 </style>
14 </head>
15 <body>
16
17 账号:<input type="text" onblur="fn(this)"/><br><br>
18 密码:<input type="password" onblur="fn(this)"/>
19
20 <script>
21 //需求:失去焦点的时候判断input按钮中的值,如果账号或密码在6-12个字符之间通过,否则报错。
22 //步骤:
23 //1.获取事件源
24 //2.绑定事件
25 //3.书写事件驱动程序
26
27
28 //3.书写事件驱动程序
29 function fn(aaa){
30 //html中的input标签行内调用function的时候,是先通过window调用的function,所以打印this等于打印window
31 // console.log(this)
32 //只有传递的this才指的是标签本身。
33 // console.log(aaa)
34 // console.log(this.value)
35 if(aaa.value.length < 6 || aaa.value.length>12){
36 aaa.className = "wrong";
37 }else{
38 aaa.className = "right";
39 }
40 }
41 </script>
42 </body>
43 </html>
输入不满足条件则变色
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11
12 .wrap {
13 300px;
14 margin: 100px auto 0;
15 }
16
17 table {
18 border-collapse: collapse;
19 border-spacing: 0;
20 border: 1px solid #c0c0c0;
21 300px;
22 }
23
24 th,
25 td {
26 border: 1px solid #d0d0d0;
27 color: #404060;
28 padding: 10px;
29 }
30
31 th {
32 background-color: #09c;
33 font: bold 16px "微软雅黑";
34 color: #fff;
35 }
36
37 td {
38 font: 14px "微软雅黑";
39 }
40
41 tbody tr {
42 background-color: #f0f0f0;
43 }
44
45 tbody tr:hover {
46 cursor: pointer;
47 background-color: #fafafa;
48 }
49 </style>
50
51 <script>
52
53 window.onload = function () {
54 //需求1:点击上面的的input,下面全选或者反选。
55 //思路:获取了上面的input按钮,只需要判断,checked属性是true还是false,如果是true,下面的全部变成true;false同理。
56 //老三步
57 var topInp = document.getElementById("theadInp");
58 var tbody = document.getElementById("tbody");
59 var botInpArr = tbody.getElementsByTagName("input");
60
61 //绑定事件
62 topInp.onclick = function () {
63 //版本1
64 // for(var i=0;i<botInpArr.length;i++){
65 // if(topInp.checked === true){
66 // botInpArr[i].checked = true;
67 // }else{
68 // botInpArr[i].checked = false;
69 // }
70 // }
71 //费劲版
72 // if(topInp.checked){
73 // for(var i=0;i<botInpArr.length;i++){
74 // botInpArr[i].checked = true;
75 // }
76 // }else{
77 // for(var i=0;i<botInpArr.length;i++){
78 // botInpArr[i].checked = false;
79 // }
80 // }
81 //优化版(被点击的input按钮的checked属性值,应该直接作为下面的所有的input按钮的checked属性值)
82 for(var i=0;i<botInpArr.length;i++){
83 botInpArr[i].checked = this.checked;
84 }
85 }
86
87 //需求2:点击下面的的input,如果下面的全部选定了,上面的全选,否则相反。
88 //思路:为下面的每一个input绑定事件,每点击一次都判断所有的按钮
89 // checked属性值是否全部都是true,如果有一个是false,
90 // 那么上面的input的checked属性也是false;都是true,topInp的checked就是true;
91
92 //老三步
93 for(var i=0;i<botInpArr.length;i++){
94 botInpArr[i].onclick = function () {
95 //开闭原则
96 var bool = true;
97 //检测每一个input的checked属性值。
98 for(var j=0;j<botInpArr.length;j++){
99 if(botInpArr[j].checked === false){
100 bool = false;
101 }
102 }
103 topInp.checked = bool;
104 }
105 }
106 }
107
108 </script>
109
110 </head>
111 <body>
112 <div class="wrap">
113 <table>
114 <thead>
115 <tr>
116 <th>
117 <input type="checkbox" />
118 </th>
119 <th>菜名</th>
120 <th>饭店</th>
121 </tr>
122 </thead>
123 <tbody >
124 <tr>
125 <td>
126 <input type="checkbox" />
127 </td>
128 <td>地三鲜</td>
129 <td>田老师</td>
130 </tr>
131 <tr>
132 <td>
133 <input type="checkbox" />
134 </td>
135 <td>西红柿鸡蛋</td>
136 <td>田老师</td>
137 </tr>
138 <tr>
139 <td>
140 <input type="checkbox" />
141 </td>
142 <td>醋溜土豆丝</td>
143 <td>田老师</td>
144 </tr>
145 <tr>
146 <td>
147 <input type="checkbox" />
148 </td>
149 <td>萝卜干炒黄豆儿</td>
150 <td>田老师</td>
151 </tr>
152 </tbody>
153 </table>
154 </div>
155
156 </body>
157 </html>
点击全选和反选
属性的方法操作
<script>
//两种方式不能交换使用,赋值和获取值必须使用用一种方法。
var div = document.getElementById("box");
//元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上。
div.aaaa = "1111";
console.log(div.aaaa);
//get/set/removeAttribut: 绑定的属性值会出现在标签上。
div.setAttribute("bbbb","2222");
console.log(div.getAttribute("aaaa"));
console.log(div.bbbb);
</script>
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 button {
8 margin: 10px;
9 100px;
10 height: 40px;
11 cursor: pointer;
12 }
13 .current {
14 background-color: yellow;
15 }
16 </style>
17 </head>
18 <body>
19 <button>按钮1</button>
20 <button>按钮2</button>
21 <button>按钮3</button>
22 <button>按钮4</button>
23 <button>按钮5</button>
24
25 <script>
26 //需求:鼠标放到哪个button上,改button变成黄色背景(添加类)
27 //步骤:
28 //1.获取事件源
29 //2.绑定事件
30 //3.书写事件驱动程序
31
32 //1.获取事件源
33 var btnArr = document.getElementsByTagName("button");
34 //2.绑定事件
35 for(var i=0;i<btnArr.length;i++){
36 btnArr[i].onmouseover = function () {
37 //排他思想(干掉所有人,剩下我一个)
38 //排他思想是和for循环连用
39 for(var j=0;j<btnArr.length;j++){
40 btnArr[j].className = "";
41 }
42 this.className = "current";
43 }
44 }
45 //3.书写事件驱动程序
46
47
48 </script>
49
50 </body>
51 </html>
发现鼠标变色
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11 .box {
12 500px;
13 height: 400px;
14 border: 1px solid #ccc;
15 margin: 100px auto;
16 overflow: hidden;
17 }
18 ul {
19 600px;
20 height: 40px;
21 margin-left: -1px;
22 list-style: none;
23 }
24 li {
25 float: left;
26 101px;
27 height: 40px;
28 text-align: center;
29 font: 600 18px/40px "simsun";
30 background-color: pink;
31 cursor: pointer;
32 }
33 span {
34 display: none;
35 500px;
36 height: 360px;
37 background-color: yellow;
38 text-align: center;
39 font: 700 150px/360px "simsun";
40 }
41 .show {
42 display: block;
43 }
44 .current {
45 background-color: yellow;
46 }
47 </style>
48
49 <script>
50 window.onload = function () {
51 //需求:鼠标放到上面的li上,li本身变色(添加类),对应的span也显示出来(添加类);
52 //思路:1.点亮盒子。 2.利用索引值显示盒子。
53 //步骤:
54 //1.获取事件源和相关元素
55 //2.绑定事件
56 //3.书写事件驱动程序(排他思想)
57
58
59 //1.获取事件源和相关元素
60 var boxArr = document.getElementsByClassName("box");
61 //函数调用
62 for(var i=0;i<boxArr.length;i++){
63 fn(boxArr[i]);
64 }
65
66 //函数封装
67 function fn(ele){
68 var liArr = ele.getElementsByTagName("li");
69 var spanArr = ele.getElementsByTagName("span");
70 //2.绑定事件(循环绑定)
71 for(var i=0;i<liArr.length;i++){
72 //绑定索引值(自定义属性)
73 liArr[i].setAttribute("index",i);
74 liArr[i].onmouseover = function () {
75 //3.书写事件驱动程序(排他思想)
76 //1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
77 for(var j=0;j<liArr.length;j++){
78 liArr[j].removeAttribute("class");
79 spanArr[j].removeAttribute("class");
80 }
81 this.setAttribute("class","current");
82 spanArr[this.getAttribute("index")].setAttribute("class","show");
83 }
84 }
85 }
86 }
87 </script>
88 </head>
89 <body>
90
91 <div class="box">
92 <ul>
93 <li class="current">鞋子</li>
94 <li>袜子</li>
95 <li>帽子</li>
96 <li>裤子</li>
97 <li>裙子</li>
98 </ul>
99 <span class="show">鞋子</span>
100 <span>袜子</span>
101 <span>帽子</span>
102 <span>裤子</span>
103 <span>裙子</span>
104 </div>
105
106
107
108 <div class="box">
109 <ul>
110 <li class="current">鞋子</li>
111 <li>袜子</li>
112 <li>帽子</li>
113 <li>裤子</li>
114 <li>裙子</li>
115 </ul>
116 <span class="show">鞋子</span>
117 <span>袜子</span>
118 <span>帽子</span>
119 <span>裤子</span>
120 <span>裙子</span>
121 </div>
122
123
124
125 <div class="box">
126 <ul>
127 <li class="current">鞋子</li>
128 <li>袜子</li>
129 <li>帽子</li>
130 <li>裤子</li>
131 <li>裙子</li>
132 </ul>
133 <span class="show">鞋子</span>
134 <span>袜子</span>
135 <span>帽子</span>
136 <span>裤子</span>
137 <span>裙子</span>
138 </div>
139
140 </body>
141 </html>
tab栏切换版本1
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11 .box {
12 500px;
13 height: 400px;
14 border: 1px solid #ccc;
15 margin: 100px auto;
16 overflow: hidden;
17 }
18 ul {
19 600px;
20 height: 40px;
21 margin-left: -1px;
22 list-style: none;
23 }
24 li {
25 float: left;
26 101px;
27 height: 40px;
28 text-align: center;
29 font: 600 18px/40px "simsun";
30 background-color: pink;
31 cursor: pointer;
32 }
33 span {
34 display: none;
35 500px;
36 height: 360px;
37 background-color: yellow;
38 text-align: center;
39 font: 700 150px/360px "simsun";
40 }
41 .show {
42 display: block;
43 }
44 .current {
45 background-color: yellow;
46 }
47 </style>
48
49 <script>
50 window.onload = function () {
51 //需求:鼠标放到上面的li上,li本身变色(添加类),对应的span也显示出来(添加类);
52 //思路:1.点亮盒子。 2.利用索引值显示盒子。
53 //步骤:
54 //1.获取事件源和相关元素
55 //2.绑定事件
56 //3.书写事件驱动程序(排他思想)
57
58
59 //1.获取事件源和相关元素
60 var liArr = document.getElementsByTagName("li");
61 var spanArr = document.getElementsByTagName("span");
62 //2.绑定事件(循环绑定)
63 for(var i=0;i<liArr.length;i++){
64 //绑定索引值
65 liArr[i].index = i;
66 liArr[i].onmouseover = function () {
67 //3.书写事件驱动程序(排他思想)
68 //1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
69 for(var j=0;j<liArr.length;j++){
70 liArr[j].className = "";
71 spanArr[j].className = "";
72 }
73 this.className = "current";
74 spanArr[this.index].className = "show";
75 }
76 }
77 }
78 </script>
79 </head>
80 <body>
81
82 <div class="box">
83 <ul>
84 <li class="current">鞋子</li>
85 <li>袜子</li>
86 <li>帽子</li>
87 <li>裤子</li>
88 <li>裙子</li>
89 </ul>
90 <span class="show">鞋子</span>
91 <span>袜子</span>
92 <span>帽子</span>
93 <span>裤子</span>
94 <span>裙子</span>
95 </div>
96
97 </body>
98 </html>
tab栏切换js版
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11 .box {
12 500px;
13 height: 400px;
14 border: 1px solid #ccc;
15 margin: 100px auto;
16 overflow: hidden;
17 }
18 ul {
19 600px;
20 height: 40px;
21 margin-left: -1px;
22 list-style: none;
23 }
24 li {
25 float: left;
26 101px;
27 height: 40px;
28 text-align: center;
29 font: 600 18px/40px "simsun";
30 background-color: pink;
31 cursor: pointer;
32 }
33 span {
34 display: none;
35 500px;
36 height: 360px;
37 background-color: yellow;
38 text-align: center;
39 font: 700 150px/360px "simsun";
40 }
41 .show {
42 display: block;
43 }
44 .current {
45 background-color: yellow;
46 }
47 </style>
48
49 <script>
50 window.onload = function () {
51 var boxArr = document.getElementsByClassName("box");
52 for(var i=0;i<boxArr.length;i++){
53 fn(boxArr[i]);
54 }
55 function fn(ele){
56 var liArr = ele.getElementsByTagName("li");
57 var spanArr = ele.getElementsByTagName("span");
58 for(var i=0;i<liArr.length;i++){
59 liArr[i].index = i;
60 liArr[i].onmouseover = function () {
61 for(var j=0;j<liArr.length;j++){
62 liArr[j].className = "";
63 spanArr[j].className = "";
64 }
65 this.className = "current";
66 spanArr[this.index].className = "show";
67 }
68 }
69 }
70 }
71 </script>
72 </head>
73 <body>
74
75 <div class="box">
76 <ul>
77 <li class="current">鞋子</li>
78 <li>袜子</li>
79 <li>帽子</li>
80 <li>裤子</li>
81 <li>裙子</li>
82 </ul>
83 <span class="show">鞋子</span>
84 <span>袜子</span>
85 <span>帽子</span>
86 <span>裤子</span>
87 <span>裙子</span>
88 </div>
89
90 <div class="box">
91 <ul>
92 <li class="current">鞋子</li>
93 <li>袜子</li>
94 <li>帽子</li>
95 <li>裤子</li>
96 <li>裙子</li>
97 </ul>
98 <span class="show">鞋子</span>
99 <span>袜子</span>
100 <span>帽子</span>
101 <span>裤子</span>
102 <span>裙子</span>
103 </div>
104
105 <div class="box">
106 <ul>
107 <li class="current">鞋子</li>
108 <li>袜子</li>
109 <li>帽子</li>
110 <li>裤子</li>
111 <li>裙子</li>
112 </ul>
113 <span class="show">鞋子</span>
114 <span>袜子</span>
115 <span>帽子</span>
116 <span>裤子</span>
117 <span>裙子</span>
118 </div>
119
120 </body>
121 </html>
tab栏切换 精简版
节点的层次结构
父节点:parentNode 下面的IE678 不支持
兄弟节点: previousSibling || previousElementSibling 前一个兄弟节点
nextSibling || nextElementSibling 后一个兄弟节点
子节点 : firstChild 第一个子节点 || firstElementChild
lastChild 最后一个子节点 || lastElementChild
所有子节点:var arr = box.parentNode.children
随意获取兄弟节点: 自己.parentNode.children[ index ];
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 li {
8 list-style: none;
9 100px;
10 height: 100px;
11 background-color: pink;
12 margin: 5px;
13 }
14 </style>
15 </head>
16 <body>
17
18 <ul>
19 <li class="box1"></li>
20 <li class="box2"></li>
21 <li ></li>
22 <li class="box4"></li>
23 <li class="box5"></li>
24 </ul>
25
26 <script>
27
28 //parentNode父盒子
29 var box3 = document.getElementById("box3");
30 box3.parentNode.style.backgroundColor = "blue";
31
32 //兄弟节点(前一个和后一个:previousSibling和nextSibling)
33 //previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。
34 // box3.previousElementSibling.style.backgroundColor = "red";
35 // box3.nextElementSibling.style.backgroundColor = "yellow";
36 // box3.previousSibling.style.backgroundColor = "red";
37 // box3.nextSibling.style.backgroundColor = "yellow";
38 var pre = box3.previousElementSibling || box3.previousSibling;
39 var net = box3.nextElementSibling || box3.nextSibling;
40 pre.style.backgroundColor = "red";
41 net.style.backgroundColor = "yellow";
42
43 //单个子元素(firstChild和lastChild)
44 // box3.parentNode.firstElementChild.style.backgroundColor = "orange";
45 // box3.parentNode.lastElementChild.style.backgroundColor = "green";
46 var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;
47 var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;
48 first.style.backgroundColor = "orange";
49 last.style.backgroundColor = "green";
50
51
52 //所有子元素
53 var arr = box3.parentNode.children;
54 for(var i=0;i<arr.length;i++){
55 arr[i].style.backgroundColor = "black";
56 }
57
58 console.log(box3.parentNode.childNodes);
59 var arr2 = box3.parentNode.childNodes;
60 for(var i=0;i<arr2.length;i++){
61 if(arr2[i].nodeType === 1){
62 console.log(arr2[i]);
63 }
64 }
65
66 //随意获取指定兄弟节点
67 var index = 0;
68 var node = box3.parentNode.children[index];
69
70
71 //获取所有的兄弟节点
72 function siblings(elm) {
73 var a = [];
74 var p = elm.parentNode.children;
75 for(var i =0;i<p.length;i++) {
76 if(p[i] !== elm) {
77 a.push(p[i]);
78 }
79 }
80 return a;
81 }
82
83 </script>
84 </body>
85 </html>
访问关系
nodeType / nodeName /nodeValue
nodeType:节点的类型: 元素节点:1 || 属性节点:2 || 文本节点:3
nodeName:节点的名字
nodeValue:节点的值: 元素节点(element)的value为 null ;属性的value 是属性值
1 <script>
2
3 var ele = document.getElementById("box");//元素节点
4 var att = ele.getAttributeNode("id");//属性节点
5 var txt = ele.firstChild;
6
7 // console.log(ele);
8 // console.log(att);
9 // console.log(txt);
10 //nodeType
11 console.log(ele.nodeType);//1
12 console.log(att.nodeType);//2
13 console.log(txt.nodeType);//3
14
15 //nodeName
16 console.log(ele.nodeName);//DIV
17 console.log(att.nodeName);//id
18 console.log(txt.nodeName);//#text
19
20 //nodeValue
21 console.log(ele.nodeValue);//null
22 console.log(att.nodeValue);//box
23 console.log(txt.nodeValue);//你好
24
25 </script>
NodeType、nodeName、nodeValue