- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

[华为云在线课程][JavaScript的DOM编程][学习笔记]

John2021 发表于 2022/02/11 07:46:56 2022/02/11

【摘要】第1章，JavaScript的DOM对象 1.1，JavaScript的DOM节点和DOM树HTML的DOM定义：HTML Document Object Model（文档对象模型）HTML DOM定义了访问和操作HTML文档的标准方法HTML DOM把HTML文档呈现，带有元素、属性和文本的树形结构Document（文档）：表示的就是整个HTML网页文档Object（对象）：表示网页中每...

第1章，JavaScript的DOM对象

1.1，JavaScript的DOM节点和DOM树

HTML的DOM定义：
- HTML Document Object Model（文档对象模型）
- HTML DOM定义了访问和操作HTML文档的标准方法
- HTML DOM把HTML文档呈现，带有元素、属性和文本的树形结构
- Document（文档）：表示的就是整个HTML网页文档
- Object（对象）：表示网页中每一部分都转换成立一个对象
- Model（模型）：使用模型来表示对象之间的关系，这样方便我们获取对象
DOM树
DOM节点定义：
- HTML文档中的每个部分都是一个节点
- DOM的规定如下：
  - 整个文档是一个文档节点
  - 每个HTML标签是一个元素节点
  - 包含在HTML元素中的文本是文本节点
  - 每一个HTML属性是一个属性节点

对象属性	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

DOM节点关系：
节点树中的节点彼此拥有层级关系
父（parent），子（child）和同胞（sibling）等术语用于描述这些关系，父节点拥有子节点，同级的子节点被称为同胞。
节点层级关系描述：
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的自节点
- 同胞是拥有相同父节点的节点

1.2，JavaScript的DOM节点查找

JavaScript的DOM节点查找两种方式：
1，直接查找节点
- 按照id查找，拿到的是一个标签对象；document.getElementById(idname);
- 按照class标签去找，获取的是一个数组里存放的标签；document.getElementByClassName(classname);
- 通过标签名去找，获取的也是一个数组；document.getElementByTagName(tagname);
- 按照name属性去找，获取的也是一个数组；document.getElementByName(name);
- 获取html的方法：document.documentElement;
- 获取body的方法：document.body;
- 通过选择器获取一个元素：querySelector;
- 通过选择器获取一组元素：querySelectorAll;
- JavaScript的DOM直接查找节点案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM编程</title>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
    <li id="bj" name="Beijing">北京</li>
    <li>上海</li>
    <li>杭州</li>
    <li>深圳</li>
</ul>
<br>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
    <li id="rl">红警</li>
    <li>实况</li>
    <li>极品飞车</li>
    <li>魔兽</li>
</ul>
<br>
gender:
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/> Female
<script>
    var bjNode = document.getElementById("bj");
    console.log(bjNode);
    var liNodes = document.getElementsByTagName("li");
    console.log(liNodes.length);//8
    var cityNode = document.getElementById("city");
    var cityLiNodes = cityNode.getElementsByTagName("li");
    console.log(cityLiNodes.length);//4
    var genderNodes = document.getElementsByName("gender");
    console.log(genderNodes.length);//2
    var bjNode2 = document.getElementsByName("Beijing");
    console.log(bjNode2.length);//1
</script>
</body>
</html>

JavaScript的DOM节点查找两种方式：
2，导航查找节点：通过某一个标签的位置去查找另一个标签
- 父节点标签元素：parentElement;
- 所有子标签：children;
- 第一个子标签元素：firstElementChild;
- 最后一个子标签元素：lastElementChild;
- 下一个兄弟标签元素：nextElementSibling;
- 上一个兄弟标签元素：previousElementSibling;
- JavaScript的DOM导航查找节点案例：


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM编程</title>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
    <li id="bj" name="Beijing">北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
</ul>
<script>
    //1，获取文本节点所在元素节点
    var bjNode = document.getElementById("bj");
    bjNode.onclick = function () {
        //2，通过firstChild定义到文本节点
        var bjTextNode = bjNode.firstChild;
        //3，通过操作文本节点的nodeValue属性来读写文本节点的值
        console.log(bjTextNode.nodeValue);
        bjTextNode.nodeValue = "广州";
        console.log(bjTextNode.nodeValue);
    };
