本人对DOM的笔记持续更新，不喜勿喷（初学者）

最新推荐文章于 2024-08-07 17:17:50 发布

林海0304

最新推荐文章于 2024-08-07 17:17:50 发布

阅读量80

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/loveMHS0304/article/details/132223014

版权

DOM ——基本认识（ducument object model）

DOM解析——是浏览器提供的一套专门用来操作网页内容的功能

DOM的作用——开发网页内容特效和实现用户交互

DOM树

DOM树解析——将HTML文档一树状结构直观的表现出来，我们称之为DOM树或文档树

作用：文档树直观的体现了标签与标签之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mCnO3cJV-1691705892967)(C:\Users\海\AppData\Roaming\Typora\typora-user-images\image-20230513012413003.png)]

DOM——对象

**解析：**浏览器根据htmli标签生成js对象

1.所有的标签属性都可以在这个对象上面找到

2.修改这个对象的属性会自动映射到标签身上

**核心思想：**把网页内容当做对象来处理

document 对象

1.是DOM里提供的一个对象

2.所以他提供的属性和方法都是用来**访问和操作页面内容的**————例如： document.wirte()

3.网页内所有内容都在document里面

DOM–获取修改元素

1.获取元素

根据css选择器来获取DOM元素

选择器匹配一个元素

语法：

document.querySelector(`css选择器`)

**参数：**包含一个或多个有效的css选择器字符串

返回值：css选择器匹配的第一个元素，一个**HTMLElement对象**

选择器匹配多个元素

语法：

document.querySelectorAll(`css选择器`)

**参数：**包含一个或多个有效的css选择器字符串

**返回值：css选择器匹配的Nodelist对象集合

注意：得到的是一个伪数组有长度有索引号但是没有pop() push() 等数组方法，想要得到需要遍历（for）数组

2.修改元素

修改元素的内容

对象.innerText属性

作用：获取对象内的文本内容

获取使用格式：对象.innerText

修改使用格式：对象.innerText=新内容————（新内容不支持转义符、不支持解析标签）

const box=document.querySelector(`box`)//获取元素
Console.log(box.innerText)//获取文字内容
box.innerText=`新内容`

例子：

const box=document.querySelector(`box`)
Console.log(box.innerText)//一条鳗鱼
box.innerText=`两条鳗鱼`//网页上的表现为——两条鳗鱼
如果box.innerText=`<strong>两条鳗鱼</strong>`输出结果为--<strong>两条鳗鱼</strong>，strong标签不会生效

对象.innerHTML属性

作用：与innerText属性的作用一样，唯一的区别就是在修改文本的时候innerHTML支持解析标签

innerHTML无法获取表单里的文本内容，获取表单里内容只能通过

<input type="text" value="文字内容" >


<script>
const uname=document.querySelector(`input`)
uname.value="新的文本内容"//通过这样的方式修改文本内容，而不是通过uname.innerHTML的形式

<script/>

修改元素的属性

操作元素常用的属性

语法：对象.属性 = 值

<img scr="./images/1.webp" alt="">
    <script>
    const img =document.querySelect(`img`)
	img.scr= "./imgages/2.webp"
	img.title= "我们要在一起很久很久"
    </script>

操作元素样式属性

格式：对象.style.样式属性=新属性值----注意要加后缀（例px）

当属性样式中出现了“-”连接符则需要将“-”后面的单词改成大写形式（小驼峰命名法）即可，例如background-color改成backgroundColor

1、操作类名（className）操作css

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于ss类名的形式

**书写格式：**元素.className = css类名

例

<style>
#box1{
color: red ;
width:100px;
height:100px;
}
.box2{
color:green;
}

<div id = #box1></div>

</style>
<script>
    const di =document.querySelector('.box')
    di.className=`box2`//div的样式全部变成了box2，box1中的全部修饰都将没有
    //若要box1 和 box2一起使用则可以使用以下方法
    di.className=`box1 box2`//但是box2和box1中若有一样的样式时则会使用box2中的样式，二者排序不影响效果
注意：box1和box2不能一个是class 一个是id 
    
    </script>

地址：U盘

注意:
1.由于class是关键字，所以使用className去代替
2.className是使用新值换旧值,如果需要添加一个类，需要保留之前的类名

2、通过calssList操作控制css

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

class Name和classList都需要要注意的：类名不加点，并且是字符串

复选框的默认已选checked的添加方法：

