JavaScript中的DOM对象

GIS小小白

已于 2023-12-08 14:29:00 修改

阅读量50

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript 开发语言 html 学习

于 2023-10-29 17:53:58 首次发布

本文链接：https://blog.csdn.net/weixin_73810008/article/details/134104742

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.ECMAScript 与 JavaScript 的关系

ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。

ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。

DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。

简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。

二.HTML的DOM树结构

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。

三.DOM对象

1.简介

(1).DOM节点，每一个DOM节点都是一个DOM对象

(2).document，JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。

2.获取DOM对象

(1)querySelector 满足条件的第一个元素
(2)querySelectorAll 满足条件的元素集合返回伪数组

了解其他方式
getElementById getElementsByTagName getElementByClassName

3.修改DOM的文本内容

(1)innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

(2)innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

4.常用属性的修改

直接能过属性名修改

<body>

<img src="./images/2.jpeg" alt="">

<script>

// 获取M到N之间的随机数

function getRandom(M, N) {

return Math.floor(Math.random * (N - M + 1)) + M

}

const img = document.querySelector('img')

const random = getRandom(1, 5)

img.src = `./images/${random}.jpeg`

</script>

</body>

5.控制样式style属性

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

background-color: skyblue;

}

.active {

color: aqua;

}

</style>

</head>

<div class="box">文字</div>

<script>

const box = document.querySelector('.box')

box.style.width = '300px'

box.style.backgroundColor = 'hotpink'

box.style.border = '2px solid green'

box.style.borderTop = '5px solid purple'

const box = document.querySelector('.box')

// box.classList.add('active')

// box.classList.remove('box')

// 切换类，有就删掉，没有就加上

// box.classList.toggle('active')

</script>

(a)修改行内样式 style 属性
通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

(b)操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。先在style标签里写好一个你已经命名好的样式，比如是.hhh{自行发挥}

const box = document.querySelector('.box')

box.className = 'hhh'

注意：

1.由于class是关键字, 所以使用className去代替

2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

(详情见上方代码块的下方)

6.操作表单元素属性

注意：常见的想取到表单的值都是先取到表单元素，然后将该对象.value取到值，然后可以做到相应的修改，但是button要取到其中的值要用到.innerHTML

<body>

<input type="checkbox" name="" id="">

<button>点击</button>

<script>

const ipt = document.querySelector('input')

console.log(ipt.checked);

ipt.checked = true

const btn = document.querySelector('button')

btn.disabled = true //禁用按钮

</script>

</body>

7.自定义属性

自定义属性：在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取

<body>
<div data-id="1"> 自定义属性 </div>
<script>
// 1. 获取元素
let div = document.querySelector('div')

console.log(div.dataset) //可以查看该元素的所有自定义属性
// 2. 获取自定义属性值
console.log(div.dataset.id)

</script>
</body>

四.定时器函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

一个html中的setInterval函数都有自己独有的id号，便于之后的clearInterval

<script>

let i = 1

function fu() {

document.write(`不好好学习${i}<br>`)

i++

}

// setInterval(function () {

// document.write(`不好好学习${i}<br>`)

// i++

// }, 1000) //这种是直接把function函数体写到定时器函数里面，是常用的方式

let n = setInterval('fu()', 1000)

console.log(n); //不同定时器输出的数不一样

clearInterval(n) //关闭定时器函数

</script>