DOM

1、DOM简介

DOM，全称Document Object Model 文档对象模型。

JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

文档

文档表示的就是整个的HTML网页文档

对象

对象表示将网页中的每一个部分都转换为了一个对象

模型

使用模型来表示对象之间的关系，这样方便我们获取对象

DOM树体现了节点与节点之间的关系

2、节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点

比如：html标签、属性、文本、注释、整个文档等都是一个节点

虽然都是节点，但是实际上他们的具体类型是不同的。比如：

• 标签称为元素节点
• 属性称为属性节点
• 文本称为文本节点
• 文档称为文档节点

节点的类型不同，属性和方法也都不尽相同

节点类型

节点：Node——构成HTML文档最基本的单元

常用节点分为四类

• 文档节点：整个HTML文档
• 元素节点：HTML文档中的HTL标签
• 属性节点：元素的属性
• 文本节点：HTML标签中的文本内容

节点属性

文档节点（Document）

文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点

document对象作为window对象的属性存在的，我们不用获取可以直接使用

通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象

元素节点（Element）

HTML中的各种标签都是元素节点，这也是我们最常用的一个节点

浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点

比如：document.getElementById() 根据id属性值获取一个元素节点对象。

文本节点（Text）

文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点

它包括可以字面解释的纯文本内容

文本节点一般是作为元素节点的子节点存在的

获取文本节点时，一般先要获取元素节点，再通过元素节点获取文本节点。例如：元素节点.firstChild;

获取元素节点的第一个子节点，一般为文本节点

属性节点（Attr）

属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分

可以通过元素节点来获取指定的属性节点。例如：元素节点.getAttributeNode("属性名");

注意：我们一般不使用属性节点

浏览器已经为我们提供文档节点对象，这个对象是window

属性可以在页面中直接使用，文档节点代表的是整个网页

// 获取button对象
var btn = document.getElementById("btn");
console.log(btn); // <button type="button" id="btn">我是一个按钮</button>
// 修改btn的文本节点内容
btn.innerHTML = "I'm a button.";

3、事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间

JavaScript与HTML之间的交互是通过事件实现的

对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等

我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行

<button type="button" id="btn" onclick="alert('Fuck');">我是一个按钮</button>

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

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

// 绑定一个单击事件
btn.onclick = function(){
    alert("Don't touch me.");
}

像这种为单击事件绑定的函数，我们称为单击响应函数

4、文档的加载

当我们把script标签放到head中时，会报错UncaughtTypeError: Cannot set property 'innerHTML' of null，这是为什么呢？

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载，DOM对象也没有加载，会导致无法获取到DOM对象

如果非要这么干，也不是没有办法

onload事件会在整个页面加载完成之后才触发，可以为window对象绑定一个onload事件

window.onload = function(){
    // 获取button对象
    var btn = document.getElementById("btn");
    // 绑定一个单击事件
    btn.onclick = function(){
        alert("Don't touch me.");
    }
}

该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

5、DOM查询

获取元素节点

通过document对象调用

为了方便，定义一个通用的函数，专门用来为指定元素绑定单击响应函数

// 参数：
// 	idstr	要绑定单击响应函数的对象的id属性值
// 	fun		事件的回调函数，当单击元素时，该函数将会被触发
function myClick(idStr, fun){
    var btn = document.getElementById(idStr);
    btn.onclick = fun;
}

• getElementById() 通过id属性获取一个元素节点对象

  myClick("btn01", function () {
      // innerHTML 通过这个属性可以获取到元素内部的html代码
      alert(document.getElementById("bj").innerHTML); // 北京
  });
  

• getElementsByTagName() 通过标签名获取一组元素节点对象

  myClick("btn02", function () {
      // getElementsByTagName()可以根据标签名来获取一组元素节点对象
      // 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
      // 即使查询到的元素只有一个，也会封装到数组中返回
      var li_list = document.getElementsByTagName("li");
      alert(li_list.length); // 14
      
      var arr = [];
      for(var i=0;i<li_list.length;i++){
          arr.push(li_list[i].innerHTML);
      }
      alert(arr); // 北京,上海,东京,首尔,红警,实况,极品飞车,魔兽,IOS,Android,Windows Phone,IOS,Android,Windows Phone
  });
  