<input type="checkbox">

//添加方式为
script——————const name =document.querySelector(`input`)
name.checked = ture //checked元素不属于css所以不用使用style的形式
//checkde代表启用，false代表不启用，且书写时不用加``号，加了也行应为所有字符串除了空字符串都代表ture

botton的disabled代表按钮禁用，和checked一样使用script的形式修改时，默认值为false（不使用），要改为ture之后才有效果

自定义属性——data

标准属性: 标签天生自带的属性比如class id title等,可以直接使用点语法操作比如: disabled、checked、selected

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取——dataset是一种集合，会包含该对象的所有data-对象

例

<div data-id="1"data-str="idoknow" ></div>
<div data-id="2" ></div>
<div data-id="3" ></div>


scprpt部分

const na = document.querySelector(`div`)//取了第一个div
console.log(na.dataset)//DOMStringMap{id:'1',str:'idoknow' }
console.log(na.dataset.id)//1
console.log(na.dataset.str)//idoknow

变量声明

声明变量我们一般优先考虑const在考虑let

const变量可用于修饰数组和引用数据类型（因为他们在栈内存中存储地址，堆内存中存储数据，一般无法改变地址，只会改变堆内存里的数据，顾可用const）

例子

间隔器

打开并定义间隔器的语法：

关键词——setInterval

setInterval(函数名,间隔时间)——————时间间隔默认单位为ms（毫秒）1000毫秒ms=1秒s、注意是函数名不是函数
例：
<script>
function work(){
console.log(`first`)
}
//调用
setInterval(work,1000)//一秒执行一次函数正常调用函数是这样的work() ,而间隔器是直接写函数名就行若要用函数的形式则可将函数这样写   `work()`  

</script>

注：

1、第一次执行函数是要等所设定的时间间隔过了之后才会执行第一遍

2、函数名不需要添加括号

3、定时器返回的就是一个id数字

4、不写间隔时间，则默认为0

关闭定时器

关键词——clearInterval

先获取开启定时器的id数字id数字具有唯一性,且从1开始

语法：clearinterval(开启的id)

例

function work(){
console.log(`number`)
}
//开启间隔器
let n =setInterval(work)//n=1
//关闭间隔器
clearInterval(n)
//重新打开间隔器
n = setInterval(work,1000)//n=2

DOM–事件基础**

事件监听

**语法：**元素对象.addEventListener(事件类型,要执行的函数)

事件监听三要素：

1、事件源：哪个DOM元素被触发了，要获取dom元素

2、事件类型：用什么方式触发的，例如鼠标单击click、鼠标经过mouseover等

3、事件调用的类型：要做什么事

注意：

1、事件类型要加引号

2、函数是点击之后再去执行，每次点击都会执行一次函数

例

<button>按键</button>

script部分
const btn =document.querySelector(`button`)
btn.addEventListener(`click`,function (){alert(`鼠标点击了`)})

事件解绑

解绑事件：格式：对象.removeEventListener(‘先前绑定的**事件类型**’，函数名)——函数名不能为空函数名的函数

事件类型

1、鼠标事件：鼠标点击 —click 鼠标经过—mouseenter 鼠标离开—mouseleave

调用点击事件格式：元素对象.事件类型()
例如：
const btn=document......
btn.addEventListener(`click`,function(){document.write(`你好`)})
//调用
btn.click()
2、焦点事件：获得焦点—focus 失去焦点—blur

3、键盘事件：键盘按下触发—keydown 键盘抬起触发—keyup

4、文本事件：input—用户输入事件

5、页面滚动事件：scroll—用户滚动操作

页面加载事件

window和document是父子关系，window是父，document是子

1、加载外部资源（例如图片、外联的css和JavaScript等）加载完毕之后触发的事件

事件类型：load——以window为元素

可以写在前面

<script>
window.addEventLister(`load`,function(){
    const btn = document.querySelector('div')
    btn.addEventListener(`click`,function(){
        //执行的操作以及事件
    })
    ......
    ......
})
</script>

2、当初始的HTML文档完全被加载和解析完成之后，DOMContentLoaded事件被触发，无需等待样式表、图像等完成加载——（相较于load事件会更快执行）

事件类型：DOMContentLoaded——以document为元素

document.addEventListener(`DOMContentLoaded`,function(){
    const btn = document.querySelector('div')
    btn.addEventListener(`click`,function(){
        //执行的操作以及事件
    })
    ......
    ......
})

