DOM

DOM树（一切皆是节点）

 

 

上图可知，在HTML当中，一切都是节点：（非常重要）

 

常用事件如下：

 

绑定事件的方式

直接绑定匿名函数

 var oDiv = document.getElementById("box");
    //绑定事件的第一种方式
    oDiv.onclick = function () {
        alert("我是弹出的内容");
    };

先单独定义函数，再绑定

 var oDiv = document.getElementById("box");
    //绑定事件的第二种方式
    oDiv.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    };

注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值。

行内绑定

<!--行内绑定-->
<div id="box" οnclick="fn()"></div>

<script type="text/javascript">

function fn() {
        alert("我是弹出的内容");
    }

</script>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

JavaScript入口函数 window.onload()

此函数调用，是当页面加载完毕(文档和图片)的时候，触发onload()函数，文档先加载，图片资源后加载

<script type="text/javascript">
    window.onload = function () {
        console.log("alex");  //等页面加载完毕时，打印字符串
    }
</script>

首先，大家明确一点，你是要操作文档对象了，要遵循事件三步走

值的操作

所谓值的操作，就是对前闭合标签和后闭合标签中间的文本内容的设置和获取。

<div id='box'></div>
<input type='text' value = 'alex' id='user'>
<script>
    window.onload = function(){
        //1.获取事件源(事件对象，在文档中一切的标签都是对象)
        var oDiv = docuement.getElementById('box');
         var oInput = docuement.getElementById('user');
        //2.事件
        oDiv.onclick = function(){
            //3.事件驱动程序 
            oDiv.innerText = 'alex'；//仅仅设置文本内容
            oDiv.innerHTML = '<h1>alex</h1>';//将标签和文本内容一起解析
        };

//2.事件
        oInput.onclick = function(){
            //3.事件驱动程序   只有有value属性的 才能使用value赋值和设置值
            oInput.value = 'wusir'；
        }
    };

</script>

标签属性操作

所谓标签属性,就是对标签中（字面上看到的）属性的操作。比如像每个标签中id，class，title、img

标签的src属性和alt属性、a标签的href属性、input标签中的name、type属性等等

<script>
        //window.onload页面加载完毕以后再执行此代码
        window.onload = function () {
            //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
            //步骤：
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序

//1.获取事件源
            var oImg = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            oImg.onmouseover = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd2.png";
//                this.src = "image/jd2.png";
            }

//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            oImg.onmouseout = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd1.png";
            }
        }
    </script>

节点的操作

• 双闭合标签： innerText或者innerHTML
• 单闭合标签：除了img标签，就剩input了，使用value进行赋值
• 获取事件源
• 事件
• 事件驱动程序
• 元素节点：HMTL标签。
• 文本节点：标签中的文字（比如标签之间的空格、换行）
• 属性节点：：标签的属性