DOM，Document Object Model的简称，文档对象模型。是一套规范文档内容的通用型标准。它是中立于平台和语言的接口，它允许程序脚本动态地访问和更新文档的内容，结构和样式。简单来说，dom就是一个对网页进行增删改查的操作。
HTML DOM 模型被构造为对象的树。
DOM查找
var elem=document.getElementById();//根据ID属性查找
var elem=document.getElementsByClassName();//根据class属性
var elem=document.getElementsByName()//根据name属性查找
var elem=document.getElementsByTagName()//根据标签名获取标签合集
使用CSS查找
var elem=document.querySelector();
//返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。
var elem=document.querySelectorAll();
//返回文档中匹配到指定的元素或CSS选择器的对象集合。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#code{
width: 100px;
height: 50px;
background-color: lightblue;
font-size: 44px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<script>
function createRandCode(){
var chars=['a','b','c','1','2','3'];
var randcode="";
for(var i=0;i<3;i++){//3位随机码
var randpos =Math.floor(Math.random() * (chars.length-1));
randcode+= chars[randpos];
}
document.getElementById("code").innerHTML=randcode;
}
</script>
<div id="code"></div>
<button οnclick="createRandCode()">验证码</button>
</body>
</html>
DOM节点操作
原生节点对象，node
派生节点对象，parentNode，childNode
继承事件对象，EventTarget
继承节点对象
单个节点对象，有Document，DocumentType，Element，Attribute，Text，Comment，DocumentFragment7种
多个节点对象，有nodeList，HTMLCollection2种
1.获取节点
var divEle = document.createElement("div");
2.节点追加
somenode.appendChild(newnode)；
3.插入一个节点
somenode.insertBefore(newnode,某个节点);
4.删除一个节点
somenode.replaceChild(newnode, 某个节点);
5.示例：替换页面元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>替换页面元素</title>
</head>
<body>
<div id="Odiv">
<p id="p1">我是第一行内容</p>
<p id="p2">我是第二行内容</p>
<p id="p3">我是第三行内容</p>
<p id="p4">我是第四行内容</p>
</div>
<input type="button" value="将第2行内容替换为JavaScript课程" onClick="replaceNode()"/>
<script type="text/javascript">
function replaceNode(){
// 获得父元素div
var parNode=document.getElementById("Odiv");
// 获得div下的第2个p子元素
var secondP=document.getElementById("p2");
// 创建新的<div> 元素节点
var newDiv=document.createElement("div");
// 创建文本节点
var newText=document.createTextNode("JavaScript课程");
// 将文本节点添加到刚创建的新元素div中
newDiv.appendChild(newText);
// 在父元素中，把第二个p元素替换成新元素div
parNode.replaceChild(newDiv,secondP);
}
</script>
</body>
</html>
关于BOM
BOM，Brower Object Model浏览器对象模型，对浏览器窗口进行访问和操作。
提供了独立于内容而与浏览器窗口进行交互的对象，可以对浏览器窗口进行访问和操作，它包括window，doument，loation ，history ，screen 等子对象。
document（文档对象）：也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。
history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。
location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。
navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。
screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。
window对象
当前浏览器窗体。是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。
定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。
常用的方法：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
location对象
location对象提供的用于改变URL地址的方法，所有主流的浏览器都支持。
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
其他对象
history对象
history对象可对用户在浏览器中访问过的URL历史记录进行操作。
history.forward() // 前进一页
history.back() // 后退一页
screen对象
屏幕对象
navigator对象
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
一个实例：滚动的小球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#one{
width:80px;
height:80px;
background-color: pink;
position: fixed;
left:0;
top:0;
border-radius: 50%;
font-size: 10px;
text-align: center;
line-height: 80px;
}
html,body{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<script>
window.onload = function(e){
var isSure = confirm('开始动画？')
var x = 0;
var y = 0;
var xs=10;
var ys=10;
var left = document.body.clientWidth;
var one = document.getElementById("one");
var two = document.getElementById("two");
function move(){
x += 0.2*xs;
y += 0.2*ys;
one.innerHTML = 'x:' + x +'y:' +y;
two.innerHTML = '当前页面路径:' + window.location.href;
if(x >= document.body.clientWidth-one.offsetWidth-20 || x < 0){
xs=-1*xs;
}
if(y >= document.body.clientHeight-one.offsetHeight-20 || y < 0){
ys=-1*ys;
}
one.style.left = x+"px";
one.style.top = y+"px";
};
var dt = setInterval(function(){
move()
},100);
if(isSure){
one.onmouseover = function(){
clearInterval(dt)
}
one.onmouseout = function(){
dt = setInterval(function(){
move()
},100);
}
}
}
</script>
</body>
</html>
来源：CSDN
作者：skyyy要努力学习
链接：https://blog.csdn.net/qq_39146783/article/details/103827404