DOM操作与WebAPI实战-优快云博客

API（Application Programming Interface，应用程序编程接口），即API=接口，它定义了一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。通俗的讲：API就是一个工具

任何开发语言都有自己的API
API的特征输入和输出（I/O）如： var max = Math.max(9,8,26); 那么max就是输出，（9，8，26）就是输入
API的使用方法（console.log()）指控制台上可输出

JavaScript的组成

由三部分组成：ECMAScript、DOM、BOM

ECMAScript，指由ECMA组织制定了一套规范的语法和语句，它定义了脚本语言的所有属性、方法和对象。其他语言可以实现ECMAScript来作为功能的基准，JavaScript就是遵守了这一基准
BOM。broswer object model：浏览器对象模型。比如：弹出新的浏览器窗口、关闭浏览器窗口大小、提供用户屏幕分辨率详细信息的屏幕对象
DOM。document object model：文档对象类型。 DOM将把整个页面规划成由节点层级构成的文档。如html、head、title、body等

DOM

DOM概念

简单的说就是一个接口一个API。详细的说DOM是文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，它是一种与平台和语言无关的应用程序接口（API），它可以动态的访问程序的脚本，更新其内容、结构和www文档的风格（目前HTML和XML文档是通过说明部分来定义的）。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档。它要求在处理过程中整个文档都表示在存储器中。

DOM又称文档树模型，是一个对象。其下树枝有：

文档：一个网页可以称为一个文档
节点：网页中所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

文档里面所有的东西都是一个对象，都有属性和方法

DOM经常进行的操作

获取元素，也称获取对象，因为元素就是对象
对元素进行操作（设置其属性或调用其方法）
动态创建元素
事件（什么时候做相应的操作）

获取页面中的元素

为什么要获取页面中的元素？

例如：我们想要操作页面上的某部分（显示/隐式，动画），需要先获取到该部分对应的元素，才进行后续的操作。

根据id获取元素

var div = document.getElementById(‘main’);
console.log(div);
// 打印出来的div类型为HTMLDivElement，对象都是有类型的
console.dir(div);   	//.dir为打印对象，即打印出来的div为一个对象，可展开查看属性和方法
document是一个文档对象

get 获取 Element 元素 By 根据 Id 标示

如果页面上没有对应id，此时返回null

注意一：文档是从上到下执行的，若<script>标签放在head标签里，则文档先执行script，这时如果要获取id是获取不到的，因为文档还没执行到body标签。此时会返回null。

注意二：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方法，不推荐使用

根据标签名获取元素

var divs = document.getElementsByTagName('div');
console.log(divs.length);		
//注意若改script是在head里面，根据从上到下执行顺序，同样无法获取length长度，此时length长度为0
//但getElementsByTagName（）获取到的集合是一个动态集合，所以当执行完body
//若存在div标签，则此时的length长度会变为div标签的个数
获取到的divs集合的类型为HTMLCollection，是一个集合，类似数组，但不是数组，可以说是一个伪数组，同样可遍历，而divs中的每一个元素对象的类型为HTMLDivElement。
for (var i = 0; i < divs.length; i++){
console.log(divs[i] );	//返回的是每一个div标签
}
//divs中每一个元素都是对象，对象类型都是HTMLDivElement
注意：

document.getElementById();的document是不能变的。
document.getElementsByTagName(‘div’);的document是可以变的，可变为某个对象如id名，当有多个父div，父div下又有多个子div，但是我们只是想找某个父div下的子div，如果我们给每个父和子div都定义一个id，会显得很繁琐累赘。这时我们可以先用document.getElementById(‘’);来获取父div的id，然后再用父id名.getElementsByTagName(‘div’);来获取某个父div下的子div

根据标签的name属性获取元素

document.getElementsByName();

如 var divs = document.getElementsByName(‘main’);

但是在某些浏览器上会出现歧义，会把id的属性值和name的属性值混淆，即会把这两者都选出来，所以不推荐这种方式获取id

根据标签的class属性获取元素

document.getElementsByClassName(); //返回一个类似数组的对象，会有浏览器兼容性问题，IE9以后才支持，除了document来调用还可以用其他对象调用

根据选择器来获取元素