页面滚动事件

滚动条在滚动的时候持续出发的事件

事件类型：scroll——一般以window为元素

//页面滚动事件
window.addEventListener(`scroll`,function(){
    //执行的操作
})

scrollLeft和scrollTop（属性）

获取被卷去的大小

这两个值是可读写的

获取的方法document.documentElement.属性

const div =document.querySelector(`div`)

window.addEventListener(`scroll`,function(){
    if(document.documentElement.scrollTop >= 100){//向下滑动了100px时
        div.style.display=`block`//当屏幕向下滑动100px时，div元素出现
    }else{//当屏幕向下移动距离小于100px时，div元素隐藏
    div.style.display= `none`
    }
    
})

scrollTo()方法可把内容滚动到指定坐标（x，y）以所选中窗口的左上角为原点，y轴的正反反过来

语法：元素.scrollTo(x,y)

window.scrollTo(0,1000)
//让页面滚动到y轴为1000px，x轴为0px的地方

页面尺寸事件

事件类型：resize——一般基于window

浏览器窗口大小发生变化的时侯触发的事件

window.addEventlistener(`resize`,function(){
//执行的事件以及操作
})

1、获取**元素内部**宽高——clientWidth和clientHeight（获取元素的可见部分的宽高不包含边框（border）margin ，滚动条等）

获取特定元素内部的宽高的方式：元素.clientWidth和元素.clientHeight

window.addEventListener(`resize`,function(){
    if(window.clientWidth<100||window.clientHeight<100){
        document.style.fontSize=10px
    }
})

2、获取元素整体的宽高——offsetWidth和offsetHeight（获取元素整体的宽高包含自身设置的宽高、paddin、border）

获取特定元素整体的宽高的方式：对象.offsetWidth和对象.offsetHeight

3、获取元素位置（距离**父级**左、上距离）

获取自己距离父级元素左、上角的距离

获取元素相对于父级的位置 : offsetLeft和offsetTop——注意是**只读属性**

4、获取元素位置（距离当前窗口的左、上距离）

**获取元素相对于当前视口的距离（可为负）：**对象.getBoundingclientRect()
const div = document.querySelector(`div`)
 document.addEventListener(`DOMContentLoaded`, function () {
     document.addEventListener(`scroll`, function () {
         console.log(div.getBoundingClientRect())
         console.log(div.getBoundingClientRect().y)//可以用y代表top（距离顶部的距离），用x代表left（距离左侧的距离）
     })
 })

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y1Onc2tP-1691705892969)(C:\Users\海\AppData\Roaming\Typora\typora-user-images\image-20230811055831427.png)]

事件对象

在使用时间的时候，每一个事件都有自己的相关属性，而获取这些属性的方式

addEventListener(`click`,function(事件对象){
//获取事件对象的属性
事件对象.属性
})

部分常用属性

属性	信息
type	获得当前事件类型
clientX/clientY	获得光标相当于浏览器可视窗口的左上角的位置
offsetX/offsetY	获得光标相当于当前DOM元素左上角的位置
key	用户按下的键盘的值
scroll	页面滚动事件

环境对象

解释：指的是函数内部特征的**变量this，它代表着当前函数运行时所处的环境，指向函数的调用者——谁调用,this就指向谁**

<button>点击</button>

script部分
const btn = document.querySelector(`button`)
btn.addEventListener(`click`,function(){
    console.log(this)
})
输出结果为：<button>点击</button>

事件拓展

在别的方法里想调用已经写好的事件

例如
const div =document.querySelector(`div`)
div.addEventListener(`click`,function(){
alert(`mhs`)
})
定义一个方法用到div的点击事件
无需重写一个div.click()即可

阻止默认行为

在操作有时需要对原本执行的操作进行禁用 例如账号密码为输入直接点击登录按钮，此时本该跳转的操作就该禁用

格式：事件类型.preventDefault()

<body>

    <form action="https://www.baidu.com/">
        <input type="submit" value="form的登录">
    </form>
    <a href="https://www.baidu.com/">a标签的登录</a>

</body>
<script>
    const form = document.querySelector(`form`)//获取input标签
    form.addEventListener(`submit`, function (e) {//注意事件类型为submit
        e.preventDefault()//阻止默认行为
    })

    const a = document.querySelector(`a`)
    a.addEventListener(`click`, function (e) {
        e.preventDefault()//组织默认行为
    })
</script>