JS学习记录6.2/DOM/节点Node/事件/获取元素节点/点击按钮切换图片练习/获取元素结点的子节点/获取父节点和兄弟节点/全选全不选练习/查询网页中的标签_js实现动态获取节点切换页面

DOM

全称Document Object Model文档对象模型，在JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。
文档：文档表示的就是整个HTML网页文档
对象：对象表示将网页中的每一个部分都转换为了一个对象。
模型：使用模型来表示对象之间的关系，这样方便我们获得对象。

节点Node

是构成网页的最基本的组成部分，网页中的每一部分都可以称为是一个节点。
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

节点的属性：

浏览器已经为我们提供了文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。
例：

//获取button对象
        var btn = document.getElementById("btn");
        //修改按钮的文字
        btn.innerHTML = "我是花花";
        console.log(btn);
1
2
3
4
5

事件

就是文档或浏览器窗口中发生的一些特定的交互瞬间。例如：点击按钮，鼠标移动等等
可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码将会执行。

<button id="btn" ondblclick="alert('你点我干嘛');">我是一个按钮</button>
1

这种写法我们称为结构和行为耦合，不方便维护，不推荐使用。

可以为按钮的对应事件绑定处理函数的形式来响应事件,当事件被触发时，其对应的函数将会被调用。
例：

<script>
        //获取button对象
        var btn = document.getElementById("btn");
        //修改按钮的文字
        btn.innerHTML = "我是花花";
        //可以为按钮的对应事件绑定处理函数的形式来响应事件,当事件被触发时，其对应的函数将会被调用
        //绑定一个单击事件
        btn.onclick = function(){
            alert("别点！");
        };
    </script>
1
2
3
4
5
6
7
8
9
10
11

像这种为单击事件绑定的函数，我们称为单击响应函数。
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载,DOM对象还没有加载完毕。如果想要将script标签写在上边，可以为window绑定一个onload事件，确保JS代码是在页面加载完成之后执行，确保代码执行时所有的DOM对象已经加载完毕了。

window.onload = function(){
      alert("hello");
};
1
2
3

获取元素节点

• 通过document对象调用
  1、getElementById() 通过id属性获取一个元素节点对象
  innerHTML可以获取元素内部的html代码alert(bj.innerHTML);，对于自结束标签，这个属性没有意义。
  innerText该属性可以获取元素内部的文本内容，它和innerHTML类似，不同的是它会自动将html标签去除。
  2、getElementsByTagName() 通过标签名获取一组元素节点对象，这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的内容只有一个，也会封装到该对象中。
  遍历内容：

for (var i =0 ; i<lis.length ; i++){
    alert(lis[i].innerHTML);
}
1
2
3

3、getElementsByName() 通过name属性获取一组元素节点对象，如果需要读取元素节点属性，直接使用 元素.属性名
遍历：

for (var i =0 ; i<lis.length ; i++){
    alert(lis[i].type);
}
1
2
3

注意：class属性不能采用这种方式，读取class需要使用 元素.className

点击按钮切换图片练习：

