笔记总结：Wed前端——DOM和BOM

最新推荐文章于 2024-07-24 10:40:52 发布

笔记君Pude

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量83

点赞数 1

分类专栏： Web前端文章标签：前端笔记 javascript

本文链接：https://blog.csdn.net/lzf240286/article/details/132549774

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM和BOM

一、BOM

1.概念

BOM(Browser Object Model)，浏览器对象模型，BOM提供了独立于内容的对象结构，可与浏览器窗口互动。

2.window对象

包含3个对象：history、document和location

history对象

用于控制页面历史记录的显示。

名称说明
back() 页面展示前一个历史记录
forward() 页面展示后一个历史记录
go(整数) 展示给定数量的历史记录，如果为正则展示后面的，负数则展示前面的
```
<a href="javascript: history.back()">返回上一个页面</a>
```

名称	说明
back()	页面展示前一个历史记录
forward()	页面展示后一个历史记录
go(整数)	展示给定数量的历史记录，如果为正则展示后面的，负数则展示前面的

location对象

获取和更改浏览器地址栏信息。

名称	说明
host	设置或返回主机名和当前URL端口号
hostname	设置或返回当前URL主机名
href	设置或返回完整的URL
reloead()	重新加载当前文档，刷新页面
replace(url)	用新文档替换当前文档

document对象

操作页面元素

名称	说明
getElementById(“id”)	根据id值获取元素
getElementsByName(“name”)	根据name获取多个元素，返回数组
getElementsByClassName(“class”)	根据类名获取多个元素，返回数组
getElementsByTagName(“tag”)	根据标签名获取多个元素，返回数组

let a = document.getElementById("a")
/*a.innerText = "b"*/
/*a.innerHTML="<h1>内置html标签</h1>"*/
a.textContent="c"

二、Date类

方法	说明
getDate()	一个月中的第几天
getDay()	一周的第几天，开始为周日，值为0
getHours()
getMinutes()
getSeconds()
getMonth()	0-11
getFullYear()
getTime()	毫秒数

得到当前月的最大天数：

let now = new Date();
let month = now.getMonth()
now.setMonth(month + 1)
now.setDate(0)	//日期变为上个月的最大天数
console.log(now.getDate())

三、周期函数和延迟函数

函数	说明
setInterval(函数，间隔时间)	按照给定间隔时间重复执行函数，单位毫秒
clearInterval(周期函数)	清除周期函数
setTimeout(函数，延迟时间)	在延迟时间后执行函数
clearTimeout(延迟函数)	清除延迟函数

结合Date类实现即时的日期显示

函数可以写为字符串形式

四、DOM

1.概念

DOM(Document Object Model)，文档对象模型，提供对页面内容的操作。

DOM中，所有的内容都是DOM节点，所有的标签都是DOM元素，节点关系构成了DOM树。

2.节点属性

属性名	说明
parentNode	获取父节点
childNodes	所有子节点，其中换行键、注释也算是子节点
firstChild	第一个子节点
lastChild
nextSibling	下一个同级节点
previousSibling

3.元素属性

属性名	说明
parentElement
children	下一级子元素
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling

4.节点操作

名称	说明
createElement(tagName)	使用document类调用该方法，返回一个新的节点
A.appendChild(B)	追加到子节点的最后
A.remove()
A.getAttribute(“属性名”)
setAttribute(“属性名”，元素值)

Example:

<body>
<div>
  <input type="button" value="查询" id="button">
</div>
<table>
  <thead>
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
  </thead>
  <tbody id="dataBox">
  </tbody>
</table>
<script>
  let button = document.getElementById("button")
  //点击查询创建表
  button.onclick = function (){
    //每次查询重新创建表
    let dataBox = document.getElementById("dataBox")
    let table = dataBox.parentElement
    dataBox.remove()
    dataBox = document.createElement("tbody")
    dataBox.setAttribute("id", "dataBox")
    table.appendChild(dataBox)

    let tr = document.createElement("tr")
    let td = document.createElement("td")
    td.textContent="张三"
    tr.appendChild(td)
    td = document.createElement("td")
    td.textContent="男"
    tr.appendChild(td)
    td = document.createElement("td")
    td.textContent="20"
    tr.appendChild(td)
    dataBox.appendChild(tr)
  }
</script>
</body>

5.节点样式

style样式
```
节点.style.样式属性="属性值"
```
class样式
```
节点.className="类名"
```
一个节点类可以有多个

移除样式：赋空值

6.节点属性

属性	说明
offsetLeft	当前元素左边界到其上级元素左边界的距离，只读
offsetTop	上边界到上级元素上边界的距离，只读
offsetHeight	元素的高度
offsetWidth	元素的宽度
offsetParent	返回元素的偏移容器
scrollTop	匹配元素的滚动条的垂直位置，需要先给html设置属性overflow:scroll
scrollLeft	匹配元素滚动条的水平位置
clientWidth	元素可见宽度
clientHeight	元素可见高度

五、promise对象

1.简介

表示未来将要发生的事件，用于传递异步操作的消息（如抛出异常），其状态不受外界影响。

Promise代表一个异步操作，有三种状态：

pedding:初始态
fulfilled:操作成功
rejected:操作失败

只有异步操作的结果才能够改变promise的状态，其他手段都不能改变。

一旦异步操作初始状态发生改变，其状态就凝固，不可再更改。

2.语法

let promise = new Promise(function(resolve,reject){
    //异步处理
    //处理结束后，调用resolve或reject方法
})
promise.then(function(result){
    //resolve方法结果通过result参数传递
    //操作成功后处理
})
promise.catch(function(error){
    //reject方法通过error参数传递
    //操作失败后处理
})

//链式调用
let promise = new Promise(function(resolve,reject){
    //异步处理
    //处理结束后，调用resolve或reject方法
}).then(function(result){
    
}).catch(function(error){
    
})

示例：

function calculate(a,b){
    let promise = new Promise(function(resolve,reject){
        if(b == 0){
            reject(new Error("除数不能为0"))
        }
        else{
            resolve(a/b)
        }
    })
    promise.then(function(resp){
        console.log(resp)
    })
    promise.then(function(error){
        console.log(error)
    })
}

六、箭头函数

相当于Lambda表达式，使用=>

示例：

function calculate(a,b){
    let promise = new Promise((resolve,reject) => {
        if(b == 0){
            reject(new Error("除数不能为0"))
        }
        else{
            resolve(a/b)
        }
    })
    promise.then(resp => {
        console.log(resp)
    })
    promise.then(error => {
        console.log(error)
    })
}