HTML DOM+浏览器BOM

1. HTML DOM

HTML DOM 是：

• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准
  HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
  换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

2. HTML DOM 方法和属性

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

3. HTML DOM 实例

3.1. 查找 HTML 元素

3.1.1. 通过 id 查找 HTML 元素
document.getElementById(id)

<p  id="intro">Hello  World!</p>
<p  id="demo"></p>
<script>
    var  myElement  =  document.getElementById("intro");
    document.getElementById("demo").innerHTML  = 
        "来自  intro  段落的文本是："  +  myElement.innerHTML;
</script>

3.1.2. 通过标签名查找 HTML 元素
document.getElementsByTagName(name)

<div  id="main">
    <p>DOM  很有用。</p>
    <p><b>getElementsByTagName</b>  方法。</p>
</div>
<p  id="demo"></p>
<script>
    var  x  =  document.getElementById("main");
    var  y  =  x.getElementsByTagName("p");
    document.getElementById("demo").innerHTML  = 
        '“main”中的第一段（索引  0）是：'  +  y[0].innerHTML;
</script>

3.1.3. 通过类名查找 HTML 元素
document.getElementsByClassName(name)

<p  class="intro">DOM  很有用。</p>
<p  class="intro"><b>getElementsByClassName</b>  方法。</p>
<p  id="demo"></p>
<script>
    var  x  =  document.getElementsByClassName("intro");
    document.getElementById("demo").innerHTML  = 
        'class  ="intro"  的第一段（索引  0）：'  +  x[0].innerHTML;
</script>

3.1.4. 通过 CSS 选择器查找 HTML 元素

<p  class="intro">DOM  很有用。</p>
<p  class="intro"><b>querySelectorAll</b>  方法。</p>
<p  id="demo"></p>
<script>
    var  x  =  document.querySelectorAll("p.intro");
    document.getElementById("demo").innerHTML  = 
        'class  ="intro"  的第一段（索引  0）：'  +  x[0].innerHTML;
</script>

3.1.5. 通过 HTML 对象选择器查找 HTML 对象

<form  id="frm1"  action="/demo/demo_form.asp">
    First  name:  <input  type="text"  name="fname"  value="Bill"><br>
    Last  name:  <input  type="text"  name="lname"  value="Gates"><br><br>
</form> 
<button  onclick="myFunction()">试一试</button>
<p  id="demo"></p>
<script>
    function  myFunction()  {
        var  x  =  document.forms["frm1"];
        var  text  =  "";
        var  i;
        for  (i  =  0;  i  <  x.length  ;i++)  {
            text  +=  x.elements[i].value  +  "<br>";
        }
        document.getElementById("demo").innerHTML  =  text;
    }
</script>

3.2. HTML DOM 事件
3.2.1. onclick事件

<button  id="myBtn">试一试</button>
<p  id="demo"></p>
<script>
    document.getElementById("myBtn").onclick  =  displayDate;
    function  displayDate()  {
        document.getElementById("demo").innerHTML  =  Date();
    }
</script>

3.2.2. onchange 事件
请输入您的名字：<input type="text" id="fname" onchange="myFunction()">
<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
<script>

function  myFunction()  {
     var  x  =  document.getElementById("fname");
     x.value  =  x.value.toUpperCase();
}

</script>

3.2.3. onmouseover 和 onmouseout 事件

<div  onmouseover="mOver(this)"  onmouseout="mOut(this)" 
    style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
    请把鼠标移上来
</div>
<script>
    function  mOver(obj)  {
      obj.innerHTML  =  "谢谢您"
    }
    function  mOut(obj)  {
      obj.innerHTML  =  "请把鼠标移上来"
    }
</script>

3.2.4. onmousedown, onmouseup 以及 onclick 事件

<div  onmousedown="mDown(this)"  onmouseup="mUp(this)"
    style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
    点击鼠标
</div>
<script>
    function  mDown(obj)  {
      obj.style.backgroundColor  =  "#1ec5e5";
      obj.innerHTML  =  "松开鼠标";
    }
    
    function  mUp(obj)  {
      obj.style.backgroundColor="#D94A38";
      obj.innerHTML="谢谢您";
    }
</script>

4. 浏览器对象模型BOM

BOM，即浏览器对象模型（Browser Object Model），是JavaScript与浏览器之间的接口，它允许JavaScript与浏览器进行交互，实现访问和控制浏览器窗口、文档和其他浏览器功能的功能
4.1. 窗口对象

窗口对象是BOM的核心，它代表浏览器中打开的窗口或选项卡。通过窗口对象，可以执行各种操作，
例如控制窗口的大小、位置、导航等。
4.1.1. 窗口大小

通过window对象，您可以获取和设置浏览器窗口的大小。下面是一些常见的窗口大小操作：
获取窗口的宽度和高度：

const  windowWidth  =  window.innerWidth;    //  获取窗口宽度
const  windowHeight  =  window.innerHeight;    //  获取窗口高度

调整窗口大小：

