JavaScript 05

JavaScript 05

 

目录

JavaScript 05

一、核心DOM

3. Node：节点对象

二、HTML DOM、事件监听机制

1. HTML DOM

2. 事件监听机制

3. 常见事件

#END

---

 

一、核心DOM

（接上篇）

3. Node：节点对象

3.1 Node对象：代表文档树中的一个节点，是其他五个对象的父对象；

3.2 特点：所以DOM对象都可以被认为是一个节点；

3.2 方法：CRUD（增删查改）DOM树

① appendChild()：向节点的子节点列表的结尾添加新的子节点；

② removeChild()：删除并返回当前节点的指定子节点；

③ replaceChild()：用新节点替换一个子节点；

    <input type="button" id="add" value="增加">
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
        var add = document.getElementById("add");
        add.onclick = function () {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.appendChild(div2);
        }
    </script>

   <input type="button" id="del" value="删除">
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
        var del = document.getElementById("del");
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.appendChild(div2);
        del.onclick = function () {
            div1.removeChild(div2);
        }
    </script>

    <input type="button" id="rep" value="替代">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

    <script>
        var rep = document.getElementById("rep");
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        div1.appendChild(div2);
        rep.onclick = function () {
            div1.replaceChild(div3, div2);
        }
    </script>

3.3 属性：

parentNode：返回 当前元素的 parentNode（父节点）；

    <script>
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.appendChild(div2);
        var div3 = div2.parentNode;
        alert(div3);
    </script>

 

二、HTML DOM、事件监听机制

1. HTML DOM

1.1 标签体的设置和获取；

1.2 使用HTML元素对象的属性；

    <div id="div1">人间失格 太宰治</div>
    <script>
        var div1 = document.getElementById("div1");
        var innerHTML = div1.innerHTML;
        // alert(innerHTML);
        // div1 标签中替换一个文本框
        // div1.innerHTML = "<input type = 'text'>";
        // div1 标签中追加一个文本框
        div1.innerHTML += "<input type = 'button' value = '死亡'>";
    </script>

1.3 控制样式：

① 使用元素的 style 属性来设置：

    <script>
        var div1 = document.getElementById("div1");
        div1.onclick = function() {
            div1.style.border = "1px solid black";
            div1.style.width = "400px";
            div1.style.color = "red";
            div1.style.fontSize = "22px";
        }
    </script>

② 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值；

    <script>
        var div = document.getElementById("div");
        div.onclick = function() {
            div.className = "box";
        }
    </script>

    <style>
       .box {
           font-size: 22px;
           color: skyblue;
           border: 1px solid #000;
           width: 400px;
       }
    </style>

 

2. 事件监听机制

2.1 概念：某些组件被执行了某些操作后，触发某些代码的执行；

2.2 解释：

① 事件：某些操作；

② 事件源：组件；

③ 监听器：代码；

④ 注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码；

3. 常见事件

3.1 点击事件：

① onclick：单击事件；

② ondblclick：双击事件；

3.2 焦点事件：

① onblur：失去焦点；（一般用于表单验证）

② onfocus：元素获得焦点；

    <script>
        document.getElementById("user").onblur = function() {
            alert("失去焦点了");
        }
    </script>

3.3 加载事件：

① onload：一个页面或一幅图像完成加载； 

当Script写于代码之前时，运用onload可以使页面加载完成后再进行执行Script；

    <script>
        window.onload = function() {
            document.getElementById("user").onblur = function() {
            alert("失去焦点了");
        }
        }
    </script>

3.4 鼠标事件：

① onmousedown：鼠标按钮被按下；

• 定义方法时，定义一个形参，接受event对象；
• event对象的button属性可以获取鼠标按钮键被点击了；

（0为鼠标左键，1为鼠标中键，2为鼠标右键）

② onmouseup：鼠标按键被松开；

③ onmousemove：鼠标被移开；

④ onmouseover：鼠标移到某元素之上；

⑤ onmouseout：鼠标从某元素移开；

    <script>
        document.getElementById("user").onmouseover = function () {
            alert("鼠标移动到了文本框上");
        }
        document.getElementById("user").onmousedown = function (event) {
            alert(event.button);
        }
    </script>

3.5 键盘事件：

① onkeydown：某个键盘按键被按下；

② onkeyup：某个键盘按键被松开；

③ onkeypress：某个键盘按键被按下并松开；

3.6 选择和改变：

① onchange：域的内容被改变；

② onselect：文本被选中；

    <script>
        document.getElementById("user").onchange = function (event) {
            alert("改变了");
        }
    </script>

3.7 表单事件：

① onsubmit：确认按钮被点击；

（可以阻止表单的提交，方法返回值为false则表单被阻止）

② onreset：重置按钮被点击；

    <script>
        document.getElementById("user").onsubmit = function () { // 形式1
            var flag = false;
            return flag;
        }
        function checkForm() { // 形式2
            return false;
        }
    </script>

<form action="\" id="form" onclick="return checkForm();">

 

#END