• getElementsByName() 通过name属性获取一组元素节点对象

  myClick("btn03", function () {
      var inputs = document.getElementsByName("gender");
      alert(inputs.length); // 2
      
      var arr = [];
      for(var i=0;i<inputs.length;i++){
          // innerHTML用于获取元素内战的HTML代码的
          // 如果需要读取元素节点属性，直接使用`元素.属性名`
          // 例子：`元素.id`  `元素.name`  `元素.value`
          arr.push(inputs[i].value); 
          // 注意：class属性不能采用这种方式，读取class属性时需要使用`元素.className`
          arr.push(inputs[i].className);
      }
      alert(arr); // male,hello,female,hello
  });
  

练习：图片切换

HTML代码

<div class="outer">
    <p id="info">共5张图片，当前第1张</p>
    <img src="img/1.jpg" alt="冰棍"/>
    <button type="button" id="prev">上一张</button>
    <button type="button" id="next">下一张</button>
</div>

CSS代码

*{
    margin:0;
    padding:0;
}

.outer{
    width: 500px;
    margin: 50px auto;
    padding: 10px;
    background-color: greenyellow;
    /* 文本居中：内联样式当成是文本 */
    text-align: center;
}

JS代码

// 上一张
var prev = document.getElementById("prev");
// 下一张
var next = document.getElementById("next");
// 图片
var img = document.getElementsByTagName("img")[0];
// 信息
var info = document.getElementById("info");
// 图片集合
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
// 记录第几张
var index = 0;
// 上一张绑定单击相应事件
prev.onclick = function(){
    // 循环切换
    index = (index < 0) ? imgArr.length - 1 : index;
    // 修改img的src属性，以切换图片
    img.src = imgArr[index];
    // 修改文字提示
    info.innerHTML = "共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
    // 切换上一张
    index--;
};
// 下一张绑定单击相应事件
next.onclick = function(){
    // 循环切换			
    index = (index > imgArr.length - 1) ? 0 :index;
    // 修改img的src属性，以切换图片
    img.src = imgArr[index];
    // 修改文字提示
    info.innerHTML = "共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
    // 切换下一张
    index++;
};

效果

获取元素节点的子节点

通过具体的元素节点调用

• getElementsByTagName()方法，返回当前节点的指定标签名后代节点

  myClick("btn04", function () {
      var city = document.getElementById("city");
      // 获取city下1i节点
      var list = city.getElementsByTagName("li");
      alert(list.length); // 4
      
      var arr = [];
      for(var i=0;i<list.length;i++){
          arr.push(list[i].innerHTML);
      }
      alert(arr); // 北京,上海,东京,首尔
  });
  

• childNodes属性，表示当前节点的所有子节点

  myClick("btn05", function () {
      var city = document.getElementById("city");
      // childNodes属性会获取包括文本节点在内的所有节点
      // 根据DOM标签标签间空白也会当成文本节点
      // 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
      // 所以该属性在IE8中会返回4个子元素，而其他浏览器是9个
      var list = city.childNodes;
      alert(list.length); // 9
      
      var arr = [];
      for(var i=0;i<list.length;i++){
          arr.push(list[i]);
      }
      alert(arr); // [object Text],[object HTMLLIElement],[object Text],[object HTMLLIElement],[object Text],[object HTMLLIElement],[object Text],[object HTMLLIElement],[object Text]
  });
  myClick("btn05", function () {
      var city = document.getElementById("city");
      // children属性可以获取当前元素的所有子元素
      var list = city.children;
      alert(list.length); // 4
      
      var arr = [];
      for(var i=0;i<list.length;i++){
          arr.push(list[i].innerHTML);
      }
      alert(arr); // 北京,上海,东京,首尔
  });
  