</script>
</body>
</html>


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM编程</title>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
    <li id="bj" name="Beijing">北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
</ul>
<script>
    var element = document.getElementById("city");//定位id为city的元素
    console.log(element);//控制台输出id为city的标签内容
    var elementsByTagName = element.getElementsByTagName("li");//找到id为city下的li标签
    console.log(elementsByTagName.length);//控制台输出li标签的数量，4
    for (var i = 0; i < elementsByTagName.length; i++) {
        console.log(elementsByTagName.item(i).innerText);//控制台输出每个li标签的内容
    }
</script>
</body>
</html>

1.3，JavaScript的DOM节点操作

创建节点：createElement(标签名)：创建一个指定名称的元素
添加节点：
- 追加一个子节点（作为最后的子节点），node.appendChild(newnode);
- 把增加的节点放到某个节点的前边，node.insertBefore(newnode,某个节点);
删除节点：removeChild()：获得要删除的元素，通过父元素调用删除
替换节点：node.replaceChild(newnode,某个节点);
JavaScript的DOM节点操作案例：


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul id="city"></ul>
</body>
<script>
    var liNode = document.createElement("li");//创建一个li标签
    var xmText = document.createTextNode("厦门");//创建一个文本节点
    liNode.appendChild(xmText);//将文本标签追加到li标签
    var cityNode = document.getElementById("city");
    cityNode.appendChild(liNode);//往city标签添加liNode
</script>
</html>


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
</div>
<button id="myBtn">add p tag</button>
//添加p标签
<script>
    document.getElementById("myBtn").addEventListener("click", myFunction);

    function myFunction() {
        var para = document.createElement("p");//创建了一个p标签
        var node = document.createTextNode("这是一个新段落");//创建了一个文本
        para.appendChild(node);//将文本放到p标签内
        var element = document.getElementById("div1");
        element.appendChild(para);//放在最后一个节点位置
    }
</script>
</body>
</html>


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
</div>
<button id="myBtn">delete html element</button>
<script>
    //删除节点
    document.getElementById("myBtn").addEventListener("click", myFunction);

    function myFunction() {
        var element = document.getElementById("p1");
        element.remove();//直接把我的P1标签拿走了 删除了
    }
</script>
</body>
</html>


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是一个新段落</p>
</div>
<button id="myBtn">replaceChild method</button>
</body>
<script>
    document.getElementById("myBtn").addEventListener("click", myFunction);

    function myFunction() {
        var para = document.createElement("p");
        var textNode = document.createTextNode("这是另外一个段落");
        para.appendChild(textNode);

        var parentElement = document.getElementById("div1");
        var p1 = document.getElementById("p1");
        parentElement.replaceChild(para, p1);
    }
</script>
</html>

1.4，JavaScript的DOM节点属性操作

1，获取文本节点的值：innerText innerHTML
- innerText：不管你是赋值还是取值，只能识别纯文本
- innerHTML：既可以识别纯文本，也可以识别标签


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="c2">你好吗？</div>
<div class="c2">Hello World</div>
</body>
<script>
    var a1 = document.getElementsByClassName("c2")[0];
    console.log(a1.innerText);
    console.log(a1.innerHTML);
    //赋值操作
    a1.innerText = "天气真好";//输出内容为天气真好
    a1.innerHTML = "<a href=''>hello</a>";//输出内容为hello链接

    var b1 = document.getElementsByClassName("c2")[1];
    console.log(b1.innerText);//Hello World
    console.log(b1.innerHTML);//Hello World

    b1.innerText = "lai";
    b1.innerHTML = "<input type='text'/>;"
</script>
</html>

2，属性（attribute）操作：
- elementNode.setAttribute(name,value);
- elementNode.getAttribute(属性名);
- elementNode.removeAttribute("属性名");


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="c1" id="d1">盒子</div>
<script>
    var ele = document.getElementsByClassName("c1")[0];
    console.log(ele.getAttribute("id"));//d1
    console.log(ele.id);//d1
    ele.setAttribute("id", "d3");
    console.log(ele);//id=d3
</script>
</body>
</html>

3，获取当前选中的value值：
- input
- select
- textarea


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="text" id="name" value="100"/>
<select id="selectval">
    <option>请选择值：</option>
    <option value="南京">南京</option>
    <option value="北京">北京</option>
