JS中的对象模型——DOM、BOM

Frank.23

已于 2023-05-09 14:07:57 修改

阅读量327

点赞数 1

分类专栏： Web开发文章标签： javascript html 前端

于 2023-03-06 12:33:44 首次发布

本文链接：https://blog.csdn.net/qq_62225979/article/details/129359508

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. DOM简介

DOM(Document Object Model)——文档对象模型
当网页被加载时，浏览器会创建文档对象模型DOM

HTML DOM模型被构造为对象的树

可编程的对象模型为Javascript提供了创建动态HTML能力

JavaScript的作用

改变HTML元素
改变HTML属性
改变CSS样式
对页面中的所有事件做出反应

注：

元素和属性的区别：
- 元素是例如p，h1等，是构成HTML网页的基本元素；
- 属性是元素的属性，是元素的一部分，例如将input元素的type设置为radio，name设置为sex等

查找HTML元素

通过JavaScript操作HTML元素，需要首先找到元素
查找元素的方式有三种

id查找
如果有多个id相同的元素，只返回首个

//查找id为intro的元素
var x=document.getElementById("intro");

TagName查找
返回元素数组

//查找id为main的元素，再查找该元素中main元素中所用的p元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

Classname查找
返回元素数组

var x=document.getElementsByClassName("intro");

Name查找
返回元素数组

var x = document.getElementByName("vehicle");

2. DOM HTML

2.1 改变HTML输出流

JavaScript可以创建动态的HTML内容
在JavaScript中，document.write()可以直接向HTML输出流写内容

例如，直接将当前的事件输出到HTML页面上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
        <script>
        document.write(Date());
        </script>
    </body>
</html>

2.2 改变HTML元素内容

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

修改HTML元素内容的基本格式如下：

document.getElementById(id).innerHTML=新的 HTML内容

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <p id="p1">Hello World!</p>
    <script>
        document.getElementById("p1").innerHTML = "新文本!";
    </script>
    
    <p>通过js将元素p中的内容从Hello World!改为"新文本"</p>

</body>

</html>

2.3 改变HTML元素的属性

改变元素属性的基本格式如下：

document.getElementById(id).attribute=新属性值
注意：attribute的因为是属性

通过JavaScript脚本语言，修改了img元素的src属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <img id="image" src="smiley.gif" width="160" height="120">
    <script>
        document.getElementById("image").src = "landscape.jpg";
    </script>
    <p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>

</html>

注意：

因为这个图片是菜鸟教程网站后台的，而我们本地文件夹没有一样的图片，使用用自己的电脑渲染HTML是会出现图片渲染错误。

3 DOM CSS

HTML DOM允许JavaScript改变HTML元素的样式（即改变CSS）

document.getElementById(id).style.property=新样式

下面的代码通过脚本JavaScript改变了元素p的样式，
包括颜色，字体，字号

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</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>
    <p>以上段落通过脚本修改。</p>

</body>

</html>

4 HTML DOM 事件

4.1 HTML事件简介

事件也是属性的一种，是HTML元素的一种属性

HTML中的事件常见的有：

点击鼠标 onclick
鼠标移动到元素上时
网页已加载时
图像已加载时
输入字段被改变时
提交HTML表单时
当用户触发按键时

可以在事件发生时执行JavaScript代码，比如用户在元素上点击时（onclick）
若需要事件发生时执行脚本，则需要向事件属性添加JavaScript代码
例如：

<!DOCTYPE html>
<html>
<body>
<!-- onclick后面的是js代码 -->
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

在事件中改变元素的属性值

<html>
<body bgcolor="olive">
    <button onclick='document.getElementById("logo").src =
"hit.png";'>哈工大</button>
    <button onclick='document.getElementById("logo").src =
"pku.png";'>北京大学</button><br />
    <img id="logo" src="hit.png">
</body>

</html>

4.2 分配事件的两种方式

方法一：使用事件属性向HTML元素分配事件

使用事件属性，例如在button元素中令属性οnclick=“displayDate()”

这里onclick事件的响应是JavaScript的displayDate()函数

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

方法二：使用JavaScript分配事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
//在脚本JavaScript中为id为myBtn的元素的onclick属性分配相应的事件
document.getElementById("myBtn").onclick=function(){
    displayDate()
};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

4.3 更多的事件类型

onload和onunload事件

onload和onunload事件在用户进入或离开页面时触发

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body onload="checkCookies()">

    <script>
        function checkCookies() {
            if (navigator.cookieEnabled == true) {
                alert("Cookies 可用")
            }
            else {
                alert("Cookies 不可用")
            }
        }
    </script>
    <p>弹窗-提示浏览器 cookie 是否可用。</p>

</body>

</html>

onmouseover和onmouseout事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <div onmouseover="mOver(this)" onmouseout="mOut(this)"
        style="background-color:#D94A38;width:120px;height:20px;
        padding:40px;">
        Mouse Over Me
    </div>
    <script>
        function mOver(obj) {
            obj.innerHTML = "Thank You"
        }
        function mOut(obj) {
            obj.innerHTML = "Mouse Over Me"
        }
    </script>

</body>

</html>