document.querySelector();	//非常灵活，但只能返回第一个匹配到的元素
//可以获取到所有匹配到的元素，并且返回一个类似数组的形式		query 查询， selector选择器
document.querySelectorAll();		
如：  var elements = document.querySelectorAll(‘.a’);	//以数组形式返回所有匹配到的元素
//二者都具有浏览器兼容性问题，IE8以后才支持

注册事件及应用

事件：当什么时候做什么事情，也可以理解为触发后得到一个响应

注册事件步骤：

此处以按钮响应为例讲解

第一步：获得按钮

获得按钮id var btn = document.getElementById(‘btn’);

第二步：给元素注册事件，如给按钮

btn.onclick = function () {

alert(‘别点我，疼’)；

}

当然不一定只有btn可以注册click事件，div等元素也拥有click事件

注册事件有三个要点：

事件名称：click 。并不是onClick（），click不是一个方法，而是一个事件名称，on意为当....;在.....

事件源：谁触发的事件click这一件事，这里是btn按钮触发的。

事件处理函数：事件触发后要做什么？这里的事件处理函数为function（）

案例之点击按钮切换图片

<body>
    <input type=”button” value=”点我” id=”btn”>
    <br />
    <img src =”images/a.jpg” id=”mv” alt=”” width=”400” height=”300”>

    <script>
    //获取元素
        var btn = document.getElementById(‘btn’);		
        var mv = document.getElementById(‘mv’);		
        //此处的mv为DOM对象里的，是一个mv对象，因此拥有属性和方法
        //也拥有标签images的所有属性如src、id、alt等，但也有例外

        //给按钮注册事件
        var flag = 1;	//当flag的值为1时对应a.jpg，当flag的值为2时，对应b.jpg图片
        btn.onclick = function () {
        //切换图片
        if (flag ===1) {
            mv.src = ‘images/a.jpg’;
            flag = 2;
            }else if (flag === 2) {
                mv.src = ‘images/b.jpg’;
                flag = 1;
            }
        }
    <script>
</body>

属性操作

一般在script标签里获得元素后的为对象，该对象存在于DOM对象中，而DOM是存在于内存中的，而标签是存在于页面中的，这时通过ById获得的对象拥有对应的标签的属性，因此在script里也可以访问标签的属性或修改标签的属性值

非表单元素的属性

有href、title、id、src、className

var link = document.getElementById(‘link’);		//获取a标签的id
//获取DOM对象link的属性值，注意此处的link对象的属性对应a标签所有的属性和值
console.log(link.id);
console.log(link.title);

//设置或修改DOM对象的属性和值
link.href = ‘http://www.google.com’;
link.title = ‘我是谷歌浏览器’;

案例二点击按钮显示和隐藏div同时按钮文字改变

<style>
    #box {   //div的背景颜色高宽省略  }
    .show {  display: block;  }
    .hidden{   display: none;   }
</style>
<body>	//一个input放按钮、id为btn、value为隐藏，一个div显示正方形 id为box
    <script>
        // 1.获取元素
        var btn = document.gerElementById(‘btn’);
        var isShow = true;
        //2.给按钮注册事件
        btn.onclick = function () {
            //3.控制div的显示和隐藏
            var box = document.getElementById(‘box’);
            if (isShow) {
                //为什么DOM对象的对应的标签class属性的名字叫做className？
                //因为class在js中是关键字，而关键字不可以作为变量或属性的名字
                box.className = ‘hidden’;	
                //此时修改了box的class名将对应css的样式display：none
                //如何设置按钮对应的元素的属性
                this.value = ‘显示’;
    			                    //复习以下this的几种情况：
                                    //普通函数中的this      指window
                                    //构造函数中的this		是当前的构造函数创建的对象
                                    //方法中的this			方法所属的对象
                                    //事件处理函数中的this	事件源，即谁调用的该事件就指向谁
                isShow = false;
                }else {
                    box.className = ‘show’;
                    this.value = ‘隐藏’；
                    isShow = true;
                }
            }
</script>
</body>

案例三点击图片有放大效果，并显示对应的图片文字