• firstChild属性，表示当前节点的第一个子节点

  myClick("btn06", function () {
      var phone = document.getElementById("phone");
      // firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
      var firstChild = phone.firstChild;				
      alert(firstChild); // [object HTMLLIElement]
      alert(firstChild.innerHTML); // IOS
  });
  myClick("btn06", function () {
      var phone2 = document.getElementById("phone2");
      // firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
      var firstChild = phone2.firstChild;				
      alert(firstChild); // [object Text]
      alert(firstChild.innerHTML); // undefined
  });
  myClick("btn06", function () {
      var phone2 = document.getElementById("phone2");
      // firstElementchild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用
      var firstElementChild = phone2.firstElementChild;				
      alert(firstElementChild); // [object HTMLLIElement]
      alert(firstElementChild.innerHTML); // IOS
  });
  

• lastChild属性，表示当前节点的最后一个子节点

  document.getElementById("btn062").onclick = function () {
      var phone = document.getElementById("phone");
      // children属性可以获取当前元素的所有子元素
      var lastChild = phone.lastChild;				
      alert(lastChild); // [object HTMLLIElement]
      alert(lastChild.innerHTML); // Windows Phone
  });
  

获取父节点和兄弟节点

通过具体的节点调用

• parentNode属性，表示当前节点的父节点

  myClick("btn07", function () {
      var bj = document.getElementById("bj");
      var parentNode = bj.parentNode;				
      alert(parentNode); // [object HTMLUListElement]
      alert(parentNode.innerHTML);
      // <li id="bj">北京</li>
      // <li>上海</li>
      // <li>东京</li>
      // <li>首尔</li>
      
      // innerText
      // -该属性可以获取到元素内部的文本内容
      // -它和innerHTML类似，不同的是它会自动将htm1去除
      alert(parentNode.innerText);
      // 北京
      // 上海
      // 东京
      // 首尔
  });
  

• previousSibling属性，表示当前节点的前一个兄弟节点

  myClick("btn08", function () {
      var android = document.getElementById("android");
      // 返回#android的前一个兄弟节点（也可能获取到空白的文本）
      var previousSibling = android.previousSibling;				
      alert(previousSibling); // [object HTMLLIElement]
      alert(previousSibling.innerHTML); // IOS
  });
  myClick("btn08", function () {
      var android2 = document.getElementById("android2");
      // 返回#android的前一个兄弟节点（也可能获取到空白的文本）
      var previousSibling = android2.previousSibling;				
      alert(previousSibling); // [object Text]
      alert(previousSibling.innerHTML); // undefined
  });
  myClick("btn08", function () {
      var android2 = document.getElementById("android2");
      // previousElementSibling获取前一个兄弟元素，IE8及以下不支持
      var previousElementSibling = android2.previousElementSibling;				
      alert(previousElementSibling); // [object HTMLLIElement]
      alert(previousElementSibling.innerHTML); // IOS
  });
  

• nextSibling属性，表示当前节点的后一个兄弟节点

  myClick("btn082", function () {
      var android = document.getElementById("android");
      // 返回#android的前一个兄弟节点（也可能获取到空白的文本）
      var nextSibling = android.nextSibling;				
      alert(nextSibling); // [object HTMLLIElement]
      alert(nextSibling.innerHTML); // Windows Phone
  });
  

6、全选练习

HTML代码

<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
</form>

全选

document.getElementById("checkedAllBtn").onclick = function(){
    var items = document.getElementsByName("items");
    for(var i=0;i<items.length;i++){
        // 通过多选框的checked属性可以来获取或设置多选框的选中状态
        items[i].checked = true;
    }
    // 全选按钮也要同步选中
    document.getElementById("checkedAllBox").checked = true;
}

全不选

document.getElementById("checkedNoBtn").onclick = function(){
    var items = document.getElementsByName("items");
    for(var i=0;i<items.length;i++){
        items[i].checked = false;
    }
    // 全选按钮也要同步不选中
    document.getElementById("checkedAllBox").checked = false;
}

反选

document.getElementById("checkedRevBtn").onclick = function(){
    var items = document.getElementsByName("items");
    var flag = true;
    for(var i=0;i<items.length;i++){
        items[i].checked = !items[i].checked;
        if(!items[i].checked){
            flag = false;
        }
    }
    // 全选按钮也要同步选中或不选中
    document.getElementById("checkedAllBox").checked = flag;
}