/*点击按钮切换图片*/
//获取两个按钮
window.onload = function () {
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    /*
    *切换图片就是要修改img标签的src属性
    */
    //获取img标签
    var img = document.getElementsByTagName("img")[0];
    //创建一个数组，用来保存图片的路径
    var imgArr = ["../images/sucai1.jpg","../images/sucai2.jpg","../images/sucai3.jpg","../images/sucai4.jpg","../images/sucai5.jpg"];
    //创建一个变量，来保存当前正在显示图片的索引
    var index = 0;

    //获取id为info的p元素
    var info = document.getElementById("info");
    //设置提示文字
    info.innerHTML = "一共 "+imgArr.length+" 页，当前第 "+(index+1)+" 张"
    //分别为两个按钮绑定单击响应函数
    prev.onclick = function () {
        /*当切换到上一张，索引一个自减*/
        index--;
        //判断index是否为小于0
        if(index<0){
            index=imgArr.length-1;
        }
        img.src=imgArr[index];
        //设置提示文字
        info.innerHTML = "一共 "+imgArr.length+" 页，当前第 "+(index+1)+" 张"
    }
    next.onclick = function () {
        //要修改一个元素的属性 元素.属性=属性值
        /*当切换到上一张，索引一个自增*/
        index++;
        if (index>imgArr.length-1){
            index=0
        }
        img.src=imgArr[index];
        //设置提示文字
        info.innerHTML = "一共 "+imgArr.length+" 页，当前第 "+(index+1)+" 张"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

获取元素节点的子节点

• 通过具体的元素节点调用
  1、getElementsByTagName()方法，返回当前节点的指定标签名后代节点

var lis = city.getElementsByTagName("li");//获取#city下所有li节点
1

2、 childNodes一属性，表示当前节点的所有子节点会获取包括文本节点在内的所有节点，根据DOM标准标签间空白也会当成文本节点。
注意：在IE8及以下的浏览器中不会将空白当成子节点。

var cns = city.childNodes;
1

3、children一属性会获取当前元素的所有子元素
4、firstChild一属性，表示当前节点的第一个子节点，包括空白
5、firstElementChild一属性，获取当前节点的第一个子元素，不支持IE8以下浏览器
6、 lastChild一属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

• 通过具体的节点调用
  1、parentNode一属性,表示当前节点的父节点
  2、 previousSibling一属性,表示当前节点的前一个兄弟节点（也可能会获取到空白文本）
  3、previousElementSibling一属性,表示当前节点的前一个兄弟元素IE8及以下不支持
  4、 nextSibling一属性，表示当前节点的后一个兄弟节点
  例：

   /*
    *定义一个函数，专门用来为指定元素绑定单击响应函数
    * 参数：
    * idStr 要绑定单击响应哈拿书的对象的id属性值
    * fun 事件的回调函数，当单击元素时，该函数将会被触发
    */
    function myClick(idStr,fun) {
        var btn = document.getElementById(idStr);
        btn.onclick = fun;
    }
    //调用函数
    myClick("btn07",function () {
            var bj = document.getElementById("");
            var pn = bj.parentElement;
            alert(pn.innerHTML);
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

文本框中的value属性值，就是文本框中填写的内容
读取：alert(um.value);
修改：um.value = “今天天气真不错”;
获取对象中的文本节点

var 服从 = bj.firstChild;
alert(fc.nodeValue);
1
2

在事件响应函数中，响应函数是给谁绑定的this就是谁

全选全不选练习

window.onload = function () {
    /*
    *全选按钮，点击按钮以后，四个多选框全部选中
    */
    var checkAll = document.getElementById("checkAll");
    var items = document.getElementsByName("items");
    checkAll.onclick = function () {
        //获取四个多选框

        for (var i=0;i<items.length;i++){
            items[i].checked=true;
        }
        checkedAllBox.checked=true;
    };
    var checkNo = document.getElementById("checkNo");
    checkNo.onclick = function () {
        //获取四个多选框
        var items = document.getElementsByName("items");
        for (var i=0;i<items.length;i++){
            items[i].checked=false;
        }
        checkedAllBox.checked=false;
    };
    /*
    *反选按钮
    * 点击按钮以后，选中的变成没选中，没选中的变成选中
    *
    */
    var checkRe = document.getElementById("checkRe");
    checkRe.onclick = function () {
        //获取四个多选框
        var items = document.getElementsByName("items");
        checkedAllBox.checked=true;
        for (var i=0;i<items.length;i++){
            //方式一
            // if(items[i].checked){
            //     //证明多选框已经选中，则设置为未选中状态
            //     items[i].checked=false
            // }else{items[i].checked=true}
            //方式二
            //取反
            //反选需要判断多选框是否需要全部选中

            items[i].checked =!items[i].checked;
            if(!items[i].checked){
                //一旦进入判断则证明不是全选状态
                checkedAllBox.checked=false;
            }
        }

    };
    /*提交按钮
    * 点击按钮以后，将所有选中的多选框弹出
    */
    var send = document.getElementById("send");
    send.onclick = function () {
        //获取四个多选框
        var items = document.getElementsByName("items");
        for (var i=0;i<items.length;i++){
            //判断多选框是否选中
            if(items[i].checked){alert(items[i].value);}
        }
    };
    /*
    *全选、全不选的多选框，当它选中时其余的都选中，当它不选中时，其余的都不选中
    */
    var checkedAllBox = document.getElementById("checkedAllBox");
    checkedAllBox.onclick = function () {
        var items = document.getElementsByName("items");
        for (var i=0;i<items.length;i++){
            items[i].checked = checkedAllBox.checked;//checkedAllBox也可换成this
        }
    };
    /*
    *如果四个多选框全都选中，则checkedAllBox也应该选中
    *如果四个多选框全都选中，则checkedAllBox不应该选中
    */
    //为四个多选框分别绑定多选框
    for(var i=0;i<items.length;i++){
        items[i].onclick = function () {
            // 判断四个多选框是否全选
            //为checkedAllBox设置选中状态
            checkedAllBox.checked=true;
            // 只要有一个没选中就不是全选

            for (var j=0;j<items.length;j++){
                if(!items[j].checked){
                    //一旦进入判断则证明不是全选状态
                    checkedAllBox.checked=false;
                    //一旦进入判断，则已经得出结果，不用再继续执行循环
                    break;
                }
            }
        };
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

效果：

获取body标签

var body = document.getElementByTagName("body")[0];或
var body = document.body;
1
2

获取html标签

var html = document.documentElement;
1

页面中所有元素

var all = document.all;
var all = document.getElementByTagName("*");
1
2

根据元素class属性值查询一组元素节点对象,IE8即以下浏览器不支持

var box1 = document.getElementsByClassName("box1");
1

获取页面中所有的div

var divs = document.getElementsByTagName("div");
1

获取box1中的所有div

var div = document.querySelector(."box1 div");
var div = document.querySelectorAll(."box1 div");
1
2

querySelector()需要一个选择器的字符串作为参数，可以根据CSS选择器查询元素节点，也可以用该方法可以根据class属性查询，IE8及以上都能使用；使用该元素只会返回唯一的一个元素，如果满足条件有多个，那么只会返回第一个。
querySelectorAll()方法与querySelector()用法类似，不同的是它会将满足条件的元素封装到数组中返回，及时符合条件的元素只有一个。