【JavaScript笔记】BOM知识初总结

HTML结构：

1、获取单个元素：getElementById()

<div id="box" title="我是标题">我是一个div盒子</div>

var box = document.getElementById('box');

2、通过标签名获取元素对象(单个和多个),结果是类数组(如果获取的是一个元素，也是类数组) ：getElementsByTagName

<ul>
   <li>1111</li>
   <li>2222</li>
   <li>3333</li>
   <li>4444</li>
   <li>5555</li>
</ul>

var ul = document.getElementsByTagName('ul');
console.log(ul); //获取的ul元素的集合。
console.log(ul.length); //1。
alert(ul[0]); //[object HTMLUListElement]

var list = document.getElementsByTagName('li');
console.log(list.length); //5
console.log(list[2].innerHTML); //3333

3、读写元素对象的属性 ： 标签默认属性的值，通过点操作符或者中括号获取(除了标签名本身，其他的写在标签里面的都是属性)

<div id="box" title="我是标题">我是一个div盒子</div>

console.log(box.title);
box.title = '我是新的标题';

---

读写css属性的值

读：获取css的属性值；提供四个属性词 - offsetLeft、offsetTop、offsetWidth、offsetHeight仅能读取，没有单位

<style>
  #box {
    width: 300px;
    height: 200px;
    background: red;
    font-size: 14px;
    margin-left: 100px;
  }
</style>

<div id="box" title="我是标题">我是一个div盒子</div>
<script>
  var box = document.getElementById('box');
  //offsetLeft、offsetTop:获取元素对象的位置，没有定位也可以读取。
  console.log(box.offsetLeft, box.offsetTop); //8 8
  //offsetWidth、offsetHeight:获取元素对象盒模型(包括border和padding)的宽高。
  console.log(box.offsetWidth, box.offsetHeight); //300 200
</script>

写：给当前元素对象添加css属性和值

<style>
  #box {
    width: 300px;
    height: 200px;
    background: red;
    font-size: 14px;
    margin-left: 100px;
  }
</style>

<div id="box" title="我是标题">我是一个div盒子</div>
<script>
  var box = document.getElementById('box');
  //第一种方式：box.style.css属性词
  box.style.width = '600px';
  box.style.background = 'blue';
  //注意：font-size写为fontSize；background-color写为backgroundColor
  box.style.fontSize = '80px';

  //第二种方式：box.style.cssText = 'css样式代码';
  box.style.cssText = 'width:200px;height:300px;background:red;';
</script>

---

BOM的概述：

1.BOM : Browser Object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口。

2.BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

3.BOM 的核心对象是 window

       window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其全局对象。

window对象的子对象

一.location对象：控制地址栏

【属性】

        1.href属性：控制浏览器地址栏的内容

//alert(window.location.href);//获取地址栏

//location.href = 'http://www.jd.com';//设置地址栏

window.setTimeout(function() {
    location.href = 'http://www.jd.com';
}, 3000);

        2.地址栏的结构 - search

http://www.baidu.com?a=1&b=2&c=3;

?后面的是地址栏带有的数据；多条数据用&符号链接。

location.search属性：读取地址栏?号后面的值，包括问号。

【方法】

        1.reload(true)方法：刷新页面,如果参数为true,通过缓存刷新。

alert('hehe');

location.reload(true); //刷新

二.history对象：浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面；JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能。

【属性】

        History.length：返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。

var result = window.history.length; // 返回当前session中的history个数

【方法】

        History.back()方法：会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。

//前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1)
window.history.back()

        History.forward()方法：在会话历史中向前移动一页。它与使用delta参数为1时调用 history.go(delta)的效果相同。

//在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于 history.go(1).
window.history.forward();

        History.go()方法：从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。

//delta 可选：相对于当前页面你要去往历史页面的位置。负值表示向后移动，正值表示向前移动。因此，例如：history.go(2)向前移动两页，history.go(-2)则向后移动两页。如果未向该函数传参或delta相等于0，则该函数与调用location.reload()具有相同的效果。
window.history.go(delta);

三.navigator对象

        userAgent用户代理信息，通过该属性可以获取浏览器及操作系统信息

window相关事件和操作：

onload事件： 页面内容加载完成后触发此事件(DOM结构， 图片等内容.....)

//语法
window.onload = funcRef;
//当 window  load  事件触发时，funcRef 方法会被调用。

//示例
window.onload = function() {
  init();
  doSomethingElse();
};

onscroll事件： 拖动浏览器的滚动条触发此事件。 事件触发频率很快。

//语法
element.onscroll = functionReference
//functionReference 是一个函数的引用。当该元素滚动时，会执行该函数。

//示例
var i = 0;
window.onscroll = function() {
  i++;
  console.log(i);
};

onresize事件： 浏览器窗口缩放所触发的事件

//语法
window.onresize = funcRef;
//funcRef 是一个函数引用

//示例
var i = 0;
window.onresize = function() {
  i++;
  console.log(i);
};

获取基本控制结构的元素对象

//获取document元素
alert(document);  //[object HTMLDocument]
//获取html元素
alert(document.documentElement);  //[object HTMLHtmlElement]

alert(document.body);  //[object HTMLBodyElement]    返回当前文档的 <body> 元素
alert(document.title);  //获取或设置当前文档的标题
alert(document.head);  //[object HTMLHeadElement]    返回当前文档的 <head> 元素

获取可视区的宽高

window.onresize = function() {//标准的
 console.log(document.documentElement.clientWidth);  //获取可视区域的宽
 console.log(document.documentElement.clientHeight);  //获取可是区域的高
};

滚动条距离（某些浏览器下面做兼容）

//document.documentElement.scrollTop
//document.documentElement.scrollLeft
//滚动条距离表示页面移出去的距离，比例来算的。
window.onscroll = function() {
  console.log(document.documentElement.scrollTop);
}
window.scrollTo(0, 1000);

//设置滚动行为改为平滑的滚动
window.scrollTo({
  top: 1000,
  behavior: "instant"
});