• 第一章 JavaScript --下

    第一章 JavaScript --下

    2.5.6 DOM操作

    由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。

    2.5.6.1 在整个文档范围内查询元素节点

    功能API返回值
    根据id值查询document.getElementById(“id值”)一个具体的元素节
    根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组
    根据name属性值查询document.getElementsByName(“name值”)元素节点数组
    根据类名查询document.getElementsByClassName(“类名”)元素节点数组

    2.5.6.2 在具体元素节点范围内查找子节点

    功能API返回值
    查找子标签element.children返回子标签数组
    查找第一个子标签element.firstElementChild 【W3C考虑换行，IE≤8不考虑】标签对象
    查找最后一个子标签element.lastElementChild 【W3C考虑换行，IE≤8不考虑】节点对象

    2.5.6.3 查找指定元素节点的父节点

    功能API返回值
    查找指定元素节点的父标签element.parentElement标签对象

    2.5.6.4 查找指定元素节点的兄弟节点

    功能API返回值
    查找前一个兄弟标签node.previousElementSibling 【W3C考虑换行，IE≤8不考虑】标签对象
    查找后一个兄弟标签node.nextElementSibling 【W3C考虑换行，IE≤8不考虑】标签对象

    扩展内容(根据选择器查找标签)

    功能API返回值
    根据选择器查找一个标签document.querySelector(“选择器”)标签对象
    根据选择器查找多个标签document.querySelectorAll(“选择器”)标签数组
    DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM查找节点title>
    head>
    <body>
        <input type="text" id="username">
        <input type="text" class="c1">
        <input type="text" class="c1">
        <div>
            <div>div>
            <div>div>
        div>
        <script>
            //根据id查询标签
            var elementById = document.getElementById("username");
            //console.log(elementById)
            //根据类名查询标签
            var elementsByClassName = document.getElementsByClassName("c1");
            //console.log(elementsByClassName)
            //根据标签名查询标签
            var elementsByTagName = document.getElementsByTagName("input");
            //console.log(elementsByTagName)

            //查找子节点: 查找body的所有子标签,要注意文本也属于子节点
            /*var childNodes = document.getElementsByTagName("body")[0].childNodes;
        console.log(childNodes)*/

            //查找子标签: children
            var children = document.getElementsByTagName("body")[0].children;
            //console.log(children)

            //查找id为username的标签的父节点
            var parentNode = document.getElementById("username").parentNode;
            //console.log(parentNode)

            //查找id为username的标签的前一个兄弟标签
            var previousElementSibling = document.getElementById("username").previousElementSibling;
            //console.log(previousElementSibling)

            //查找id为username的标签的后一个兄弟标签
            var nextElementSibling = document.getElementById("username").nextElementSibling;
            //console.log(nextElementSibling)


            //根据选择器查找标签:document.querySelector("选择器")根据选择器查找一个标签, document.querySelectorAll("选择器")根据选择器查找多个标签
            //什么是选择器: 用于查找标签的一些表达式，其中最基本的三种选择器是:ID选择器、类选择器、标签选择器
            //选择器参考jQuery的文档
            //查找id为username的标签，使用的是id选择器
            var ipt1 = document.querySelector("#username");

            //console.log(ipt1)
            //查找body内的所有后代div，用的是层级选择器
            var ipts = document.querySelectorAll("body div");

            //查找id为username的标签的后面第一个兄弟
            var i1 = document.querySelector("#username+input");

            //查找id为username的标签的后面的所有兄弟
            var i2 = document.querySelectorAll("#username~input");

            console.log(i2)
        script>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66

    2.5.6.5 属性操作

    需求操作方式
    读取属性值元素对象.属性名
    修改属性值元素对象.属性名=新的属性值

    2.5.6.6 标签体的操作

    需求操作方式
    获取或者设置标签体的文本内容element.innerText
    获取或者设置标签体的内容element.innerHTML
    DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作标签的属性和文本title>
    head>
    <body>
        <input type="text" id="username" name="username" />
        <div id="d1">
            <h1>你好世界h1>
        div>
        <script>
            //目标: 获取id为username的输入框的value
            //1. 找到要操作的标签
            var ipt = document.getElementById("username");

            //2. 设置标签的value属性值
            ipt.value = "张三"

            //3. 获取标签的value属性的值
            var value = ipt.value;
            console.log(value)

            //获取id为d1的div中的文本内容
            //获取标签的文本: element.innerText,获取文本的时候会将左右两端的空格去掉
            var innerText = document.getElementById("d1").innerText;
            console.log(innerText)

            //获取标签体的内容: element.innerHTML,获取标签体的内容
            var innerHTML = document.getElementById("d1").innerHTML;
            console.log(innerHTML)

            //设置标签体的内容:建议使用innerHTML，如果是使用innerText的话它会将标签当做普通文本处理
            document.getElementById("d1").innerHTML = "
    hello world
    "    
            script>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    2.5.6.7 DOM增删改操作

    API功能
    document.createElement(“标签名”)创建元素节点并返回，但不会自动添加到文档中
    document.createTextNode(“文本值”)创建文本节点并返回，但不会自动添加到文档中
    element.appendChild(ele)将ele添加到element所有子节点后面
    parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面
    parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点
    element.remove()删除某个标签
    element.innerHTML读写HTML代码
    DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建和删除标签title>
    head>
    <body>
        <ul id="city">
            <li id="bj">北京li>
            <li id="sh">上海li>
            <li id="sz">深圳li>
            <li id="gz">广州li>
        ul>
        <script>
            //目标1: 在城市列表的最后添加一个子标签 
  • 长沙
    • 
            //1. 创建一个li标签  
  • 
            var liElement = document.createElement("li");
            //2. 给创建的li标签设置id属性和文本 
  • 长沙
    • 
            liElement.id = "cs"
            liElement.innerText = "长沙"
            //3. 将创建的li标签添加到城市列表中（ul）
            var cityUl = document.getElementById("city");

            //父.appendChild(子)将子标签添加到父标签的最后面
            //cityUl.appendChild(liElement)

            //目标2:在城市列表的深圳之前添加一个子标签 
  • 长沙
    • 
            //获取到深圳这个标签
            var szElement = document.getElementById("sz");
            //父.insertBefore(新标签,参照标签)
            //cityUl.insertBefore(liElement,szElement)

            //目标3: 在城市列表中添加一个子标签替换深圳 
  • 长沙
    • 
            //父.replaceChild(新标签,被替换的标签)
            //cityUl.replaceChild(liElement,szElement)

            //目标4: 在城市列表中删除深圳
            //szElement.remove()

            //目标5: 清除城市列表中的所有城市,保留城市列表标签ul
            cityUl.innerHTML = ""
            script>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    2.5.7 JavaScript的事件驱动(很重要)

    2.5.7.1 事件的概念

    • HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
    • 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

    2.5.7.2 常见事件

    属性此事件发生在何时…
    onclick当用户点击某个对象时调用的事件句柄。
    ondblclick当用户双击某个对象时调用的事件句柄。
    onchange域的内容被改变。
    onblur元素失去焦点。
    onfocus元素获得焦点。
    onload一张页面或一幅图像完成加载。
    onsubmit确认按钮被点击；表单被提交。
    onkeydown某个键盘按键被按下。
    onkeypress某个键盘按键被按住。
    onkeyup某个键盘按键被松开。
    onmousedown鼠标按钮被按下。
    onmouseup鼠标按键被松开。
    onmouseout鼠标从某元素移开。
    omouseover鼠标移到某元素之上。
    onmousemove鼠标被移动。

    2.5.7.3 事件绑定的方式

    2.5.7.3.1 普通函数方式

    说白了设置标签的属性

    <标签 属性="js代码，调用函数">

    • 1

    2.5.7.3.2 匿名函数方式

    <script>
    标签对象.事件属性 = function(){
        //执行一段代码
    }