提交

document.getElementById("sendBtn").onclick = function(){
    var items = document.getElementsByName("items");
    var arr = [];
    for(var i=0;i<items.length;i++){
        if(items[i].checked){
            arr.push(items[i].value);
        }
    }
    alert(arr);
}

全选/全不选

document.getElementById("checkedAllBox").onclick = function(){
    var items = document.getElementsByName("items");
    for(var i=0;i<items.length;i++){
        // 在事件的响应函数中，响应函数是给谁绑定的this就是谁
        items[i].checked = this.checked; 
    }
}

items

var flag;
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
    items[i].onclick = function(){
        flag = true;
        for(var j=0;j<items.length;j++){
            if(!items[j].checked){
                flag = false;
                break;
            }
        }
        document.getElementById("checkedAllBox").checked = flag;
    }
}

效果

7、DOM查询的剩余方法

document.body

在document中有一个属性body，它保存的是body的引用

// 注意：如果script标签是定义在head中的，则这里需要window.onload = function(){}包裹，否则会出现null的情况
var body = document.getElementsByTagName("body");
console.log(body); // HTMLCollection [body]
body = document.body;
console.log(body); // <body></body>
console.log(typeof body); // object

document.documentElement

document.documentElement保存的是html根标签

var html = document.documentElement;
console.log(html);

document.all

document.all代表页面中所有的元素

var all = document.all;
console.log(all); // HTMLAllCollection(11) [html, head, meta, title, script, script, script, body, script, script, script]
console.log(all.length); // 11
console.log(typeof all); // undefined
for(var i=0;i<all.length;i++){
    console.log(all[i]);
}

var el = document.getElementsByTagName("*");
console.log(el); // HTMLCollection(11) [html, head, meta, title, script, script, script, body, script, script, script]
console.log(all.length); // 11
console.log(typeof all); // undefined
for(var i=0;i<el.length;i++){
    console.log(el[i]);
}

document.getElementsByClassName()

根据元素的class属性值查询一组元素节点对象

getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器

var boxs = document.getElementsByClassName("box");
console.log(boxs); // HTMLCollection(3) [div.box, div.box, div.box]
console.log(boxs.length); // 3
console.log(typeof boxs); // object

document.querySelector()

需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象

虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替

使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

var div = document.querySelector(".box div");
console.log(div.innerHTML); // I'm first div.
boxs = document.querySelector(".box");
console.log(boxs); 
// <div class="box">
// 		<div>I'm first div.</div>
// </div>

document.querySelectorAll()

该方法和querySelector()用法类似，不的是它会将符合条件的元素封装到一个数组中返回

即使符合条件的元素只有一个，它也会返回数组

boxs = document.querySelectorAll(".box");
console.log(boxs); // NodeList(3) [div.box, div.box, div.box]
console.log(boxs.length); //3

8、DOM增删改

document.createElement()

可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

document.createTextNode()

可以用来创建一个文本节点对象，它需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

appendChild()

向一个父节点中添加一个新的子节点，用法：父节点.appendChild(子节点);

insertBefore()

可以在指定的子节点前插入新的子节点，语法：父节点.insertBefore(新节点, 旧节点);

replaceChild()

可以使用指定的子节点替换已有的子节点，语法：父节点.replaceChild(新节点, 旧节点);

removeChild()

可以删除一个子节点，语法：父节点.removeChild(子节点);、子节点.parentNode.removeChild(子节点);

