WebApi等方面整理

最新推荐文章于 2025-09-29 13:09:44 发布

原创最新推荐文章于 2025-09-29 13:09:44 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

文章详细介绍了WebAPI中的DOM和BOM概念，包括文档对象模型DOM的操作如getElementById、获取和设置属性，以及浏览器对象模型BOM中的window对象、location对象、history对象和navigation对象的功能，还涉及了元素节点的创建、删除和事件监听等。

webApi

webApis:浏览器和页面元素的api
Bom和Dom
1. dom对象
  - 文档对象模型
  - 顶级对象document
  - 操作页面元素
  - W3C定义标准
2. bom对象
  - 浏览器对象模型
  - 顶级对象window
  - 浏览器窗口进行交互
  - 浏览器厂商定义，兼容性差

Dom 文档对象模型

Dom树
1. 文档：一个页面就是一个文档，用ducument表示
2. 元素：页面中所有标签都是元素
3. 节点：网页中所有内容都是节点(元素、属性、文本、注释),用node表示
4. 文档、元素、节点都可以用对象表示
获取Dom节点
1. getElementById() 返回dom对象
2. getElementByClassName() getElementByTagName() 返回dom对象伪数组
3. querySelect() 返回符合dom对象的第一个对象
4. querySelectAll() 返回dom对象伪数组
5. - 获取body元素 document.body
- 获取根元素 document.documentElement
操作元素
1. 操作元素的属性: dom.属性=‘’
  image.src=""
2. 操作元素的样式：dom.style.样式属性=‘’ dom.style.color='red'
  操作元素的类名：dom.className=‘’ dom.className="first change"
3. 获取dom节点的属性
- dom.属性
- dom.getAttribute(‘属性’) 可以获取到自定义属性
  dom.getAttribute('data-index') 自定义属性data-开头
1. 设置dom节点的属性
- dom.属性=“”
- dom，setAttribute(‘属性’) 可以设置自定义属性
  dom.setAttribute('data-index',2)
1. 移除属性
- dom.removeAttribute(‘属性’)
  备注获取一个元素所有以data-开头的自定义属性 element.dataset 返回DOMStringMap
1. 获取所有属性
- attributes ：类对象数组
1. 节点内容赋值和获取
- innerHtml: 解析html语句
- innerText: 不解析html语句，根据标签里面的元素独立一行
- textContent: 不解析html语句,可以获取display:none元素内容
- innerText 对IE的兼容性较好textContent虽然作为标准方法但是只支持IE8+以上的浏览器
节点定义
1. 利用dom操作逻辑性不强，繁琐,利用节点的层次关系获取元素，逻辑性更强
2. NodeType: 1:元素节点 2：属性节点 3：文本节点
3. 节点层次 (利用dom树把节点化为不同层次关系，最常见的父子级关系)
- 父节点 node.parentNode
- 子节点 node.childNodes 获取到文本节点和元素节点，再通过nodeType判断
  node.children 返回所有子元素节点
- 第一个子元素节点 node.firstElementChild 最后一个元素节点 node.lastElementChild
- 上下兄弟元素节点 node.nextElementSibling node.previousElementSibling
节点操作
1. 创建节点
  creatElement -> appendChild
```
const li=document.creatElement('li')   
const body=document.body
body.appendChild(li)
```
1. 删除节点
  removeChild()
  node.removeChild(nodeChild)
2. 节点clone
  node.cloneNode() //只复制该node节点
  node.cloneNode(true) //复制node节点包括子节点

BOM对象

window对象介绍
1. 它是js访问浏览器窗口的接口
2. 它是全局对象，定义在全局作用域下的变量、方法都会成为window对象的属性和方法
3. 5大属性
  document loction navigation(浏览器or手机) screen history(向前后跳转)
window对象的常见事件
1. window.resize事件 (利用这个完成响应式布局)
  window.addEventListener('resize',function(e){})
  window.onresize=function(e){}
2. window.onload事件页面内容全部加载完毕，包括dom元素，图片，样式
  window.domContentLoaded事件页面dom元素加载完毕触发，不包括图片，样式
3. 定时器
  window.setTimeout(callback,time)
location对象
1. 定义：lcoation对象为window的属性用于获取窗体的url上
  protocol:host[:port]/path?query1&query2
  | protocol | host | port | path | query |
  | 通信协议 | 主机(域名) | 端口号 | 路径 | 参数 |
navigation ：包含浏览器相关的信息
history对象：浏览器历史记录进行交互

| 通信协议 | 主机(域名) | 端口号 | 路径 | 参数 |
navigation ：包含浏览器相关的信息
history对象：浏览器历史记录进行交互