script>

    • 1
    • 2
    • 3
    • 4
    • 5

    2.5.7.4 事件的使用介绍

    • 点击事件

      需求: 没点击一次按钮 弹出hello…

    <input type="button" value="按钮" onclick="fn1()">

    <input type="button" value="另一个按钮" id="btn">
        <script>
        //当点击的时候要调用的函数
        function fn1() {
        alert("我被点击了...")
    }

//给另外一个按钮，绑定点击事件:
//1.先根据id获取标签
let btn = document.getElementById("btn");
//2. 设置btn的onclick属性(绑定事件)
//绑定命名函数
//btn.onclick = fn1

//绑定匿名函数
btn.onclick = function () {
    console.log("点击了另外一个按钮")
}
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    • 获得焦点(onfocus)和失去焦点(onblur)

      需求:给输入框设置获得和失去焦点

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

//绑定获取焦点事件
ipt.onfocus = function () {
    console.log("获取焦点了...")
}

//绑定失去焦点事件
ipt.onblur = function () {
    console.log("失去焦点了...")
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    • 内容改变(onchange)

      需求: 给select设置内容改变事件

    <body>
    
    <select onchange="changeCity(this)">
        <option value="bj">北京option>
        <option value="sh">上海option>
        <option value="sz">深圳option>
    select>

body>
<script>
    function changeCity(obj) {
        console.log("城市改变了"+obj.value);
    }
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    • 键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)

    //给输入框绑定键盘按键按下和抬起事件
