DOM的介绍

一 . DOM 介绍

　　什么是DOM

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的

　　解析过程

　HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性.

　　DOM 数(一切都是节点)

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

• 元素节点：HMTL标签。

• 文本节点：标签中的文字（比如标签之间的空格、换行）

• 属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

　　DOM可以做什么

　　　 ● 找对象(元素节点)

　　　　● 设置元素的属性值

　　　　● 设置元素的样式

　　　　● 动态创建和删除元素

　　　　● 事件的触发响应: 事件源 , 事件 , 事件的驱动程序

　　DOM节点的获取

DOM节点的获取方式其实就是 获取事件源的方式.

操作元素节点,必须首先找到该节点,有三种方式获取DOM节点 :

    <div id="box1" class="box"></div>
    <script>
        //方法一 : 通过 id 获取单个标签
        var div1 = document.getElementById("box1");
        // 方法二 : 通过 标签名 获取标签数组 ,有 s
        var arr1 = document.getElementsByTagName("div");
        // 方法三 : 通过 类名 获取标签数组,所以有 s
        var arr2 = document.getElementsByClassName("box");

    </script>

因为 方法二 / 方法三 获取的是标签数组,那么要先遍历之后再使用.

　　特殊情况 : 数组中的值只有1个 , 即使如此,这个值也是包在数组里的,所以这个值获取方法 :

<div id="box1" class="box"></div>

// 获取数组中的第一个元素
var arr1 = document.getElementsByTagName("div")[0];

//获取数组中的第一个元素
var arr2 = document.getElementsByClassName("box")[0];
        

<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>

局部查找

　　DOM访问关系的获取

DOM的节点并不是孤独的,因此可以通过DOM节点之间的相对关系对他们进行访问.如下 :

节点的访问关系,是以属性的方式存在的.

JS中的 父子兄 访问关系 :

  

节点树种的节点彼此拥有层级的关系 :

父(parent),子(child),兄(sibling) 等来描述这些关系.父节点拥有子节点.同级的子节点被称为同胞(兄弟或者姐妹).

　　获取父节点

调用者就是节点.一个节点只有一个父节点.调用方法 :

    <div id="father">
        <div id="laoda"></div>
        <div id="laoer"></div>
    </div>
    <script>

        var oLaoda = document.getElementById('father');
                var.a = oLoda.parentNode  // 获取父节点

    </script>

 节点.parentNode                   // 调用父节点

 nextsibling                          // 下一个节点(包括标签/空文档/换行节点)
nextElementsibling              // 下一个元素节点(标签)

综合属性 :
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

previousSibling                   // 前一个节点(包括标签/空文档/换行节点)
previousElementSibling       // 前一个元素节点(标签)

综合节点 :
 前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

节点自己.parentNode.children[index];  //随意得到兄弟节点

firstChild                          // 第一个子元素节点(标签)
firstElementChild              //第一个子元素节点(标签)

lastChild / lastElementChild    //最后一个子元素节点

children / childNodes        // 获取所以的子节点
*****
子节点数组 = 父节点.children;   //获取所有节点。用的最多。

注意 : nodeType ==1 表示的是元素节点(标签) . 元素就是标签 

　　★★★★★★  DOM 节点的操作                 

       节点的访问关系都是属性

　　节点的操作都是属性(方法)

        创建节点      

格式如下 :

新的标签(元素节点) = document.createElement("标签名");

//例如 : 

var tag = document.creatElement("input");
    tag.setAttribute("type","text");

示例 : 比如我们要创建一个一个 li 标签,或者是创建一个不存在的 abcd 标签:

    <script type="text/javascript">
        var a1 = document.createElement("li");
        var a2 = document.createElement("abcd");

        console.log(a1);
        console.log(a2);

        console.log(typeof a1);
        console.log(typeof a2);

    </script>

结果 :

插入节点

插入节点的方式有两种,分别有不同的含义 :

方式一 :

父节点.appendChild(新的子节点);

// 父节点的最后插入一个新的子节点

方式二 :

父节点.insertBrfore(新的子节点,作为参考的子节点);

// 在参考点钱插入一个新的节点
// 如果参考节点为 null(空),那么他将在父节点最后插入一个子节点

删除节点

父节点.removeChild(子节点);

// 用父节点删除子节点,必须要指定删除那个子节点

如果想删除自己这个节点 :

node1.parentNode.ramoveChild(node1);

复制节点(克隆节点)

要复制的节点.cloneNode();

要复制的节点.cloneNode(true);

括号内带不带参数,效果是不一样的 :

　　　　不带参数 / 带参数 false : 值复制节点本身,不复制子节点.

　　　　带参数 true : 即复制节点本身,也复制其所有的子节点.

替换节点

父节点.replaceChild(newnode,某个节点)

节点属性操作

　　1. 获取本节点的值 : innerText    innerHTML

　　2. attribute 操作

     elementNode(元素节点).setAttribute(name(属性名),value(新的属性值)) //设置节点属性值    

     elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

     elementNode.removeAttribute(“属性名”);      //删除节点属性

　　3 . value 获取当前选择的value值

　　　　1 . input

　　　　2 . select (selectedindex)

　　　　3 . textarea

　　4 . innerHTML 给节点添加 html 代码 :

　　　　该方法不是 w3c 的标准, 但是主流浏览器支持

　　　　tag.innerHTML = "<p>要显示的内容</p>";

　　5 . 关于 class 操作　　　　

elementNode.className
elementNode.classList.add
elementNode.classList.remove

　　6 . 改变 css 样式 :

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

二 .   关于DOM的事件操作

　　JavaScript的组成

　　JavaScript 基础分成三部分 :

　　　　(1) . ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

　　　　(2) . DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

　　　　(3) . BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

　　事件

JS是以事件驱动为核心的一门语言。

　　事件三要素                         　　

事件的三要素：事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。

再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下：

• 事件源：引发后续事件的html标签。

• 事件：js已经定义好了（见下图）。

• 事件驱动程序：对样式和html的操作。也就是DOM。

代码书写步骤如下：（重要）

• （1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

• （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };

• （3）书写事件驱动程序：关于DOM的操作

代码举例：

<body>
<div id="box1"></div>

<script type="text/javascript">
    // 1、获取事件源
    var div = document.getElementById("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>

</body>

　　事件类型

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

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

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

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

　　针对事件的三要素

1. 获取事件源 的方式(DOM节点的获取)

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

2 . 绑定事件的方式 :

　　　方式一 : 直接绑定匿名函数

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

　　    方式二 : 先单独定义函数,在绑定

 <div id="box1" ></div>

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

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

方式 三 : 行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

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

</script>

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

3 . 事件驱动程序 : 　　　　

  <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;      //把鼠标变成小手的模样
        }
    </style>
</head>

<body>

<div id="box" ></div>

<script type="text/javascript">
    var oDiv = document.getElementById("box");
    //点击鼠标时，原本粉色的div变大了，背景变红了
    oDiv.onclick = function () {
        oDiv.style.width = "200px";   //属性值要写引号
        oDiv.style.height = "200px";
        oDiv.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-Color
    }
</script>　　

　　上方代码的注意事项：

• 在js里写属性值时，要用引号
• 在js里写属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

　　onload 事件

　　当页面加载（文本和图片）完毕的时候，触发onload事件。

　　举例：

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

　　有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

　　建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

示例 :  当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。

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

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

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

    <img id="box" src="data:image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>

</body>
</html>

DOM操作的相关案例--->>>>■■■■■