JavaScript学习(五) -- HTML DOM

最新推荐文章于 2024-07-06 00:11:00 发布

Bridge_go

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/breakbridge/article/details/109001305

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

一、查找 HTML 元素

1.通过id查找

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="intro">你好世界!</p>
    <script>
        var x = document.getElementById("intro");
        x.innerHTML = "Hello World!";
    </script>
</body>
</html>

PS：id是唯一键，同个文档中不能存在两个一样的id（区分大小写）

2.通过标签名查找

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>你好世界!</p>
    <div id="main">
        <p> DOM 是非常有用的。</p>
        <p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
    </div>
    <script>
        var x = document.getElementById("main");
        var y = x.getElementsByTagName("p");  //获取id为main中的所有p元素
        y[1].innerHTML = "该实例展示了  <b>66</b> 方法";  //为获取到的第2个元素设置值
    </script>
</body>
</html>

3.通过类名查找

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p class="intro">你好世界!</p>
    <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
    <script>
        var x = document.getElementsByClassName("intro");
        x[0].innerHTML = "Hello World!";
    </script>
</body>
</html>

二、改变 HTML

1.改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Sat Oct 10 2020 17:41:01 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <script>
        document.write(Date());
    </script>

</body>
</html>

PS：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

2.改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="intro">你好世界!</p>
    <script>
        var x = document.getElementById("intro");
        x.innerHTML = "Hello World!";
    </script>
</body>
</html>

3.改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).[attribute]=新属性值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <img id="image" width="160" height="120">
    <script>
        document.getElementById("image").width = "200";
    </script>
</body>
</html>

三、改变CSS

1.改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.[property]=新样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
    <script>
        document.getElementById("p2").style.color = "blue";
        document.getElementById("p2").style.fontFamily = "Arial";
        document.getElementById("p2").style.fontSize = "larger";
    </script>
</body>
</html>

2.使用事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1 id="id1">我的标题 1</h1>
    <button type="button" onclick="document.getElementById('id1').style.color='red'">点我!</button>
</body>
</html>

四、事件

1.事件反应

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

    <script>
        function changetext(id)
        {
            id.innerHTML = "Ooops!";
        }
    </script>
    <h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

2.分配事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <button id="myBtn">点这里</button>
    <script>
        document.getElementById("myBtn").onclick = function () { displayDate() };
        function displayDate()
        {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
    <p id="demo">时间</p>
</body>
</html>

五、EventListener

1.addEventListener() 方法

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="myBtn">点我</button>
    <script>
        document.getElementById("myBtn").addEventListener("click", myFunction);   //添加无参数的事件
        document.getElementById("myBtn").addEventListener("click", function () { myFunction2('hello'); });   //通过匿名函数添加有参数的事件

        function myFunction()
        {
            alert("Hello World!");
        }

        function myFunction2(a)
        {
            alert(a);
        }
    </script>

</body>
</html>

2.冒泡与捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

PS：默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div { background-color: coral; border: 1px solid; padding: 20px; }
		p { background-color: white; border: 1px solid; padding: 5px; }
    </style>
</head>
<body>
    <h3 id="info"> </h3>
    <div id="myDiv">
        <p id="myP">点击</p>
    </div><br>
    <script>
        document.getElementById("myP").addEventListener("click", function ()
        {
            document.getElementById("info").innerHTML += " p";
        }, true);
        document.getElementById("myDiv").addEventListener("click", function ()
        {
            document.getElementById("info").innerHTML += " div";
        }, false);
    </script>
</body>
</html>

对应设置p和div的useCapture值，结过如下表所示：

通过结果可以发现：

触发子类元素的事件时，父类元素的同类型事件也触发了
先触发子类还是父类取决于父类元素的useCapture值

PS：若想在触发子元素事件时不触发父类事件怎么办呐？

<p id="myP" onclick="event.cancelBubble=true;">点击</p>  //这样就会禁用该元素的冒泡

3.removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div { background-color: coral; border: 1px solid; padding: 20px; }
        p { background-color: white; border: 1px solid; padding: 5px; }
    </style>
</head>
<body>
    <h3 id="info"> </h3>
    <div id="myDiv">
        <p id="myP">点击</p>
        <p id="removeP" onclick="removeHandler()">移除</p>
    </div><br>
    <script>
        document.getElementById("myP").addEventListener("click", pClick1);
        document.getElementById("myP").addEventListener("click", pClick2);
        function pClick1()
        {
            document.getElementById("info").innerHTML += " p1";
        }
        function pClick2()
        {
            document.getElementById("info").innerHTML += " p2";
        }
        function removeHandler()   //去除后点击只会输出p2
        {
            document.getElementById("myP").removeEventListener("click", pClick1);
            document.getElementById("info").innerHTML = " ";
        }
    </script>
</body>
</html>

PS：removeEventListener只能去除通过addEventListener添加的事件，若是直接在元素上属性定义的不能去除.

六、元素 (节点)

1.创建新的 HTML 元素 (节点) appendChild()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落。");
        para.appendChild(node);

        var element = document.getElementById("div1");
        element.appendChild(para);  //在div中添加一个新的p
    </script>

</body>
</html>

2.插入新的 HTML 元素 (节点) - insertBefore()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落。");
        para.appendChild(node);

        var element = document.getElementById("div1");
        var child = document.getElementById("p1");
        element.insertBefore(para, child);   //新建一个p放在div1中的p1后面
    </script>

</body>
</html>

3.移除已存在的元素 - removeChild()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script>
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.removeChild(child);   //移除div1中的p1
    </script>

</body>
</html>

4.替换 HTML 元素 - replaceChild()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落。");
        para.appendChild(node);

        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.replaceChild(para, child);   //将div1中的p1元素替换为新建的p元素
    </script>

</body>
</html>

Bridge_go

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习(五) -- HTML DOM

HTML DOM (文档对象模型)当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。一、查找 HTML 元素1.通过id查找<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head>&.
复制链接

扫一扫