Javascript—DOM

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 元素的对象和属性，以及访问它们的方法。

2、DOM节点

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

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

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

节点(自身)属性:

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

导航属性:

• 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);  //结果：#text  原因：div下的第一个子节点是文本节点。
</script>

推荐导航属性：

parentElement              // 父节点标签元素

children                        // 所有子标签

firstElementChild          // 第一个子标签元素

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

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

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

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

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

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

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

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

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

页面查找：

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

局部查找：

<div id="div1">
    <div class="div2">i am div2</div>
    <div name="zhou">i am zhoxiaoming</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

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

////支持;（length表示标签数量）
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持 局部查找不能通过id
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持 局部查找不能通过name
//   var ele4=div1.getElementsByName("zhou");
//   alert(ele4.length)

</script>

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      确认按钮被点击。

3.1 两种为元素添加事件的方式

第一种：

<div id="div1" onclick="funk()">点我呀</div>
 <script>
     function funk() {
     var ele=document.getElementById("div1");
        alert(ele.innerHTML);
     }
</script>

第一种升级版：

<div id="div1" onclick="funk(this)">点我呀</div>
<!--使用This代指当前点击的元素-->
<script>
    function funk(self) {
        alert(self.innerHTML)
    }
</script>

第二种：

<div id="div1">点我呀</div>
 <script>
     var ele=document.getElementById("div1");
     ele.onclick=function(){
        alert(ele.innerHTML);
    };
</script>

第二种升级版：

<div id="div1" >点我呀</div>
<script>
    document.getElementById("div1").onclick=function () {
//        使用This代指document.getElementById("div1")
        alert(this.innerHTML)
    }

注意：

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

onsubmit:

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

<form id="form" >
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
</body>
<script type="text/javascript">
            //阻止表单提交方式1().
            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
            var ele1=document.getElementById("form");
            ele.onsubmit=function() {
                alert("验证失败 表单不会提交!");
                return false;}
//-------------------------------------------------------------------
            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
            var ele2=document.getElementById("form");
            ele.onsubmit=function(event) {
             alert("验证失败 表单不会提交!");
             event.preventDefault();
    }

</script>

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>

Event 对象

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

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

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

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

事件传播：

    <div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;width: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>

4、增删改查演示

4.1 node的CURD：

查：使用之前用到的方法（全局查找，局部查找，导航属性）

增:

<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区域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);
    }

删：

    //点击后 删除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);
    }

• 改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML （可以嵌套html标签），innerText（html标签也会被视作文本）。

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

• 改变 HTML 属性

elementNode.setAttribute(name,value)

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

• 删除已有的 HTML 元素

elementNode.removeChild(node)

• 关于class的操作

elementNode.className

elementNode.classList.add （可通过增删class属性（.**）来调节样式来与美工互动）

elementNode.classList.remove

this

　　可通过this代指当前标签对象

<div>
    <div onclick="show(this)" att="111">111</div>
    <div onclick="show(this)" att="112">222</div>
    <div onclick="show(this)" att="113">333</div>
    <div onclick="show(this)" att="114">444</div>
    <div onclick="show(this)" att="115">555</div>
<script>
    //this 代指当前标签的对象
    function show(a) {
        alert(a.getAttribute("att"))
    }
</script>