前端入门之——javascript day8 DOM对象(DHTML)

DOM对象(DHTML)

7.1 什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM？－－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

7.2 DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

节点(自身)属性:

attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS-节点属性</title>
</head>
<body>
<h1>节点属性</h1>
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：<br/>

1. nodeName : 节点的名称<br/>

2. nodeValue ：节点的值<br/>

3. nodeType ：节点的类型<br/>

一、nodeName 属性: 节点的名称，是只读的。<br/>

1. 元素节点的 nodeName 与标签名相同<br/>
2. 属性节点的 nodeName 是属性的名称<br/>
3. 文本节点的 nodeName 永远是 #text<br/>
4. 文档节点的 nodeName 永远是 #document<br/>

二、nodeValue 属性：节点的值<br/>

1. 元素节点的 nodeValue 是 undefined 或 null<br/>
2. 文本节点的 nodeValue 是文本自身<br/>
3. 属性节点的 nodeValue 是属性的值<br/>

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:<br/>

元素类型 节点类型<br/>
！元素 1<br/>
属性 2<br/>
！文本 3&nbsp;空格也是返回3<br/>
注释 8<br/>
文档 9<br/>
<h1>注意空格！！！！</h1>
<hr color="red" />
<h1>实验</h1>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li> 
</ul>
<script type="text/javascript">
var m = document.getElementsByTagName("li");
for(var i=0;i<m.length;i++){
// document.write(m[i].nodeType);
switch(m[i].nodeType){
case 1:
document.write("1:li节点的类型—【元素】—<br/>");
break;
case 2:
document.write("1:li节点的类型—【属性】—<br/>");
break;
case 3:
document.write("1:li节点的类型—【文本】—<br/>");
break;
case 8:
document.write("1:li节点的类型—【注释】—<br/>");
break;
case 9:
document.write("1:li节点的类型—【文档】—<br/>");
break;
}

document.write("2:li里边的文本内容——"+m[i].nodeValue+"<br/>");
document.write("3：li节点的名称——"+m[i].nodeName+"<br/>");
document.write("<hr/>");
}

</script>
</body>
</html>

（开始很生疏，不想看的知识点，后来DOM中用的特别多，才发现很重要。还有几个点，是比较容易忽略的，值得注意！）

导航属性:

parentNode - 节点（元素）的父节点 (推荐)
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点（元素）的子节点

注意：

<div id="div1">
    <div id="div2"></div>
    <p>hello yuan</p>
</div>

<script>
    var div=document.getElementById("div2");

    console.log(div.nextSibling.nodeName);  //思考:为什么不是P?
</script>

　　推荐导航属性：

parentElement              // 父节点标签元素

children                        // 所有子标签
  
firstElementChild          // 第一个子标签元素

lastElementChild           // 最后一个子标签元素

nextElementtSibling       // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

节点树中的节点彼此拥有层级关系。

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

页面查找：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法
通过使用 getElementsByName() 方法

局部查找：

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

 //Elements  s表示 这种属性是可以重复的，需要用所有号来取
    // var ele=document.getElementsByClassName("div2")[0]
    // var ele2=ele.nextElementSibling;
    // alert(ele2.nodeName)


    // var tag=document.getElementsByTagName("p")[0];
    // alert(tag.innerHTML)

    //通过 name 属性查找
    // var Name=document.getElementsByName("niubi")[0];
    // alert(Name.innerHTML)
    // for (var i in Name){
    //     console.log(Name[i].innerHTML)
    // }

    var ele3=document.getElementsByClassName("div3")[0];
    var ele3sub=ele3.getElementsByTagName("p")[0];
    alert(ele3sub.innerHTML)

全局查找和局部查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">hello
    <div class="div2">hello2</div>
    <div class="div3" name="niubi">hello3
        <p>hello inner</p>
        <p id="ppp">hello ppppp</p>
        <p name="niubi">hello ppppp</p>
    </div>
    <p>p  1111</p>