</select>
<script>
    var inputObj = document.getElementById("name");
    console.log(inputObj.value);
    var selectObj = document.getElementById("selectval");
    selectObj.onchange = function () {
        console.log("你选择的值是：" + this.value);
    };
</script>
</body>
</html>

4，对class的操作：
- className：打印样式名称
- add：添加样式
- remove：移除样式


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .c2
        {
            color: red;
        }
    </style>
</head>
<body>
<div class="c1" id="d1">盒子</div>
<script>
    var ele = document.getElementsByClassName("c1")[0];
    ele.onclick = function () {
        this.className = "c2";
    };
</script>
</body>
</html>

5，对样式css的操作：
- 标签对象.style.样式属性=“具体值”;


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<p id="p2">Hello World!</p>
<script>
    var pobj = document.getElementById("p2");
    pobj.onclick = function () {
        pobj.style.color = "blue";
        pobj.style.fontSize = 48 + "px";
    };
</script>
</body>
</html>

第2章，JavaScript的DOM事件

2.1，JavaScript的DOM事件流

事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流
事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流：
- 冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根
- 捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子
JavaScript的DOM事件流的事件冒泡案例：


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box1
        {
            width: 300px;
            height: 300px;
            background: blueviolet;
        }

        #box2
        {
            width: 200px;
            height: 200px;
            background: aquamarine;
        }

        #box3
        {
            width: 100px;
            height: 100px;
            background: tomato;
        }

        div
        {
            overflow: hidden;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
</body>
<script>
    function sayBox3() {
        console.log("你点了最里面的box");
    }

    function sayBox2() {
        console.log("你点了最中间的box");
    }

    function sayBox1() {
        console.log("你点了最外面的box");
    }

    //事件监听，第三个参数为布尔值，默认false，false是事件冒泡
    //结果为：你点了最里面的box，你点了最中间的box，你点了最外面的box
    /*
    * 点击了最里面的会把外面的全部显示，点击最外面的只会显示最外面的，理解为冒泡
    * DOM事件流的三个阶段：1，事件捕获阶段。2，处于目标阶段。3，事件冒泡阶段
    * */
    document.getElementById("box3").addEventListener("click", sayBox3, false);
    document.getElementById("box2").addEventListener("click", sayBox2, false);
    document.getElementById("box1").addEventListener("click", sayBox1, false);
</script>
</html>

JavaScript的DOM事件流的事件捕获案例：


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box1
        {
            width: 300px;
            height: 300px;
            background: blueviolet;
        }

        #box2
        {
            width: 200px;
            height: 200px;
            background: aquamarine;
        }

        #box3
        {
            width: 100px;
            height: 100px;
            background: tomato;
        }

        div
        {
            overflow: hidden;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
<script>
    function sayBox3() {
        console.log("你点了最里面的box");
    }

    function sayBox2() {
        console.log("你点了最中间的box");
    }

    function sayBox1() {
        console.log("你点了最外面的box");
    }

    //事件监听，第三个参数是布尔值，true是事件捕获
    //点击非最外层的时候，输出顺序是从外到里
    document.getElementById("box3").addEventListener("click", sayBox3, true);
    document.getElementById("box2").addEventListener("click", sayBox2, true);
    document.getElementById("box1").addEventListener("click", sayBox1, true);
</script>
</body>
</html>

2.2，JavaScript的DOM事件处理程序

1，HTML事件处理程序：
- HTML事件处理程序就是直接把事件添加到HTML结构中


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="button" value="按钮" onclick="showMessage()"/>
<script>
    function showMessage() {
        console.log("点击按钮输出");
    }
</script>
</body>
</html>

2，JavaScript传统事件处理程序：
- JavaScript中非常传统的方式，就是在一个元素上直接绑定方法，即先获取元素，再以属性方式添加事件
- 该方式也叫做DOM0级事件处理程序
- 直接通过onclick把事件绑定在html上
- 通过给事件赋值null的形式就可以清理我们DOM0级事件，oBtn.onclick=null;
- 同一级元素的同一种事件只能绑定一个函数，否则后面的函数就会覆盖前面的函数
- 不存在兼容性问题
- 缺点：一个事件处理程序只能对应一个处理函数


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="button" id="btn" value="按钮">
<script>
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function () {
        console.log("点击按钮输出");
    };
</script>
</body>
</html>

3，W3C事件处理程序：
- W3C中推荐使用addEvenListener()函数进行事件绑定，使用removeEventListener()函数删除事件
- 这种方式也叫做DOM2级事件处理程序，它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="button" id="btn" value="按钮">
<script>
    var oBtn = document.getElementById("btn");
    /*
    * DOM2级事件处理程序
    * 添加事件处理程序
    * addEventListener(eventName,func,capture);
    * 删除事件处理程序
    * removeEventListener(eventName,func,capture);
    *
    * 第三个参数为true时，表示只进行事件捕获，不执行事件冒泡
    * 第三个参数为false时，表示执行事件冒泡过程
    *
    * 1、eventName均不含on
    * 2、处理函数中的this依然指的是当前的DOM元素
    * 3、通过addEventListener添加的事件处理程序，只能通过removeEventListener删除
    * **通过addEventListener添加的事件处理程序是一个匿名函数，无法删除
    *
    * IE的DOM2级事件处理，
    * 添加事件处理程序：
    * attachEvent(eventName,func); 添加事件都会被添加到冒泡阶段
    * 删除事件处理程序
    * detachEvent(eventName,func);
    * */
    oBtn.addEventListener("click", function () {
        console.log("点击按钮输出");
    }, false);
</script>
</body>
</html>

2.3，JavaScript的DOM事件流阻止

1，JavaScript的DOM事件流阻止：
- 事件流阻止，这里阻止的是它的继续传播以及有可能产生的默认动作
- W3C中定义了两个方法：stopPropagation()和preventDefault()用于阻止事件流
- event.stopPropagation()，方法用于阻止事件冒泡
- event.preventDefault()，方法用于阻止事件的默认行为
- JavaScript的DOM事件流阻止案例


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .one
        {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="one"></div>
<script>
    var html = document.querySelector("html");
    var body = document.body;
    var div = document.querySelector(".one");

    document.onclick = Event => {
        alert("我是：document");
    }
    html.onclick = Event => {
        alert("我是：html");
    };
    body.onclick = Event => {
        alert("我是：body");
    };
    div.onclick = Event => {
        alert("我是：div");
    };
    /*
    * 输出结果为：
    * 如果点击div，输出：我是div；我是body；我是html；我是document
    * 如果点击网页空白地方，输出：我是body；我是html；我是document
    * */
</script>
</body>
</html>

2，JavaScript的DOM事件委托
- 事件委托，通俗来讲，就是把一个元素响应事件的函数委托到另一个元素
- 一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
- 事件委托的优点：减少内存消耗；动态绑定事件
- JavaScript的DOM事件委托案例：

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
    var oUl = document.getElementById("ul1");
    var aLi = oUl.children;
    console.log(aLi);//HTMLCollection(4) [li, li, li, li]
    //传统方法，li身上添加事件，需要用for循环，找到每个li
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onmouseover = function () {
            this.style.color = "red";
        };
        aLi[i].onmouseout = function () {
            this.style.color = "";
        };
    }
</script>
</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!-- 采用事件委托 -->
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
    var oUl = document.getElementById("ul1");
    oUl.onmousemove = function (ev) {
        var oLi = ev.target;
        oLi.style.background = "red";
    };
    oUl.onmouseout = function (ev) {
        var oLi = ev.target;
        oLi.style.background = "";
    };
</script>
</body>
</html>

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

[华为云在线课程][JavaScript的DOM编程][学习笔记]

第1章，JavaScript的DOM对象

1.1，JavaScript的DOM节点和DOM树

1.2，JavaScript的DOM节点查找

1.3，JavaScript的DOM节点操作

1.4，JavaScript的DOM节点属性操作

第2章，JavaScript的DOM事件

2.1，JavaScript的DOM事件流

2.2，JavaScript的DOM事件处理程序

2.3，JavaScript的DOM事件流阻止

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

[华为云在线课程][JavaScript的DOM编程][学习笔记]

第1章，JavaScript的DOM对象

1.1，JavaScript的DOM节点和DOM树

1.2，JavaScript的DOM节点查找

1.3，JavaScript的DOM节点操作

1.4，JavaScript的DOM节点属性操作

第2章，JavaScript的DOM事件

2.1，JavaScript的DOM事件流

2.2，JavaScript的DOM事件处理程序

2.3，JavaScript的DOM事件流阻止

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品