zoukankan html css js c++ java

JS-DOM ～ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType

 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" id="node_small">
62     <a href="#"></a>
63     <div class="erweima hide" id="er">
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" id="theadInp" />
118                     </th>
119                     <th>菜名</th>
120                     <th>饭店</th>
121                 </tr>
122             </thead>
123             <tbody id="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 id="box3"></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

作者:明明
出处: http://www.cnblogs.com/mingm/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意，必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

查看全文

相关阅读:
第05组 Alpha冲刺（2/4）
Alpha冲刺（1/4）
第04组 Beta冲刺（4/4）
第04组 Beta冲刺（3/4）
第04组 Beta冲刺（2/4）
第04组 Beta冲刺（1）
第04组 Alpha事后诸葛亮
 第04组 Alpha冲刺（4/4）
第04组 Alpha冲刺（3/4）
第04组 Alpha冲刺（2/4）

原文地址：https://www.cnblogs.com/mingm/p/6624716.html