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">
    // 一、获取事件源
    var div = document.getElementById("box1");
    // 二、绑定事件
    div.onclick = function () {
        // 三、书写事件驱动程序
        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="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>

</body>
</html>

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