//style里的css样式省略
//body下的第一个div id=’imagegallery’,存放四个a标签，且每个a标签各添加一个<img>，
//并且a标签的href地址指向对应的img图片路径，title为各自img的title；
//body下还有一个img标签用来作占位符，用于显示点击图片放大后的图片；
//然后body下还有一个p标签用来显示放大后图片对应的title
<script>
    //1.获取到所有的a标签
    var imagegallery = document.getElementById(‘imagegallery’);
    var links = imagegallery.getElementByTagName(‘a’);
    //2.给所有的a标签注册事件，采用遍历
    for (var i = 0; i < links.length; i++){
        //先给所有的a标签赋值上对应的元素
        var link = links[i];
        link.onclick = function () {
        //4.切换图片，在函数里书写，因为是在鼠标点击的这一刻执行切换图片，而不是执行函数执行完后才切换图片
        //获取占位的大的img标签
        var image = document.getElementById(‘image’);
        //把img标签的src属性设置为当前点击的a标签的href
        image.src = link.href;
        //5.设置p标签里的内容为对应放大图片的title
        var des = document.gerElementById(‘des’);
        //在学p标签的时候，关于p标签显示内容的属性我们并不知道，这时可以通过console.dir(des);来查看，
        //用dir而不用log是因为dir专门用来打印对象的
        des.innerText = this.title;
        //3.取消a的默认行为，即点击后跳转到href页面的行为
        return false;	
    }
}
</script>

innerHTML、innerText、textContent

获取开始标签和结束标签之间的内容，所有标签都适用，如div、span、p等

innerHTML： 获取内容的时候，如果内容中有标签，就会把标签也获取到，即原封不动的把内容获取到

innerText：获取内容的时候，如果内容中有标签，就会把标签过滤调，即会把前后的换行和空白都去掉

两个都可以用来设置标签之间的内容：如 box.innerHTML = ‘’; 指清空该标签的内容

innerText和textContent作用一样，都是用来获取内部文本，只是浏览器兼容问题。谷歌、新版的火狐和新版的IE两个都支持，旧版的火狐只支持textContent，旧版的IE只支持innerText

兼容性处理
//如何知道浏览器是否支持元素的某个属性？可以用输出元素的属性来查看
var box = document.getElementById(‘box’);
//当属性不存在的时候返回的是undefined，存在的时候返回的是该属性的类型
console.log(typeof box.id);

//处理innerText的兼容性问题
function getInnerText(element) {
    //判断当前浏览器是否支持元素的innerText属性，即支持innerText适用element.innerText获取内容,
    //如果不支持innerText则使用element.textContent获取内容
    if (typeof element.innerText === ‘string’) {
        return element.innerText;
    }else {
        return element.textContent;
     }
}
var box = document.getInnerText(‘box’);
console.log(gerInnerText(box));

表单元素属性

value：用于大部分表单元素的内容的获取（option除外）

type：可以获取input标签的类型（输入框和复选框等）

disabled：禁用属性，如禁用文本框输入等

checked：复选框选中属性

selected：下拉菜单选中属性

当html中标签属性的属性值只有一个的时候，DOM中对应的元素的属性值是布尔类型，只有true和false，如以上disabled、checked和selected属性要特别注意

案例一之设置文本框的值并输出以|为分割线的各文本框的值

//body标签里有9个文本框，一个type为button其余八个input的type为text
//1.当页面加载完毕，给所有的文本框赋值
var inputs = document.getElementsByTagName(‘input’);	//获取所有input的标签
var array = [];
for (var i = 0; i < inputs.length; i++) {	//遍历标签将按钮的input去除
    var input = inputs[i];		
    //根据type属性，判断是否是文本框
    if (input.type === ‘text’) {
        input.value = i;
    }
}
//2.当点击按钮的时候，获取所有的文本框的值，并适用|分割输出的值
var btn = document.getElementById(‘btn’);
btn.onclik = function () {
    var array = [];
    for (var i =0; i < inputs.length; i++) {
        var input = inputs[i];
        //判断是否是文本框
        if (input.type === ‘text’) {
            array.push(input.value);
        }
    }
console.log(array.join(‘|’));
}

案例二检测用户名密码是否符合字数，不满足则改变文本框颜色以示警告