// 创建一个"广州"节点,添加到#city下
var city = document.getElementById("city");
myClick("btn01",function(){
    // 创建元素节点
    var li = document.createElement("li");
    // 创建文本节点
    var gz = document.createTextNode("广州");
    // 将文本节点添加到元素节点中
    li.appendChild(gz);
    // 将元素节点添加至#city下
    city.appendChild(li);
});
// 将"广州"节点插入到#bj前面	
var bj = document.getElementById("bj");
myClick("btn02",function(){
    var li = document.createElement("li");
    var gz = document.createTextNode("广州");
    li.appendChild(gz);
    // 将元素节点插入到#bj前面
    city.insertBefore(li,bj);
});
// 使用"广州"节点替换#bj节点
myClick("btn03",function(){
    var li = document.createElement("li");
    var gz = document.createTextNode("广州");
    li.appendChild(gz);
    // 将元素节点替换#bj节点
    city.replaceChild(li,bj);
});
// 删除#bj节点
myClick("btn04",function(){
    // 将元素节点替换#bj节点
    // city.removeChild(bj);
    // 更常用，不需要知道父节点是什么	
    bj.parentNode.removeChild(bj);
});
// 使用innerHTML将"广州"节点添加到#city下
myClick("btn07",function(){
    // 使用innerHTML也可以完成DOM的增删改的相关操作
    // city.innerHTML += "<li>广州</li>";
    // 不过这种方式会先删除再替换，耗费性能，所以一般我们会两种方式结合使用
    var li = document.createElement("li");
    li.innerHTML = "广州";
    city.appendChild(li);
});

9、增删练习

准备

HTML代码

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>

JS代码

// a的单击相应函数
function delRow() {
    // 添加提示信息
    grandPrentNode = this.parentNode.parentNode;
    var name = grandPrentNode.children[0].innerHTML;
    if (confirm("确认删除" + name + "吗？")) {
        // 删除祖先节点
        grandPrentNode.parentNode.removeChild(grandPrentNode);
    }
    // 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
    // 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
    return false;
}

