二阶段JavaScript-Day10知识点整理(操作BOM、操作DOM)

1.BOM(browser object model)

​ BOM，即浏览器对象模型，提供了一系列操作浏览器的方法。

​ BOM：核心对象，顶级对象叫window。

2.window对象的方法：

​ window. 可以省去。

//弹出框
window.alert("弹出框");

//输入框
window.prompt("输入框");
返回值：输入的内容。
    
//询问框
window.confirm("输入内容");
返回值：点击确定返回true，点击取消返回false。

//打开网址
window.open("网址地址");
一般会点击按钮，打开网址。

//关闭网址
window.close("网址地址");
关闭网址。

3.BOM的history

​ history：window的子对象，浏览器历史记录的一个对象

//后退一个页面
history.back();
history.go(-1);

//前进一个页面
history.forward();
history.go(1);

//刷新当前页面
history.go(0);

4.BOM的location

​ location：window的子对象。

//刷新
location.reload();

//跳转页面
location.href = '网址地址';

5.DOM(document object model)

​ DOM文档对象模型，DOM提供了一套操作文档(页面)的api。

5.1获取页面元素

//通过id获取元素,获取的是唯一一个。
document.getElementById	('id名');

//通过标签名来获取元素，获取所有该标签名的元素，返回伪数组形式(不是数组但可以遍历)。
document.getElementsByTagName('标签名');

//通过类名来获取元素，获取所有该类名的元素，换回伪数组形式(不是数组但可以遍历)。
document.getElementsByClassName('类名');

//通过name属性的值来获取元素，获取所有该name值的元素，换回伪数组形式(不是数组但可以遍历)。
document.getElementsByName('name值');

//通过选择器获取元素，只能获取第一个
document.querySelector('选择器');

//通过选择器获取元素，获取所有
document.querySelectorAll('选择器');

document.body;//获取body
document.html;//获取html
document.title;//获取title
document.head;//获取head

5.2修改样式

​ style法，把样式添加到行内。(样式的‘-’去掉，用驼峰命名)

tianIn.style.属性名 = '属性值';
//例如
tianIn.style.backgroundColor = 'red';
tianIn.style.fontSize = '24px';
tianIn.style.width = '200px';

​ className法，把样式都添加类名。

tianIn.className = '类名';

//classList追加类名
tianIn.classList.add('类名');

//classList移除类名
tianIn.classList.remove('类名');

//classList切换类名
tianIn.classList.toggle('类名');

5.3修改内容

//表单控件
元素.value//获取内容
元素.value = '';//设置内容

//普通元素
元素.innerHTML//获取内容
元素.innerHTML = '';//设置内容