</div>
<script>

    //Elements  s表示 这种属性是可以重复的，需要用所有号来取
    // var ele=document.getElementsByClassName("div2")[0]
    // var ele2=ele.nextElementSibling;
    // alert(ele2.nodeName)


    // var tag=document.getElementsByTagName("p")[0];
    // alert(tag.innerHTML)

    //通过 name 属性查找
    // var Name=document.getElementsByName("niubi")[0];
    // alert(Name.innerHTML)
    // for (var i in Name){
    //     console.log(Name[i].innerHTML)
    // }

    var ele3=document.getElementsByClassName("div3")[0];
    // var ele3sub=ele3.getElementsByTagName("p")[0];
    // alert(ele3sub.innerHTML)
    // var ele= ele3.getElementById("ppp");
    // alert(ele.innerHTML);//不支持id 的局部查找。


    // var Nane=ele3.getElementsByName("niubi")
    // alert(Nane)//不支持name 的局部查找。


</script>
</body>
</html>

View Code

7.3 HTML DOM Event(事件)

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击。

两种为元素附加事件属性的方式

<div onclick="alert(123)">点我呀</div>
<p id="abc">试一试!</p>

<script>
    var ele=document.getElementById("abc");


    ele.onclick=function(){
        alert("hi");
    };

</script>

View Code

注意：

<div id="abc" onclick="func1(this)">事件绑定方式1</div>
<div id="id123">事件绑定方式2</div>
<script>
    function func1(self){
        console.log(self.id)
    }

    //jquery下是$(self), 这种方式this参数必须填写;

//------------------------------------------
    var ele=document.getElementById("id123").onclick=function(){
         console.log(this.id);
        //jquery下是$(this), 这种方式不需要this参数;
    }
    
</script>

View Code

onload：

onload 属性开发中只给 body元素加.
这个属性的触发标志着页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
//          window.onload=function(){
//               var ele=document.getElementById("ppp");
//               ele.onclick=function(){
//                alert(123)
//            };
//          };



          function fun1() {
              var ele=document.getElementById("ppp");
               ele.onclick=function(){
                alert(123)
            };
          }

    </script>
</head>
<body onload="fun1()">

<p id="ppp">hello p</p>

</body>
</html>

View Code

onsubmit:

是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<form id="form">
            <input type="text"/>
            <input type="submit" value="点我!" />
</form>

<script type="text/javascript">
            //阻止表单提交方式1().
            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.

            var ele=document.getElementById("form");
            ele.onsubmit=function(event) {
//                alert("验证失败 表单不会提交!");
//                return false;
                
            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
             alert("验证失败 表单不会提交!");
             event.preventDefault();

    }

View Code

HTML DOM onsubmit 事件句柄

定义和用法

在提交表单时调用的事件句柄。 form.onsubmit

说明

Form 对象的 onsubmit 属性指定了一个事件句柄函数。当用户单击了表单中的 Submit 按钮而提交一个表单时，就会调用这个事件句柄函数。注意，当调用方法Form.submit() 时，该处理器函数不会被调用。

如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。

提示和注释

提示：由于 onsubmit 句柄可以取消表单的提交，所以它对于进行表单验证是十分理想的。

一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form onsubmit="return f1()">
    <input type="text" name="usernaem">
    <input type="submit" value="点我">
</form>
<script>
    function f1() {
        alert("验证失败");
        return false;
    }
</script>
</body>
</html>

View Code

二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form" >
    <input type="text" name="usernaem">
    <input type="submit" value="点我">
</form>
<script>
    
    var ele=document.getElementById("form");
     ele.onsubmit=function() {
         alert("验证失败");
        return false;
    }

</script>
</body>
</html>

View Code

三种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form" onsubmit="return f1(event)">
    <input type="text" name="usernaem">
    <input type="submit" value="点我">
</form>
<script>
        function f1(event) {
        event.preventDefault()
    }
</script>
</body>
</html>

View Code

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