window.onload = function() {
    // 1、删除
    // 为delete绑定单击相应函数
    var a;
    var grandPrentNode;
    var aList = document.getElementsByTagName("a");
    for (var i = 0; i < aList.length; i++) {
        aList[i].onclick = delRow;
    }

    // 2、添加
    document.getElementById("addEmpButton").onclick = function() {
        // 获取name/email/salary
        var empName = document.getElementById("empName").value;
        var email = document.getElementById("email").value;
        var salary = document.getElementById("salary").value;

        // 校验数据是否为空
        if (!empName || !email || !salary) {
            alert("有数据为空，无法添加！");
            return;
        }

        // 创建文本节点
        var empName_text = document.createTextNode(empName);
        var email_text = document.createTextNode(email);
        var salary_text = document.createTextNode(salary);
        var delete_text = document.createTextNode("Delete");

        // 创建元素节点
        var tr = document.createElement("tr");
        var empName_td = document.createElement("td");
        var email_td = document.createElement("td");
        var salary_td = document.createElement("td");
        var a_td = document.createElement("td");
        var a = document.createElement("a");

        // 添加内容
        a.href = "javascript:;";
        a.onclick = delRow;

        // 添加子节点
        empName_td.appendChild(empName_text);
        email_td.appendChild(email_text);
        salary_td.appendChild(salary_text);
        a.appendChild(delete_text);
        a_td.appendChild(a);
        tr.appendChild(empName_td);
        tr.appendChild(email_td);
        tr.appendChild(salary_td);
        tr.appendChild(a_td);

        // 将tr添加至table中
        // document.getElementById("employeeTable").appendChild(tr);
        // 注意：浏览器生成的table结构会在内部套一层tbody，为了以防万一，也为了结构一致性和样式一致性，应该将其添加至tbody中
        var employeeTable = document.getElementById("employeeTable");
        var tbody = employeeTable.getElementsByTagName("tbody")[0];
        tbody.appendChild(tr);
    }

添加优化

结合createElement和innerHTML，优化修改上述添加代码逻辑

document.getElementById("addEmpButton").onclick = function() {
    // 获取name/email/salary
    var empName = document.getElementById("empName").value;
    var email = document.getElementById("email").value;
    var salary = document.getElementById("salary").value;

    // 校验数据是否为空
    if (!empName || !email || !salary) {
        alert("有数据为空，无法添加！");
        return;
    }

    // 创建元素节点
    var tr = document.createElement("tr");

    // 添加子节点
    var empNameTd = "<td>" + empName + "</td>";
    var emailTd = "<td>" + email + "</td>";
    var salaryTd = "<td>" + salary + "</td>";
    var aTd = "<td><a href=\"javascript:;\">Delete</a></td>";
    tr.innerHTML = empNameTd + emailTd + salaryTd + aTd;

    // 为a绑定单击相应函数
    tr.getElementsByTagName("a")[0].onclick = delRow;

    // 将tr添加至table中
    // document.getElementById("employeeTable").appendChild(tr);
    // 注意：浏览器生成的table结构会在内部套一层tbody，为了以防万一，也为了结构一致性和样式一致性，应该将其添加至tbody中
    var employeeTable = document.getElementById("employeeTable");
    var tbody = employeeTable.getElementsByTagName("tbody")[0];
    tbody.appendChild(tr);
}

a的索引问题

上述中，我们为每个a都添加了单击响应函数，使用了this获取遍历中的a元素，通过this.parentNode.parentNode获取了 tr 元素，如果这里改成aList[i].parentNode.parentNode，能够拿到 tr 元素吗？

看起来好像毫无悬念，但实际上是拿不到的，这是为什么呢？

我们可以改造下 for 循环中 a 元素的单击相应函数，打印下每次拿到的 i

for (var i = 0; i < aList.length; i++) {
    aList[i].onclick = function(){
        alert(i);
        return false;
    };
}

会发现，每次打印的结果都是3，而 aList 的长度为3最大索引是2

原因其实很简单，因为单击相应函数的执行是晚于 for 循环的执行的。也就是说，我们在点击 Delete 前，for 循环就已经执行完毕了。即当 i=2 的循环执行之后，会执行 i++，此时 i=3，这是循环条件判断 i ≮ 2，即不满足循环条件，for 循环退出。所以每次拿到的都是 for 循环执行完毕之后的 i，因此通过 aList[i] 的方式是无法取得对应的 a 元素的

总结： for 循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行当响应函数执行时，for 循环早已执行完毕

10、操作内联样式

修改元素内联样式

通过JS修改元素的内联样式，语法：元素.style.样式名 = 样式值

box1.style.height = "200px";
box1.style.width = "200px";

注意：如果CSS的样式名中含有一，这种名称在JS中是不合法的，比如background-color

需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写

// box1.style.background-color = "red"; // Uncaught SyntaxError: Invalid left-hand side in assignment
box1.style.backgroundColor = "red";

在 w3school 手册中，可以查看到每个样式所对应的 JS 代码

我们通过 style 属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

我们给 background-color设置!important之后，通过 box1.style.backgroundColor = "red";设置的样式就“废”了

background-color: yellow !important;

读取元素内联样式

通过 JS 读取元素的内联样式，语法：元素.style.样式名

通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

alert(box1.style.height); // 
box1.style.height = "200px";
alert(box1.style.height); // 200px

别急，耐心往下看

读取元素样式

获取元素的当前显示的样式，语法：元素.currentStyle.样式名

它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值

alert(box1.currentStyle.height); // 100px
box1.style.height = "200px";
alert(box1.currentStyle.height); // 200px

不过currentstyle只有 IE 浏览器支持，其他的浏览器都不支持。我们在 IE 中测试是可行的，在 Chrome 或 Edge 中报错的：UncaughtTypeError: Cannot read property 'height' of undefined

不过，在其他浏览器中可以使用getComputedStyle()，这个方法来获取元素当前的样式

这个方法是window的方法，可以直接使用，需要两个参数

• 第一个：要获取样式的元素
• 第二个：可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值

比如：没有设置 width，它不会获取到 auto，而是一个长度

但是该方法不支持IE8及以下的浏览器

var obj = getComputedStyle(box1, null);
alert(obj); // [object CSSStyleDeclaration]
alert(obj.width); // 200px
alert(obj.height); // 200px
alert(obj.backgroundColor); // rgb(2  55, 0, 0)

那么问题来了，如果想要兼容IE8及以下的浏览器，就会陷入一个两难的境地， 该怎么办呢？

通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

那么我就只能自己写个函数，来兼容所有浏览器

// 自定义兼容所有浏览器获取元素样式的方法
function getStyle(obj, name) {
    // 判断是否有getComputedStyle方法
    if (getComputedStyle) {
        // 正常浏览器的方式
        return getComputedStyle(obj, null)[name];
    } else {
        // IE的方式
        return obj.currentStyle[name];
    }
}

测试结果

Hbuilder内置浏览器

Chrome

Edge

IE11

IE8

怎么 IE8 还是不行，提示“getComputedStyle”未定义？

这是因为执行到 if 语句时，会先在 function 中找，找不到会在全局作用域中找，全局作用域中也找不到getComputedStyle，就会报错了

那么怎么解决这个问题呢？

我们先改造一下 function 代码，将getComputedStyle改成window.getComputedStyle

function getStyle(obj, name) {
    // 判断是否有getComputedStyle方法
    if (window.getComputedStyle) {
        // 正常浏览器的方式
        return getComputedStyle(obj, null)[name];
    } else {
        // IE的方式
        return obj.currentStyle[name];
    }
}

效果

为什么呢？

因为变量找不到会报错，而属性找不到返回的是undefined而不会报错，这样就可以利用undefined != true的特点，执行 else 中的代码

同理，下面代码同样可以判断，只不过，会优先走currentStyle的方式，而我们希望的优先走getComputedStyle方法，所以不建议用

function getStyle(obj, name) {
    // 判断是否有currentStyle属性
    if (obj.currentStyle) {
        // IE的方式
        return obj.currentStyle[name];
    } else {
        // 正常浏览器的方式
        return getComputedStyle(obj, null)[name];
    }
}

那么上述代码有没有优化或者说简化的空间呢？当然，我们可以使用三元运算符对其进行精简

function getStyle(obj, name) {
    return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];
}

