开始摸鱼!

BOM与DOM

BOM

1, BOM的概念

css 复制代码

BOM是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互
的对象，用于访问浏览器的功能。BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性，
我们可以通过这些属性和方法去对浏览器进行操作.

JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C, 但是BOM缺乏标准.由于BOM缺少规范，
每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。

2, window对象

javascript 复制代码

window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象
与之对应. 
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的.

window对象的属性对象:

makefile 复制代码

document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM) 
history(重要): 历史对象,包含窗口的浏览历史，可以实现后退
location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面
frames: 框架对象，可以获取页面框架内容
screen: 包含有关客户端显示屏幕的信息
navigator: 导航对象, 包含所有有关访问者浏览器的信息

window对象的方法:

scss 复制代码

alert(text): 弹出提示框(警告框)
confirm(): 创建一个需要用户确认的对话框
prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
open(url,name,[options]) : 打开一个新窗口并返回新 window 对象
setInterval(): 设置定时器
clearInterval() : 移除定时器
setTimeOut() : 设置延时器
clearTimeOut(): 移除延时器
close(): 关闭窗口
print(): 调出打印对话框

window对象的属性和方法的调用:

javascript 复制代码

window对象的属性和方法的调用方式，可以使用 window.属性、window.方法()或者一般可以直接使用: 
属性、方法()的方式调用。

例如：window.alert() 和 alert()效果是一样的

3, 系统对话框

scss 复制代码

alert("谢谢");  弹出警告框

