JS中DOM和BOM

最新推荐文章于 2024-09-27 15:27:45 发布

鱼wuwuwu

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量289

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_84139161/article/details/140700656

版权

Document Object Model (DOM)
DOM（文档对象模型）是一种标准，它将HTML或XML文档定义为一个结构化的节点树。每个节点都是文档中的一个部分，如元素、属性或文本。DOM允许JavaScript以编程方式访问和操作这些节点，从而改变网页的内容、结构和样式。

Browser Object Model (BOM)
BOM（浏览器对象模型）不是一种标准，而是一组约定，它定义了浏览器提供的对象，使开发者能够与浏览器窗口进行交互。BOM 包括浏览器窗口、弹出新窗口、位置、历史记录等功能

这里有一个简单的示例来说明如何使用 DOM 和 BOM

// 使用 DOM 获取一个元素
var element = document.getElementById("myElement");

// 改变元素的内容
element.innerHTML = "Hello, World!";

// 使用 BOM 打开一个新的浏览器窗口
window.open("http://example.com", "_blank");

1.元素操作

1.1获取标签
1.1.1举例用id和标签名获取

<div id="block">默认内容</div>
var block = document.getElementById('block')// 获取标签
console.log(block);//看是否获取成功

对block进行修改可以使用：block.textContent=‘修改的文本’

当时非id的标签时，创立多个p标签，打印出来的结果通常是一个数组

<body>
<p>默认内容</p>
<p>默认内容</p>
<p>默认内容</p>
<p>默认内容</p>
</body>
<script>
var contents = document.getElementsByTagName('p')
console.log(contents)
</script>

打印的就是一个数组，此时想要修改数组的内容，就需要用到索引
在这里插入图片描述

 contents[0].textContent="第一个p标签"

统一的进行设置，用for循环
1.1.2
也可以使用document.querySelectAll ( )
括号里面的内容需要使用到css规则，这里不再详解

1.1.3父/子元素的获取
var 变量名 1= 变量名2.parentNode
效果是覆盖父类下以前全部的内容

子元素获取：变量名.children

2.样式处理

在js里面改变样式

var block = document.querySelector('#block')
block.style.width = '80px'
block.style.height='80px'
 block.style. backgroundColor = 'tomato'

或者调用类名
block.className = “类名”

3.文本处理

除了上文的textcontent 还有innerHTML
区别：innerHTML可以解析文本

4.事件处理

4.1这个方法比传统，如果写两个，会出现覆盖的情况
类名.事件=function（){…}

block.onclick = function () {
alert('suprise!')
}
block. onclick = function () {
alert('suprise again!')
}

4.2这个方法就不会出现覆盖的情况，用途也更广

block.addEventListener('click', function () {
alert('suprise!')

block.addEventListener('click', function () {
alert('suprise again!')

5.定时器

5.1延时定时器，2000的单位是毫秒

setTimeout (function () {
alert('suprise')
}, 2000)

5.2定时输出

setInterval(function () {
console.log('间隔2s输出一次')
}, 2000)

鱼wuwuwu

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