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。