JavaScript—DOM和BOM

DOM

当网页被加载时，浏览器会创建页面的文档对象模型（DOM）。通过 DOM，JavaScript 能够访问和改变页面元素。

BOM

通过浏览器对象模型（BOM），JavaScript 可以与浏览器进行对话。

1. 查找元素

• 通过 id 查找，找不到时返回 null

  var e = document.getElementById("intro");

• 根据标签名查找，返回一个集合（如果找不到，则集合为空）

  var ps = document.getElementsByTagName("p"); 

• 根据类名查找，返回一个集合（如果找不到，则集合为空）

  var intros = document.getElementsByClassName("intro");

• 根据选择器查找

  // 找到第一个满足条件的元素，找不到时返回 null
  var x = document.querySelector("p.intro");
  
  // 找到所有满足条件的元素，返回一个列表（如果找不到，则列表为空）
  var xs = document.querySelectorAll("p.intro");

上述例子是在文档中查找元素，所以指定为 document，也可以在指定父元素中查找：

var x = document.getElementById("main");
var y = x.getElementsByTagName("p"); 

2. 操作元素

元素内容

var p1 = document.querySelector("#p1");

console.log(p1.innerText);        // 文本内容
console.log(p1.innerHTML);        // html内容

p1.innerHTML = "<b>Hello, DOM!</b>"

元素属性

var img = document.querySelector("#image");

console.log(img.src);

img.src = "/i/porsche.jpg";

CSS样式

• 直接修改 style 属性：

  document.getElementById('id1').style.color = 'red';

• 通过修改元素的类名来改变其 CSS 样式：

  document.getElementById('id1').className='btn';

  .btn {
    color: blue;
  }

3. 事件

事件处理程序

如，鼠标点击事件：

document.getElementById("myBtn").onclick = displayDate;

或：

<h1 onclick="changeText(this)">点击此文本！</h1>

<script>
function changeText(e) { 
    e.innerHTML = "Hello:)";
}
</script>

也可以通过注册事件监听器来处理事件：

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

事件传播

在 DOM 中有两种事件传播的方法，通过 addEventListener() 的第三个参数来指示

• 冒泡（false）：最内侧元素的事件会首先被处理，然后是更外侧的；
• 捕获（true）：最外侧元素的事件会首先被处理，然后是更内侧的。

document.getElementById("myP").addEventListener("click", myFunction, true);

移除事件处理器

document.getElementById("myDIV").onmousemove = myFunction;
// 或
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

4. 定时器

一次性

• t1 = setTimeout(f, ms)：ms 毫秒后执行函数 f。
• clearTimeout(t1)：在到期之前停止定时器 t1。

间隔性

• t2 = setInterval(f, ms)：每过 ms 毫秒便执行函数 f。
• clearInterval(t2)：停止定时器 t2。

var t = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

<button onclick="clearInterval(t)">停止时间</button>

5. location

• location.href：用于获取或修改当前页面的 URL。

  var url = location.href;
  
  location.href = "https://www.baidu.com";    // 会保持浏览历史

• location.replace()：替换当前页面，不会保持上次的浏览记录（已被替换）。

  location.replace("https://fanyi.sogou.com/")

• location.reload()：重新加载页面。

  location.reload();
  location.reload(true);    // 不使用之前的缓存

6. history

• history.back()：加载历史列表中的前一个 URL。
• history forward()：加载历史列表中的下一个 URL。