window.resizeTo(800,  600);    //  将窗口大小设置为宽800像素，高600像素

4.1.2. 窗口位置

通过window对象，您可以获取和设置浏览器窗口在屏幕上的位置。以下是一些窗口位置的操作：

• 获取窗口左上角相对于屏幕的坐标：

const  windowX  =  window.screenX;    //  获取窗口左上角的X坐标
const  windowY  =  window.screenY;    //  获取窗口左上角的Y坐标

• 移动窗口到指定位置：

window.moveTo(100,  100);    //  将窗口移动到屏幕上坐标(100,  100)的位置

4.1.3. 窗口导航

窗口对象还提供了导航功能，可以用于在浏览器中加载不同的URL。

• 加载新页面：

window.location.href  =  'https://www.example.com';    //  加载新的URL

• 刷新页面：

window.location.reload();    //  刷新当前页面

• 后退和前进：

window.history.back();    //  后退到上一个页面
window.history.forward();    //  前进到下一个页面

4.1.4. 弹出对话框

窗口对象允许您在浏览器中弹出对话框，包括警告框、确认框和提示框。

• 警告框：
  window.alert('这是一个警告框');   // 弹出警告框

• 确认框：

  const  result  =  window.confirm('你确定要执行这个操作吗？');    //  弹出确认框

• 提示框：

  const  userInput  =  window.prompt('请输入您的姓名：',  '默认值');    //  弹出提示框

  4.2. 定时器

BOM还提供了定时器功能，允许您在指定的时间间隔后执行代码。JavaScript中有两种类型的定时器：
setTimeout和setInterval。
4.2.1. setTimeout

setTimeout函数用于在指定的延迟时间后执行一次代码。

setTimeout(function()  {
    //  在延迟时间后执行的代码
},  1000);    //  1000毫秒（1秒）后执行

4.2.2. setInterval

setInterval函数用于按照指定的时间间隔重复执行代码。

setInterval(function()  {
    //  每隔一段时间执行的代码
},  2000);    //  每隔2000毫秒（2秒）执行一次

定时器常用于制作动画、定时刷新数据以及执行周期性任务。
4.3. 历史记录

BOM允许您访问和操作浏览器的历史记录。history对象包含与浏览历史相关的属性和方法。
4.3.1. 后退和前进

使用history对象，您可以后退或前进到浏览历史中的不同页面。

history.back();    //  后退到上一个页面
history.forward();    //  前进到下一个页面

4.3.2. 历史记录长度

您可以使用length属性来获取历史记录的长度，即浏览历史中的页面数量。
const historyLength = history.length;
4.3.3. 手动添加历史记录

通过pushState方法，您可以手动向浏览器的历史记录中添加新的页面状态。

history.pushState({  page:  'page1'  },  'Page  1',  '/page1.html');

上述代码会将新的页面状态添加到历史记录中，使浏览器地址栏显示为/page1.html。
4.4. 位置信息

BOM还提供了位置信息相关的功能，包括获取用户的地理位置信息。
4.4.1. 获取地理位置

使用navigator对象的geolocation属性，您可以获取用户的地理位置信息。

if  ("geolocation"  in  navigator)  {
    navigator.geolocation.getCurrentPosition(function(position)  {
        const  latitude  =  position.coords.latitude;
        const  longitude  =  position.coords.longitude;
        console.log(`您的纬度是：${latitude}，经度是：${longitude}`);
    });
}

这段代码会获取用户的地理位置，并显示纬度和经度信息。
4.4.2. 监听位置变化

您还可以使用watchPosition方法来持续监听用户的位置变化。

const  watchId  =  navigator.geolocation.watchPosition(function(position)  {
    const  latitude  =  position.coords.latitude;
    const  longitude  =  position.coords.longitude;
    console.log(`您的位置已更新，新的纬度是：${latitude}，经度是：${longitude}`);
});

4.5. 弹出窗口
BOM允许您使用window.open方法在浏览器中打开新的弹出窗口

const  newWindow  =  window.open('https://www.example.com',  '新窗口', 
'width=400,height=300');

上述代码会在浏览器中打开一个新窗口，显示https://www.example.com页面，窗口大小为宽400像
素、高300像素。
4.6. 屏幕信息

screen对象包含有关用户屏幕的信息，如屏幕宽度、高度、颜色深度等。

const  screenWidth  =  window.screen.width;
const  screenHeight  =  window.screen.height;
const  colorDepth  =  window.screen.colorDepth;
console.log(`屏幕宽度：${screenWidth}px，屏幕高度：${screenHeight}px，颜色深度：
${colorDepth}位`);

4.7. Cookie

通过document.cookie，您可以读取和写入浏览器的Cookie。Cookie是一种存储在用户计算机上的小
型文本文件，用于在多次访问之间存储和检索数据。
4.7.1. 读取Cookie
const cookieValue = document.cookie;
4.7.2. 写入Cookie

document.cookie  =  'username=John;  expires=Fri,  31  Dec  2022  23:59:59  GMT; 
path=/';