//body标签里有三个input，分别为用户名文本框、密码文本框、登陆按钮的input
var btnLogin = document.getElementById(‘btnLogin’);
btnLogin.onclick = function () {
    //检测用户名是否是3-6位，密码是否是6-8位
    var txtUserName = document.getElementById(‘txtUserName’);
    var txtUserPassword = document.getElementById(‘txtUserPassword’);

    //检测用户名是否是3-6位	，value为文本框的内容属性，类型为string，所以有length
    if(txtUserName.value.length < 3 || txtUserName.value.length > 6) {
        txtUserName.className = ‘bg’;	//这里若满足则要跳转到class为.bg的样式
        return;
    }else {
        txtUserName.className = ‘’;  //class名本身就为空，此处只是去掉文本框的颜色
        return;
    }
    //检测密码是否是6-8位
    if(txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
        txtUserPassword.className = ‘bg’;	//这里若满足则要跳转到class为.bg的样式
        return;
    }else {
        txtUserPassword.className = ‘’;  //class名本身就为空，此处只是去掉文本框的颜色
        return;
    }
    console.log(‘执行登陆’);
}

案例三之点击设置按钮随机选择下拉框的一个选项案例四之搜索文本框在输入内容时，提示字消失

//body里有一个select标签，该标签下有五个option标签，value值分别为1-5
//1.给按钮注册事件
var btnSet = document.getElementById(‘btnSet’);
btnSet.onclick = function () {
//2.获取下拉框中所有的option
var selCities = document.getElementById(‘selCities’);
var options = selCities.getElementByTagName(‘option’);
//3.随机生成索引
var randomIndex = parseInt(Math.random() * option.length);
//4.根据索引获取option，并让option选中
var option = options[randomIndex];
option.selected = ture;
}

案例四之搜索文本框在输入内容时，提示字消失

//body下有两个input，分别为文本框和按钮
//当文本框获得焦点，如果文本框里的内容是 请输入搜索关键字，清空文本框，并且让字体变为黑色
var txtSearch = document.getElementById(‘ txtSearch’);
//获得焦点也是一个事件，就像鼠标点击onclick一样,此处为focus
txtSearch.onfocus = function () {
    if (this.value === ‘请输入搜索关键字’) {
    this.value = ‘’;		//获得焦点时清空文本框的提示字
    this.className = ‘black’;		//设置样式为.black的样式
    }
}
//当文本框失去焦点，如果文本框里的内容为空，还原文本框里的文字，并且让字体变为灰色
//失去焦点的事件为blur
txtSearch.onblur = function () {
    //判断文本框中的内容为空可用if(this.value===’’),但是下面的方法更常用
    if(this.value.length === 0 || this.value ===’请输入搜索关键字’) {
        this.value = ‘请输入搜索关键字’;
        this.className = ‘gray’;		//调用样式为.gray的样式
    }
}

案例五之全选与反选

//获取父checkbox，注册点击事件
var j_tb = document.getElementById(‘j_tb’);
var inputs = j_tb.getElementByTagName(‘input’);
var j_cbAll = document.getElementById(‘j_cbA’);		//父checkbox
j_cbAll.onclick = function () {
    //找到所有子checkbox，让这些checkbox的状态与父checkbox的状态保持一致
    for(var i = 0; i <inputs.length; i++){
        var input = inputs[i];
        if(input.type === ‘checkbox’){
            //让子checkbox的选中状态与父checkbox的状态保持一致
            input.checked = this.checked;		//此处的checked是所有选项框的属性
        }
    }
}
//2.当点击子checkbox，如果所有的子checkbox都被选中了，让符的checkbox也选中，
//如果有一个checkbox没有被选中，父的checkbox也不被选中
//此处的循环，是遍历所有子checkbox，注册点击事件
for (var i =0;i < inputs.length; i++){
    var input = inputs[i];
    //判断是否是checkbox
    if (input.type !== ‘checkbox’) {
        //结束当前循环，继续下一次循环
        continue；
    }
    //给子checkbox注册点击事件
    input.onclick = function () {
    checkAllCheckBox();
    }
}
//判断父的checkbox的状态，封装成函数。不用返回值，因为目的是为了设置父的状态，
//参数暂时也不需要考虑
function checkAllCheckBox() {
    //假设所有的子checkbox都被选中
    var isAllChecked = true;
    //判断是否所有的子checkbox是否都被选中
    for(var i = 0; i < inputs.length; i++){
        var input = inputs[i];
        if (input.type !== ‘checkbox’) {
            continue;
        }
        //判断当前的所有checkbox是否都被选中
        if (!input.checked) {
            isAllChecked = false;
        }
    }
    //设置父的checkbox的状态
    j_cbAll.checked = isAllChecked;
}
//3.反选
//3.1给反选按钮btn注册点击事件
var btn = document.getElementById(‘btn’);
btn.onclick = function () {
    //3.2找到所有的子checkbox，让其反选
    for (var i = 0; i < inputs.length; i++){
        var input = inputs[i];
        //判断是否是chencbox
        if (input.type !== ‘checkbox’) {
            continue;
        }
        //让子checkbox反选
        input.checked = input.checked;
        //设置父的checkbox的状态
        checkAllCheckBox();
    }
}

