DOM与BOM

DOM

DOM简介：

文档对象模型，全拼是Document Object Model，当网页被加载时，浏览器会创建页面的文档对象模型
作用：
有了这个对象模型，js可以对html中的元素进行各种操作(获取，更改，添加，删除等)。

DOM常用方法：

用来查找元素的方法

i：获取元素的id，用getElementById：

document.getElementById("test")；

ii：获取元素的标签名称，用getElementByTagName：

document.getElementByTagName("p")；

iii：获取元素的class,用getElementByClassName：

document.getElementByClassName("test")；

用来改变元素的方法

i：获取或者替换元素的内容，使用innerHtml

document.getElementById("test").innerHtml="hello"；

ii：改变元素的属性值，attribute
element.attribute = new value
element.setAttribute(attribute, value)

第一种
<img id=“image” src=“test1.png”~~~>
document.getElementById(“image”).src = “test2.png”;

第二种

我的标题

document.getElementById('test').setAttribute("style", "color:#ff0000")

iii：改变元素的样式：
element.style.property = new style

文字

document.getElementById("test").style.color="#ccc";

用来添加或者删除元素的方法

i：document.createElement(element)：创建新的 HTML 元素
显示出来要配合appendChild添加使用。

这是文本

点击

function test(){
创建一个新的p元素
var newText=document.createElement(“p”);
添加文本内容
var text=document.createTextNode(“这是一个新段落。”);
};

ii：document.removeChild(element)：删除 HTML 元素

这是一个段落。

这是另一个段落。

点击

function test(){
var parent=document.getElementById(“div”);
var child=document.getElementById(“p1”);
parent.removeChild(child);
}

iii：document.appendChild(element)：添加 HTML 元素

这是文本

点击

function test(){
创建一个新的p元素
var newText=document.createElement(“p”);
添加文本内容
var text=document.createTextNode(“这是一个新段落。”);
添加到p元素中
newText.appendChild(text);
找到一个已经存在的元素
var current=document.getElementById(“test”);
添加新元素
current.appendChild(newText);
};

或者在列表中使用

• A
• B

点击

function test(){
var newNode=document.createElement(“li”);
var textNode=document.createTextNode(“C”);
newNode.appendChild(textNode);
document.getElementById(“list”).appendChild(newNode);
}

iiii：document.replaceChild(new，old)：替换 HTML 元素

这是一个段落。

这是另一个段落。

点击

添加事件

document.getElementById(id).onclick = function(){code}

我的标题

按钮

document.getElementById(“button”).onclick = function(){
document.getElementById(“test”).style.color = ‘red’
}

BOM

BOM简介：

浏览器对象模型，全拼Browser Object Model。有多个对象组成，所有浏览器都支持，核心是代表浏览器窗口的window对象。

作用：
有了这个对象模型，可以获得窗口的参数，对窗口进行操作，移动，关闭，更改大小等

常用方法：

获得浏览器的窗口高度，宽度

单位是像素
window.innerHeight ：浏览器窗口的高度
window.innerWidth ： 浏览器窗口的宽度

对窗口操作

window.open()：浏览器打开一个新窗口
window.close()：浏览器关闭当前窗口
window.moveTo()：移动当前窗口
window.resizeTo()：重新调整当前窗口

屏幕属性

screen.width：可以获得屏幕宽度
screen.height：可以获得屏幕高度
screen.availWidth：可以获得除了窗口工具条等之外的屏幕宽度
screen.availHeight：可以获得除了窗口工具条等之外的屏幕高度

location属性

可以不带window
window.location.href：返回当前页面的url链接
window.location.hostname： 返回 web 主机的域名
window.location.pathname ：返回当前页面的路径或文件名
window.location.protocol ：返回使用的 web 协议，http:或者 https：

history属性

history.back() ：和浏览器点击后退按钮一样效果，前一个 URL
history.forward() ：和浏览器中点击前进按钮效果一样，下一个 URL

弹框

window.alert();
window.confirm();
window.prompt();

DOM，BOM对比与区别：

DOM是对浏览器中显示的网页做一系列的操作，比如获取或设置一些元素标签的属性，而BOM与浏览器交互，是获取或设置浏览器的各种属性以及获得屏幕的各种参数

新手入门，不喜勿喷哦^_