三元运算符更加简洁，if-else 的方式更加清晰，建议使用 if-else 的方式，不过本质上是一样的，看个人习惯

11、其他样式相关的属性

clientWidth、clientHeight

这两个属性可以获取元素的可见宽度和高度

这些属性都是不带px的，返回都是一个数字，可以直接进行计算

会获取元素宽度和高度，包括内容区和内边距

这些属性都是只读的，不能修改（改只有一种方式，就是通过元素.style.样式 = 样式值）

// #box1 {
// 	width: 100px;
// 	height: 100px;
// 	background-color: red;
// 	padding: 10px;
// 	border: 10px solid yellow;
// }
alert(box1.clientHeight); // 120
alert(box1.clientWidth); // 120

offsetWidth、offsetHeight

获取元素的整个的宽度和高度，包括内容区、内边距和边框

// #box1 {
// 	width: 100px;
// 	height: 100px;
// 	background-color: red;
// 	padding: 10px;
// 	border: 10px solid yellow;
// }
alert(box1.offsetHeight); // 140
alert(box1.offsetWidth); // 140

offsetParent

可以用来获取当前元素的定位父元素

会获取到离当前元素最近的开启了定位（只要position不是sticky）的祖先元素

如果所有的祖先元素都没有开启定位，则返回body

// <div id="box1"></div>
alert(box1.offsetParent); // [object HTMLBodyElement]

// <div id="box2">
//     <div id="box1"></div>
// </div>
alert(box1.offsetParent); // [object HTMLBodyElement]

//<div id="box3">
//	<div id="box2">
//		<div id="box1"></div>
//	</div>
//</div>
alert(box1.offsetParent); // [object HTMLBodyElement]

//<div id="box3" style="position: relative;">
//	<div id="box2" style="position: relative;">
//		<div id="box1"></div>
//	</div>
//</div>
alert(box1.offsetParent); // [object HTMLDivElement]
alert(box1.offsetParent.id); // box2

//<div id="box3" style="position: relative;">
//	<div id="box2">
//		<div id="box1"></div>
//	</div>
//</div>
alert(box1.offsetParent); // [object HTMLDivElement]
alert(box1.offsetParent.id); // box3

offsetLeft、offsetTop

当前元素相对于其定位父元素的水平或垂直偏移量

