文章目录
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与浏览器交互，是获取或设置浏览器的各种属性以及获得屏幕的各种参数
新手入门，不喜勿喷哦_
来源：CSDN
作者：等风景看透~
链接：https://blog.csdn.net/weixin_44153970/article/details/103847479