自定义属性操作

除了各标签自带的一些属性外，我们也可以给标签自定义一些属性，如：

<div sex=”famale” age=”17” id=”No1”> 我是一个自定义属性的div </div>

但是要获得这些自定义的属性值时时要用getAttribute( );

首先还是要先获取id

然后console.log(No1.getAttribute(‘age’));

设置自定义属性用setAtrribute():

No1.setAttribute(‘age’, ‘23’); 两个参数，分别操作属性和值

移除自定义属性要用removeAtrribute():

No1.removeAttribute(‘age’);

上面的attribute其实也可以用于个标签自带的属性，但是不够方便

案例六之模拟DOM（文档树）结构

在HTML里其实存在文本节点和注释节点，如<body>1 <span>2 <p> 3</p>4</span>5</body>, body下其实有五个节点，可以用console.dir(body的id)查看body的节点。
模拟DOM对象下html、head、body、span层次，首先创建一些列具有相同属性的对象，即创建构造函数

function Node(options) {		//传入的参数为一个对象/函数
    if (options.className) {	
        //因为在DOM里如果一个属性没有属性值，默认为null而不是undefined，所有我们要用if来判断一下
        this.className = options.className;
    }else {
        this.className = ‘’;
     }
    //但是用if来判断那么多的属性会过于麻烦，所有换成了下面逻辑或||来判断
    this.className = options.className || ‘’;	//有这个属性则设置为className，没有则默认为 null
    this.id = options.id || ‘’;
    this.nodeName = options.nodeName || ‘’;//节点的名称，是的话则为标签的名称
    this.nodeType = options.nodeType || ‘1’;//节点的类型，元素节点为1，属性2，文本3
    this.nodeValue = options.nodeValue || null;//节点的值，如果是元素节点，始终未null
    this.children = options.children || [];	//即用来创建元素的 层次关系，如html、body
}
var html = new Node( {		//创建html节点
    nodeName: ‘html’;
});
var head = new Node({
    nodeName: ‘head’;
});
html.children.push(head);	//设置html中的字节的head
var body = new Node({
    nodeName: ‘body’;
});
html.children.push(body);		//设置html中的子节点body
    console.dir(html);		//在运行的时候，浏览器内部维护了一颗DOM树，即自身创建了树模型
    //在这颗树里我们要深刻理解DOM；了解节点的相关属性如nodeName、nodeType、nodeValue；
    //了解节点的层次关系

节点

父子结构：parentNode 父节点（只有一个） childNodes 子节点（有很多个，空白也是节点叫text节点，注释comment也是节点）

children 子元素（注意：注释comment也是一个子元素）

有没有能够直接获取子元素的属性？ children，获取到的是所有的子元素

nodeType 节点类型

元素节点、2.属性节点、3.文本节点（即空白区域）

nodeName 节点的名称（标签名称） nodeValue 节点值（元素节点的nodeValue始终是null）

如何获取第一个子标签和最后一个子标签？子元素呢？

如 box.firstChild 为获取第一个子节点，但空白区域也是一个text节点，所以不可取。

box.firstElementChild 获取第一个子元素，但有兼容性问题，IE9以后才支持，以前的可能会包含注释comment子元素

同理有lastChild、lastElementChild

处理关于element兼容性问题示例：

function getFirstElementChild(element){

var node,nodes = element.childNodes,i = 0;

while (node = nodes[i++]) {

if (node.nodeType === 1){

return node;

}

}

return null;

}

案例点击菜单后高亮显示所点选项并显示选项下的所有主体内容？

