必须记的BOM常用api及DOM对象下常用api

Posted 2022-08-18 cxf1214

js组成

1. EcmaScript js基础语法

2. BOM 浏览器相关 浏览器对象模型、

3. DOM 文档对象模型 操作html

BOM

window对象

是js顶层对象，全局对象  window属性和方法，都可以省略window直接使用
window:是浏览器
BOM相关api，基本都是 window对象的

BOM相关api

?
alert()   window.alert();  弹窗
prompt();  window.prompt()  弹窗接受用户输入信息
confirm()    确认框
    返回值：当用户点击确认时，返回true,点击取消 返回 false

history对象

history对象，主要保存，浏览器 历史记录相关的信息

三个方法
history.forward()  前进一步
history.back()  后退一步
history.go() 
    go(1)  前进一步
    go(0)  刷新
    go(-1)  后退一步

location对象

保存的是浏览器地址栏相关信息：获取当前窗口地址，可以改变当前窗口的地址

href属性  保存了当前窗口的地址（完整的地址）
    获取href属性，获取了当前地址 改变了href属性，跳转页面
reload() 方法 刷新

navigator 记录浏览器一些基本信息 属性 可以不记

userAgent  记录浏览器基本信息
- navigator.appName` 获取当前浏览器的名称
- `navigator.appVersion` 获取当前浏览器的版本号
- `navigator.platform` 获取当前计算机的操作系统

open方法 close方法

打开和关闭窗口

open(url,target,style)
三个参数：
?
•       1，url
?
•       2，打开方式 _self _blank  默认_blank
?
•       3,外观
?
•       "width=300,height=300,left=300,top=300"
返回值：打开的网页的window对象
close([window])
    要关闭的网页的window对象 如果没有默认是当前网页的window

浏览器窗口尺寸相关

- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度  包含滚动条
可视区宽高：
    document.documentElement.clientWidth  可视区 宽度  不包含滚动条
    document.documentElement.clientHeight  可视区 高度   不包含滚动条

滚动距离

document.documentElement.scrollTop   IE其他浏览器
document.documentElement.scrollLeft  //横向
document.body.scrollTop  低版本chrome

滚动事件

scroll   鼠标滚轮滚动或者点击滚动条
window.onscroll=function()
    

load事件

网页加载事件：等待网页html/css资源加载完毕后触发

注意：

一个html文件中只能出现一次，如果出现多次，下面会覆盖上面的

使用场景：
    如果js写在头部，应该将所有的js代码，扔进window.onload事件中，否则获取不了元素

DOM

document object model 文档对象模型 操作html

document是最大的dom对象

dom对象：js中把标签，称为dom对象

获取元素

• 通过元素的id获取

  document.getElementById("id名字")

  返回值：dom对象

• 通过元素的标签名获取

  document.getElementsByTagName("标签名")

  返回值： 类数组

  注意：

  前面的document也可以是别的dom对象，只要是它的祖先元素就可以，在祖先元素的范围内去找某些标签

  好处：范围进一步缩小

• 通过 元素的 类名来获取元素 IE8以下不支持

  document.getElementsByClassName("class值")

  返回值：类数组

  注意： 前面的document也可以是别的dom对象，只要是它的祖先元素就可以，在祖先元素的范围内去找某些标签

  好处：范围进一步缩小

新增 h5选择器

document.querySelector("css选择器")

找到第一个符合条件的元素，就立即返回，返回是dom对象

document.querySelectorAll("css选择器")

找到所有的符合条件的元素，返回的数类数组

元素属性操作

获取元素的属性
?
•   元素.getAttribute("属性名");  *****
?
设置元素的属性
?
•   元素.setAttribute("属性名",值);  了解
?
移除一个元素的属性  
?
•   元素.removeAttribute("属性名");   了解
dom对象也是对象 具备对象的基础语法
获取：
    元素.属性名
    元素[‘属性名‘]
设置
    元素.属性名=值
    元素[‘属性名‘]=值

    nodeName:"DIV",
    innerHTML:"内容",
    className:"class属性",
    style:
        
    

dom对象：在html中自定义的属性，是不在dom中的，就不能通过对象名.属性名，js为了方便使用，封装了方法 getAttribute() 可以获取自定义属性

总结：
    获取元素的属性
    元素.属性    可以获取元素本来就有的属性 也可以获取在js中自定义的属性  90%需求
    元素[属性]  在属性是一个变量的时候用   5%
    getAttribute()  万能  在html中自定的属性， 就用它 5%
    设置：
        元素.属性 = 值
        元素[属性]=值
        元素.setAttribute("属性",值)

获取和设置元素的类型

className属性 可以获取 可以设置

元素.className获取

元素.className = 值

获取和设置元素的内容

文本内容

innerText 只包含文本 不包含标签

html内容

innerHTML 包含标签 *

获取元素的样式

js中是通过内联的形式来设置元素的样式
原因：
    1，内联的优先级别最高， 保证js代码添加样式一定有效果
    2，只针对当前标签有效，不会影响全局的代码
<div style="width:200px;height:200px"></div>

    style:
        width:"200px",
        height:"200px"
    

元素.style.css属性名 = "值"
注意：
    js中是不允许出现 - css属性中有很多连接符  background-color -webkit-transform-origin
    去 - 变驼峰
    元素.style.backgroundColor
    元素.style.WebkitTransformOrigin="center center"
获取内联样式的值
    前提：必须通过内联设置某个css属性的值，才能 通过 元素.style.属性 否则没有值

如何给元素绑定事件

js中
元素.on事件名=function()
    事件函数  
    事件函数中this是指向事件源

?
function fn()
元素.on事件名 = fn;  //不加括号

在事件中涉及到数组和数组之间一一对应关系

for循环中使用自定义属性

var arr = [1, 2, 3];
for(var i = 0; i < btns.length; i++) 
    btns[i].num = i;
    btns[i].onclick = function() 
    alert(this.num);
    

BOM:
    history
    location
    可视区宽高  
    滚动距离
    滚动事件
    load事件
dom:都要记
?
?