ipt.onkeydown = function () {
    //当按键按下的时候，数据并没有到达输入框
    //输出输入框里面的内容
    //console.log(ipt.value)
}

ipt.onkeyup = function () {
    //输出输入框的内容:当键盘按键抬起的时候，数据已经到达了输入框
    console.log(ipt.value)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    • 鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)

    //给输入框绑定鼠标移入事件
ipt.onmouseover = function () {
    console.log("鼠标移入了...")
}
//给输入框绑定鼠标移出事件
ipt.onmouseout = function () {
    console.log("鼠标移出了...")
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.5.7.5 综合案例

    需求

    在这里插入图片描述

    代码实现

    DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>综合案例title>
        <style>
            table,tr,td,th{
                border: 1px solid black;
                width: 500px;
                text-align: center;
                margin: auto;
            }

            div{
                text-align: center;
            }
        style>
    head>
    <body>
        <table cellspacing="0" id="tb">
            <tr>
                <th>序号th>
                <th>用户名th>
                <th>性别th>
                <th>操作th>
            tr>
            <tr>
                <td>1td>
                <td>张三td>
                <td>男td>
                <td>
                    <button onclick="deletePerson(this)">删除button>
                td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>女td>
                <td>
                    <button onclick="deletePerson(this)">删除button>
                td>
            tr>
            <tr>
                <td>3td>
                <td>王五td>
                <td>男td>
                <td>
                    <button onclick="deletePerson(this)">删除button>
                td>
            tr>
        table>
        <div>
            <form action="#">
                序号<input type="text" name="num" id="num"><br/>
                用户<input type="text" name="username" id="username"/><br/>
                性别<input type="text" name="gender" id="gender"/><br/>
                <input type="button" value="添加用户" onclick="addPerson()"/>
            form>
        div>
        <script>
            //目标1:点击删除按钮，删除当前行
            //给所有按钮绑定点击事件
            function deletePerson(obj) {
                //此时obj就是你点击的那个按钮
                //我们要删除的就是obj的爷爷
                obj.parentElement.parentElement.remove()
            }

            function addPerson() {
                //添加用户
                //1. 获取序号、用户名、性别
                var numElement = document.getElementById("num");
                var num = numElement.value;

                var usernameElement = document.getElementById("username");
                var username = usernameElement.value;

                var genderElement = document.getElementById("gender");
                var gender = genderElement.value;

                //2. 将获取到的序号、用户名、性别添加到td中，td放到tr中，tr添加到table中
                //2.1 创建一行  
                var trElement = document.createElement("tr");
                //2.2 往tr中添加标签体内容
                trElement.innerHTML = ""+num+"\n" +
                    "            "+username+"\n" +
                    "            "+gender+"\n" +
                    "            \n" +
                    "                \n" +
                    "            "
                //2.3 将tr添加到表格中
                var tb = document.getElementById("tb");
                tb.appendChild(trElement)

                //3. 清空序号、用户名、性别
                numElement.value = ""
                usernameElement.value = ""
                genderElement.value = ""
            }
        script>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
  • 相关阅读:
    Spring Security 自定义资源认证规则
    单片机学习笔记---LCD1602功能函数代码
    装饰模式Decorator
    线性代数 --- 投影Projection 三（投影矩阵P）
    这才是，真彩虹预染蛋白Markers
    前端状态码大全（200,404,503等）
    Java学习笔记（8）
    Review of AI (HITSZ)
    idea集成本地tomcat
    大三学生HTML期末作业,网页制作作业——HTML+CSS+JavaScript饮品饮料茶(7页)
  • 原文地址：https://blog.csdn.net/apple_67445472/article/details/131739481