<div id = “menu”> <ul><li class=”current”><a href=”javascript:void(0)”>首页</a></li>...(省略n个li标签及a标签)...</ul></div>
<script>
var menu = document.getElementById(‘menu’);
var ul = getFirstElementChild(‘menu’);	//获取menu中的ul
for (var i = 0; i < ul.children.length; i++){
    var li = ul.children[i];
    var link = getFirstElementChild(li);		//获取li中的a标签
    link.onclick = linkClick;	//注意：此时是把函数赋给onclick而不是函数的调用
}
function linkClick() {
    for(var i =0; i < ul.children.length; i++){		//所有的li取消高亮显示
    var li = ul.children[i];
    li.className = ‘’;
}
this.parentNode.className = ‘current’;		//让当前a所处的的li高亮显示，this是当前点击的a标签对应的元素

return false;			//取消后续内容的执行
}
<div id = “menu”> <ul><li class=”current”><a href=”javascript:void(0)”>首页</a></li>...(省略n个li标签及a标签)...</ul></div>

<script>

var menu = document.getElementById(‘menu’);

var ul = getFirstElementChild(‘menu’); //获取menu中的ul

for (var i = 0; i < ul.children.length; i++){

var li = ul.children[i];

var link = getFirstElementChild(li); //获取li中的a标签

link.onclick = linkClick; //注意：此时是把函数赋给onclick而不是函数的调用

}

function linkClick() {

for(var i =0; i < ul.children.length; i++){ //所有的li取消高亮显示

var li = ul.children[i];

li.className = ‘’;

}

this.parentNode.className = ‘current’; //让当前a所处的的li高亮显示，this是当前点击的a标签对应的元素

return false; //取消后续内容的执行

}

兄弟节点

nextSibling 下一个兄弟节点 previousSibling 上一个兄弟节点

nextElementSibling下一个兄弟元素 previousElementSibling 上一个兄弟元素

动态创建元素

有三种方式：

带括号的是方法，不带括号的是属性。效率方面innerHTML是秒级别，不够快

document.write(); 不常用 document.write(‘Hello <p>World</p>’); 当使用这种方式时，输出的hello world会把之前整个页面的内容覆盖调
document.createElement()。创建完元素接着还要注册事件，创建复杂结构如表格推荐用这个。重点掌握，创建完元素后，添加到页面上用appendChild（），移除元素用removeChild（）。元素操作的方法还有insertBefore（）；和replaceChild（）。
element.innerHTML box.innerHTML = ‘Hello <p>World</p>’; 在原页面上显示，不会覆盖，只是添加标签如div、p推荐用这个。

如案例：点击按钮生成列表
//模拟数据
var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
var btn = document.getElementById('btn');
btn.onclick = function () {
    //动态创建ul，内存中创建对象
    var ul = document.createElement('ul');
    /把ul放到页面上，把ul放到DOM树上，并且会重新绘制
    box.appendChild(ul);

    for (var i = 0; i < datas.length; i++){
        var data = datas[i];
        //在内存中动态创建li
        var li = document.createElement('li');
        //把li添加到DOM树，并且会重新绘制
        ul.appendChild(li);
        //设置li中显示的内容
        li.innerText = data;
    }
}

动态创建表格

script中创建表格table元素

var table = document.createElement('table');    //创建表格元素
box.appendChile(table);    //box为div的id，指把table标签放到div下
var thead = document.createElement('thread');
table.appendChild(thread);    //将thread标签创建到table下
var tr = document.createElement('tr');
thread.appendChild(tr);    //将tr标签创建到thead下
var th = document.createElement('th');
tr.appendChild(th);    //将th标签创建到tr下

setInnerText(th, '姓名');    //在th行的第一格设置为姓名

th = document.createElement('th');
tr.appendChild(th);    //将th标签创建到tr下
setInnerText(th, '科目');    //在th行的第二格设置为科目

案例选择水果

var all = document.getElementById('all');
var select = document.getElementById('select');
var btn = document.getElementById('btn');

//全部xuanze
btn.onclick = function () {
    var len = all.children.length;
    for (var i = 0; i < len; i++){    //len的值保持不变是因为children这个数组是动态变化的
        var option = all.children[0];
        select.appendChild(option);
    }
}

//选中移动的水果
var btn3 = document.getElementById('btn3');    //btn3为将选中的水果移到另一边
    //找到所有选中的option
    var array = [];
    for ( var i = 0; i < all.chileren.length; i++){
        var option = all.children[i];
        if (option.selected) {
            array.push(option);
            //去掉当前option的选中效果
            option.selected = false;
        }
        //把数组中的option移动到第二个select中
        for (var i = 0; i < array.length; i++) {
            var option = array[i];
            select.appendChild(option);
        }
    }