思考：onclick＝function(event){};这个方法是谁调用的？

事件传播：

<div id="abc_1" style="border:1px solid red;300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;200px;height:200px;">
        
        </div>
    </div>
    <script type="text/javascript">
    document.getElementById("abc_1").onclick=function(){
        alert('111');
    }
    document.getElementById("abc_2").onclick=function(event){
        alert('222');
        event.stopPropagation(); //阻止事件向外层div传播.
    }
    
</script>

View Code

7.4 增删改查演示

7.4.1 node的CURD：

增:

createElement(name)创建元素
appendChild();将元素添加

　　删:

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

　　改:

第一种方式:

使用上面增和删结合完成修改

第二中方式:

使用setAttribute();方法修改属性

<!DOCTYPE html>
<html>
<body>

<input value="OK">

<p id="demo">点击按钮来设置按钮的 type 属性。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 
}
</script>

<p>Internet Explorer 8 以及更早的版本不支持此方法。</p>

</body>
</html>

View Code

使用innerHTML属性修改元素的内容

查: 使用之前介绍的方法.

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀 
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部
    
    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
    
    
</script>

7.4.2 修改 HTML DOM

改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ，innerText。

改变 CSS 样式

<p id="id1">nihao,hello p</p>
        
<script>
    var ele=document.getElementById("id1").style
    ele.color="red"
    ele.fontSize="40px";
</script>

改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

创建新的 HTML 元素

createElement(name)

删除已有的 HTML 元素

elementNode.removeChild(node)

关于class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove

8 实例练习

1 搜索框

<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">


<script>

function Focus(){

    var input=document.getElementById("ID1");
    if (input.value=="请输入用户名"){
        input.value="";
    }

};

function Blurs(){

    var ele=document.getElementById("ID1");
    var val=ele.value;
    if(!val.trim()){

        ele.value="请输入用户名";
    }
}

</script>

View Code

2 模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
             200px;
            background-color: gold;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action('show')">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action('hide')">
</div>

<script>

    function action(act){
        var ele=document.getElementsByClassName("shade")[0];
        var ele2=document.getElementsByClassName("models")[0];
        if(act=="show"){
              ele.classList.remove("hide");
              ele2.classList.remove("hide");
        }else {
              ele.classList.add("hide");
              ele2.classList.add("hide");
        }

    }
</script>
</body>
</html>

View Code

3 全选反选取消

<button onclick="select('all');">全选</button>
     <button onclick="select('cancel');">取消</button>
     <button onclick="select('reverse');">反选</button>

     <table border="1" id="Table">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>


<script>
    function select(choice){
        var ele=document.getElementById("Table");

        var inputs=ele.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i=i+1){

                   var ele2=inputs[i];
            if (choice=="all"){
                ele2.checked=true;

            }else if(choice=="cancel"){
                ele2.checked=false;
            }
            else {

                if (ele2.checked){
                    ele2.checked=false;
                }else {
                    ele2.checked=true;
                }
            }

            }
    }
</script>

View Code

4 两级联动

<select id="province">
    <option>请选择省:</option>
</select>

<select id="city">
    <option>请选择市:</option>
</select>


<script>
    data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};


      var p=document.getElementById("province");
      var c=document.getElementById("city");
    
    for(var i in data){
        var option_pro=document.createElement("option");

        option_pro.innerHTML=i;

        p.appendChild(option_pro);
    }
     p.onchange=function(){

            pro=(this.options[this.selectedIndex]).innerHTML;
            citys=data[pro];

         c.options.length=0;

         for (var i in citys){
             var option_city=document.createElement("option");
             option_city.innerHTML=citys[i];
             c.appendChild(option_city);
         }

        }
</script>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province" onchange="fun(this)">
    <!--<option>请选择省份</option>-->
    <!--<option value="jiangsu">江苏</option>-->
    <!--<option value="shandong">山东</option>-->
    <!--<option value="zhejiang">浙江</option>-->