//<div id="box3">
//	<div id="box2">
//		<div id="box1"></div>
//	</div>
//</div>
alert(box1.offsetLeft); // 8  浏览器的默认样式
alert(box1.offsetTop); // 54

//<div id="box3">
//	<div id="box2" style="position: relative;">
//		<div id="box1"></div>
//	</div>
//</div>
alert(box1.offsetLeft); // 0
alert(box1.offsetTop); // 0

scrollHeight、scrollWidth

可以获取元素整个滚动区域的宽度和高度

// #box4 {
// 	width: 200px;
// 	height: 300px;
// 	background-color: yellow;
// 	overflow: auto;
// }
// #box5 {
// 	width: 400px;
// 	height: 600px;
// 	background-color: #bfa;
// }
alert(box4.scrollHeight); // 600
alert(box4.scrollWidth); // 400

scrollLeft、scrollTop

可以获取水平或垂直滚动条滚动的距离

// #box4 {
// 	width: 200px;
// 	height: 300px;
// 	background-color: yellow;
// 	overflow: auto;
// }
// #box5 {
// 	width: 400px;
// 	height: 600px;
// 	background-color: #bfa;
// }
alert(box4.scrollLeft); // 0/71.19999694824219/92/... 随着水平滚动条滚动而发生变化
alert(box4.scrollTop); // 0/163.1999969482422/116/... 随着垂直滚动条滚动而发生变化

看这么一个问题，打印如下值，将水平和垂直滚动条滚动到底

alert(box4.clientHeight + ", " + (box4.scrollHeight - box4.scrollTop)); // 283, 283.20001220703125
alert(box4.clientWidth + ", " + (box4.scrollWidth - box4.scrollLeft)); // 183, 183.1999969482422

PS：我这里打印的结果存在小数点，不知为何

• 当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了
• 当满足scrollWidth - scrollLeft == clientwidth，说明水平滚动条滚动到底

那么这个原理有什么用呢？

爱到底到底，管我什么事 有些网站注册时会有一个 霸王条款 用户协议，要确保用户阅读协议了，才允许注册。那问题来了，怎么确保用户阅读了协议呢？就是利用了上述原理，当滚动条拖至最底部时，就可以注册了。

那么接下来，我们就做一个 霸王条款 用户协议

练习

HTML 代码

<div id="outer">
    <h3>亲爱的用户，欢迎注册本网站</h3>
    <p id="info">
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        此处省略一万字。。。
    </p>
    <div id="checkDiv">
        <input type="checkbox" name="checkInput" value="1" id="checkInput" disabled="disabled" />我已仔细阅读协议，一定遵守
    </div>
    <div id="submitDiv">
        <input type="submit" id="submitInput" disabled="disabled" value="注册"/>
    </div>
</div>

CSS 代码

#outer {
    width: 500px;
}

#outer,
h3,
#checkDiv,
#submitDiv,
#submitInput {
    margin: 10px auto;
}

#checkDiv {
    width: 250px;
}

#submitInput {
    display: block;
}

#info {
    height: 600px;
    overflow: auto;
}

JS 代码

// 为滚动条绑定事件，就是为有滚动条的元素绑定事件
var info = document.getElementById("info");
var checkInput = document.getElementById("checkInput");
var submitInput = document.getElementById("submitInput");
info.onscroll = function() {
    // 当滚动条滚动到底时，启用并自动勾选协议，并启用注册按钮
    if (parseInt(info.scrollHeight - info.scrollTop) == parseInt(info.clientHeight)) {
        // 自动勾选协议
        checkInput.disabled = false;
        checkInput.checked = true;
        // 启用注册按钮
        submitInput.disabled = false;
    }
}
// 为checkInput绑定勾选响应事件
checkInput.onclick = function(ret) {
    // 如果勾选了协议，则启用注册按钮，否则禁用注册按钮
    if (!checkInput.checked) {
        submitInput.disabled = true;
    }
    else{
        submitInput.disabled = false;
    }
}
// 为submit绑定单击响应函数
submitInput.onclick = function(){
    if(confirm("确认注册吗？")){
        alert("注册成功");
    }
}

效果