confirm("请确定或者取消");   提示框 :确定和取消
if (confirm(("请确定或者取消")){
  alert("您按了确定！");      //按确定返回true
} else{
  alert("您按了取消！")       //按取消返回false
}

var num = prompt("请输入一个数字", 0); 带输入的提示框: 提示文字和输入框默认值
alert(num);     //点击确定得到输入的值, 点击取消返回null

4, window.open()

less 复制代码

window.open(): 打开指定的网址url.  一般可以接受三个参数: 
(1. 要加载的URL   2. 窗口的名称 或者 窗口的目标  3. 一个特性的字符串)

open("http://www.baidu.com");	           //新建页面并打开百度
open("http://www.baidu.com", "baidu");       //新建页面并打开百度,窗口命名为baidu
open("http://www.baidu.com", "_parent");    //在本页窗口打开, _blank是新建(默认)
                                            //_self 在当前窗口打开
注: 不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。

第三个字符串参数: 
width/height:  新窗口的宽度和高度, top/left: 新窗口的Y坐标和X坐标 
open('http://www.baidu.com', 'baidu','width=400,height=400,top=200,left=200' );

opener: 父窗口对象
document.onclick = function(){
    opener.document.write("调用父窗口对象输出!");
}

5, location对象

javascript 复制代码

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。
事实上，location对象是window对象的属性，也是document对象的属性; 
所以window.location和document.location等效。

alert(window.location);     //获取当前的URL
alert(location);	            //window可以省略
alert(window.document.location);  

console.log(location.protocol);//协议 http 80，https 443 ，mysql 3306
console.log(location.host);// 主机名称 + 端口
console.log(location.hostname);// 主机名称(域名)
console.log(location.port);//端口 65535
console.log(location.pathname);//路径名
console.log(location.query);//参数   键值对

// encodeURIComponent() 编码
// decodeURIComponent() 解码

console.log(encodeURIComponent('你好'));
console.log(decodeURIComponent('%E4%BD%A0%E5%A5%BD'));
console.log(decodeURIComponent(location.pathname));
console.log(location.search);//? + query
console.log(location.hash);//锚点 做 SPA 单页面应用程序
console.log(location.href);//完整的路径

6, 页面跳转

ini 复制代码

jump.onclick = function () {
    //多种写法
    //location.href='http://baidu.com'
    //location="https://juejin.cn/user/2588709420532792/posts"
    location.assign('http://bilibili.com')
    //location.replace('http://qq.com')//不能回退
}

//刷新
reload.onclick = function(){
    location.reload()
}
onclick点击事件，通过id值调用

7, history对象

scss 复制代码

history对象是window对象的属性，它保存着用户上网的记录,从窗口被打开的那一刻算起.

history对象的属性
history.length;	//history对象中的记录数

history对象的方法
history.back(); 	//前往浏览器历史条目前一个URL, 类似后退
history.forward();  //前往浏览器历史条目下一个URL, 类似前进
history.go(-1);	//浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)

8, navigator对象(了解)

javascript 复制代码

navigator对象是window对象的属性，它保存了浏览器的信息, 
如: 浏览器名称,版本,浏览器所在的电脑操作系统等。

navigator对象的属性
console.log(navigator.appName);  //浏览器名称
console.log(navigator.appVersion);  //浏览器版本
console.log(navigator.platform);  //操作系统
//最新的浏览器已经全面放弃以上这些属性

navigator对象的属性
console.log(navigator.userAgent);  //用户代理信息, 通过该属性可以获取浏览器及操作系统信息

需要去这里复制一块代码加入script(调试失败的话去掉开头的export)

DOM

css 复制代码

DOM的概念
DOM就是Document  Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML-页面结构   css-页面样式    javascript --页面行为操作

DOM节点分类

ini 复制代码

DOM节点分为三种:  元素节点, 属性节点和文本节点

例如: <div title= "属性节点" >测试Div</div>

<div></div>:  元素节点(最重要)
title="属性节点":  属性节点
测试Div :  文本节点

DOM节点和属性

元素节点对象的获取方式:

css 复制代码

  刚才讲了DOM节点的三种分类, 其中最重要,使用最多的是元素节点;
  元素节点的获取方式有多种, 常用的有以下几种: 
     document.getElementById():  获取特定ID元素的节点对象(返回一个对象)
     document.getElementsByTagName():  获取指定标签名的节点列表(返回一个数组)
     document.getElementsByName():  获取相同name属性值的节点列表(返回一个数组)
     document.getElementsByClassName() 通过类名称获取(返回一个数组)

元素节点的属性

javascript 复制代码

tagName: 元素节点对象所指向的标签名称
id: 元素节点的id属性值
innerHTML: 元素节点中的内容
className: 元素节点的class属性值
style: css内联样式对象
title:  元素节点的title属性值

例如: 
document.getElementById('box').id;                 //获取 id 
document.getElementById('box').id = 'person';      //设置id
document.getElementById('box').style;              //获取css样式对象
document.getElementById('box').style.color;        //获取 style 对象中 color 的值
document.getElementById('box').style.color='red';  //设置 style 对象中 color 的值
document.getElementById('box').className;          //获取 class
document.getElementById('box').className='box';    //设置 class

新的获取方式

dart 复制代码

document.querySelector()//括号中可以放'#+id值','.i+class值','标签'...
                        //支持后代,子代选择器,类,id,属性选择器..，支持id
                        
document.querySelectorAll()//同上 第一个只能查找一个，第二个可以查找全部符合条件的

实例

xml 复制代码

<div id="box">我是盒子1</div>
<div class="cls">我是盒子2</div>
<div class="cls">我是盒子3</div>
<div name="myname">我是盒子4</div>
<div name="myname">我是盒子5</div>
<ul>
  <li>1111</li>
  <li>1111</li>
</ul>
<ol>
  <li>1111</li>
  <li>1111</li>
</ol>
<script>
  // document.querySelector()

  //id
  // var oBox = document.querySelector("#box");
  // oBox.style.backgroundColor = "yellow"

  //类
  // var oBox = document.querySelector(".cls");
  // oBox.style.backgroundColor = "red"

  //name
  // var oBox = document.querySelector("[name='myname']");
  // oBox.style.backgroundColor = "green"

  // document.querySelectorAll()


  var oList = document.querySelectorAll("#box")    //all 所有,多个
  oList[0].style.backgroundColor = "red"


  var oList = document.querySelectorAll(".cls")   //NodeList 
  oList.forEach(function (item) {
    item.style.backgroundColor = "yellow"
  })


  var oList = document.querySelectorAll("div")   //NodeList 
  oList.forEach(function (item) {
    item.style.backgroundColor = "yellow"
  })

  //支持后代,子代选择器,类,id,属性选择器..
  var oLis = document.querySelectorAll("ul>li")
  for (var i = 0; i < oLis.length; i++) {
    oLis[i].style.backgroundColor = "green"
  }
</script>