</select>
<select id="city">
    <!--<option>请选择城市</option>-->
</select>


<script>
    var data={"江苏":["南京","常州","苏州"],"山东":["济南","潍坊"],"浙江":["金华","杭州"]};
    var pro=document.getElementById("province");
    var pro_cit=document.getElementById("city");
    for(var i in data){
        var option_pro=document.createElement("option");
        option_pro.innerHTML=i;
        // option_pro.setAttribute("value",i)
        pro.appendChild(option_pro)
    }
    function fun(self) {
        // self.selectedIndex  //拿到select标签的索引值
        // alert(self.options)
        // console.log((self.options[self.selectedIndex]).innerHTML)
        // var pro_cit=document.getElementById("city");

        //第一种 遍历删除
        // var options_c=pro_cit.children;
        // // console.log(options_c[0])
        // // console.log(options_c.length)
        //
        //     for(var j=0;j< options_c.length;j++){
        //         pro_cit.removeChild(options_c[j])
        //         j--;//如果你删了索引0上面的标签后，之前索引1上面的对象就会占据索引0的位置。
        //     }
        //第二种方法，直接清空数组。
        // pro_cit.options.length=0;

        //第三种
        pro_cit.innerHTML=""


        // console.log(options_c.length)
        // for(var j in options_c.length){
        //     // pro_cit.removeChild(options_c[j])
        //     console.log(j)
        // }

        var choice=(self.options[self.selectedIndex]).innerHTML;
        // console.log(choice)
        for (var i in data[choice]){
            var option_city=document.createElement("option");
            option_city.innerHTML=data[choice][i];
            pro_cit.appendChild(option_city)
        }
    }

</script>
</body>
</html>

View Code

5 select左右移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box_l,#choice,#box_r{
            display: inline-block;
        }
        select{
             58px;
            height: 198px;
        }

    </style>
</head>
<body>
<div id="box_l">
    <select id="left" multiple size="10">
        <option>项目一</option>
        <option>项目二</option>
        <option>项目三</option>
        <option>项目四</option>
        <option>项目五</option>
        <option>项目六</option>
    </select>
</div>

<div id="choice">
    <input type="button" value="---->" onclick="add()"><br/>
    <input type="button" value="====>" onclick="addall()"><br/>
    <input type="button" value="<----" onclick="redu()"><br/>
    <input type="button" value="<====" onclick="reduall()">

</div>
<div id="box_r">
    <select id="right" multiple size="10">
        <!--<option>项目七</option>-->
    </select>
</div>
<script>
     var right=document.getElementById("right");
     var left=document.getElementById("left")
    function add() {
        var options=left.children;

        for (var i=0; i<options.length;i++){
             if(options[i].selected==true){
                 right.appendChild(options[i]);
                 i--;
             }
        }
    }
    function addall() {
    var options=left.children;

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

             right.appendChild(options[i]);
             i--;

        }
    }
    function reduall() {
    var options=right.children;

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

             left.appendChild(options[i]);
             i--;
        }
    }
    function redu() {
        var options=right.children;

        for (var i=0; i<options.length;i++){
             if(options[i].selected==true){
                 left.appendChild(options[i]);
                 i--;
             }
        }
    }


</script>
</body>
</html>

View Code

<div id="box1">
    <select multiple="multiple" size="10" id="left">
        <option>book</option>
        <option>book2</option>
        <option>book3</option>
        <option>book4</option>
        <option>book5</option>
        <option>book6</option>
    </select>
</div>


<div id="choice">
    <input class="add"     type="button" value="--->" onclick="add()"><br>
    <input class="remove"  type="button" value="<---" onclick="remove();"><br>
    <input class="add-all" type="button" value="====>" onclick="ADDall()"><br>
    <input class="remove-all" type="button" value="<===" onclick="remall()">
</div>


<div>
    <select multiple="multiple" size="10" id="right">
        <option>book9</option>
    </select>
</div>

<script>

     function add(){
         var right=document.getElementById("right");
         var options=document.getElementById("left").getElementsByTagName("option");

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

             var option=options[i];

             if(option.selected==true){
                   right.appendChild(option);
                 i--;
             }

         }

     }

    function ADDall(){
         var right=document.getElementById("right");
         var options=document.getElementById("left").getElementsByTagName("option");
         for (var i=0; i<options.length;i++){
             var option=options[i];
             right.appendChild(option);
             i--;

         }

     }

</script>

View Code

JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9 <p>你好世界!</p>
10 <div id="main">
11      <p> DOM 是非常有用的。</p>
12      <p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
13 </div>
14 <script>
15 var x=document.getElementById("main");
16 var y=x.getElementsByTagName("p");
17 document.write('id="main"元素中的第一个段落为：' + y[1].innerHTML);
18 </script>
19 
20 </body>
21 </html>

View Code

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p class="intro">你好世界!</p>
<p class="intro">该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>

View Code

JavaScript HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Wed Sep 12 2018 16:58:26 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

	绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

　　本例改变了 <img> 元素的 src 属性：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9 <img id="image" src="smiley.gif" width="160" height="120" onclick="f1()">
10 <script>
11     function f1(){
12 document.getElementById("image").src="landscape.jpg";}
13 </script>
14 <p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
15 
16 </body>
17 </html>

View Code

实例讲解：

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

JavaScript HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

　　下面的例子会改变 <p> 元素的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

使用事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

元素被点击。
页面加载完成。
输入框被修改。
……

在接下来的章节，你会学到更多关于事件的知识。

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

Visibility 如何使元素不可见。您希望元素显示或消失吗？

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

　　本例从事件处理器调用一个函数：

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

实例

向 button 元素分配 onclick 事件：

<button onclick="displayDate()">点这里</button>

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <head>
 8 </head>
 9 <body>
10 
11 <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
12 <button id="myBtn">点这里</button>
13 <script>
14 document.getElementById("myBtn").onclick=function(){displayDate()};
15 function displayDate(){
16     document.getElementById("demo").innerHTML=Date();
17 }
18 </script>
19 <p id="demo"></p>
20 
21 </body>
22 </html>

将onclick 事件分配给按钮

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
    
</body>
</html>

View Code

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

View Code

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;120px;height:20px;padding:40px;">Mouse</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

View Code

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

JavaScript HTML DOM EventListener

addEventListener() 方法

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9 <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
10 <button id="myBtn">点我</button>
11 <p id="demo"></p>
12 <script>
13 document.getElementById("myBtn").addEventListener("click", displayDate);
14 function displayDate() {
15     document.getElementById("demo").innerHTML = Date();
16 }
17 </script>
18 
19 </body>
20 </html>

该实例使用 addEventListener() 方法在按钮中添加点击事件。

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

前端入门之——javascript day8 DOM对象(DHTML)

DOM对象(DHTML)

7.1 什么是 DOM？

7.2 DOM 节点

7.3 HTML DOM Event(事件)

HTML DOM onsubmit 事件句柄

定义和用法

说明

提示和注释

7.4 增删改查演示

7.4.1 node的CURD：

7.4.2 修改 HTML DOM

8 实例练习

1 搜索框

2 模态对话框

3 全选反选取消

4 两级联动

5 select左右移

JavaScript HTML DOM

HTML DOM (文档对象模型)

HTML DOM 树

查找 HTML 元素

通过 id 查找 HTML 元素

通过标签名查找 HTML 元素

通过类名找到 HTML 元素

JavaScript HTML DOM - 改变 HTML

改变 HTML 输出流

改变 HTML 内容

改变 HTML 属性

JavaScript HTML DOM - 改变CSS

改变 HTML 样式

使用事件

JavaScript HTML DOM 事件

对事件做出反应

HTML 事件属性

实例

使用 HTML DOM 来分配事件

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

更多实例

JavaScript HTML DOM EventListener

addEventListener() 方法